1 / 22

document.getElementById

document.getElementById. Used to change anything in your document (web page) that has an id Then you can change different aspects of the element with that id: < img src = “zombie.jpg” height = “500” width = “300” alt = “eat your brain” id = “img1”>

theresapatterson
Download Presentation

document.getElementById

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. document.getElementById • Used to change anything in your document (web page) that has an id • Then you can change different aspects of the element with that id: <imgsrc = “zombie.jpg” height = “500” width = “300” alt = “eat your brain” id = “img1”> • You can use document.getElementById to change the: • src • height • width • alt • (technically, you can even change the id, but as a rule, don’t)

  2. link We can use getElementById to change CSS style: <!DOCTYPE html><html><head> <meta charset= "utf-8" /></head> <body> <p id = "firstp"> This is a paragraph</p> <p id = "secondp">This is a second paragraph</p> <script> document.getElementById("firstp").style.color = "#9999FF"; document.getElementById("firstp").style.fontSize = "120%"; document.getElementById("firstp").style.backgroundColor="#332277"; document.getElementById("firstp").style.textAlign = "right"; document.getElementById("firstp").style.padding = "30px"; document.getElementById("firstp").style.borderWidth = "8px"; document.getElementById("firstp").style.borderColor = "green"; document.getElementById("firstp").style.borderStyle = "inset"; </script> </body></html>

  3. Other styles you can change using getElementById color fontFamily fontSize fontWeight fontStyle lineHeight textAlign And more… http://www.w3schools.com/jsref/dom_obj_style.asp backgroundColor backgroundImage backgroundPosition backgroundRepeat borderColor borderStyle borderWidth margin padding width position

  4. link What if we want to change the text? <body> <p id = "firstp"> This is a paragraph</p> <p id = "secondp">This is a second paragraph</p> <script> var x = confirm("Do you want to see new text?") if (x == true) { document.getElementById("firstp").innerHTML = "Some new text"; } </script> </body> Two new coding elements: innerHTML and the confirm button

  5. innerHTML The innerHTML is what is between the opening and the closing tag, regardless of what the tag is: <p id = “firstp”> This is the innerHTML text because it goes between the opening and closing tag </p> Above, the innerHTML is: “This is the innerHTML text because it goes between the opening and closing tag” To change it: document.getElementById(“firstp”).innerHTML= “new text for paragraph” <h1 id = “firsth”>Title goes here </h1> Above: innerHTML is: Title goes here To change: document.getElementById(“firsth”).innerHTML = “New Title”

  6. innerHTML (cont.) <p id = “linked”> <a href = “udel.edu” id = “firstlink”> link to udel </a> </p> What is the innerHTML of linked? What is the innerHTML of firstlink? How would you change the innerHTML of linked to a new link? <olid = “list1”> <li id = “firstItem”> cats </li> <li id=“seconditem”> dogs </li> </ol> What is the innerHTML of list1? What is the innerHTML of firstitem? How would you change the innerHTML of list1 to a new list?

  7. Confirm box • The confirm box is like the prompt box, only in this case you only have the choice of choosing “ok” or “cancel”. varx = confirm(“Do you want to change something?”) • If you choose ok, x holds true • If you choose cancel, x holds false • Aside: true and false are known as Boolean values var x=confirm("Press a button") if (x==true) {document.write(“p1”).innerHTML="You pressed OK!" } else {document.write(“p1”).innerHTML ="You pressed Cancel!“ }

  8. link <body> <h1>Learn about <span id = "animal">animals</span></h1> <p><img width = "230" height = "200" id = "pic1" alt = "animal pic"> </p> <p id = "firstp"> You can learn so much about every animal in the zoo!</p> <script> var animals = new Array() animals[0] = "lions" animals[1] = "giraffes" animals[2] = "penguins" animals[3] = "polar bears" var pics = new Array() pics[0] = "Images/lion.jpg" pics[1] = "Images/giraffe.jpg" pics[2] = "Images/penguin.jpg" pics[3] = "Images/polarbear.jpg" var info = new Array() info[0] = "Lions are the second largest big cat species in the world (behind tigers). The roar of a lion can be heard from 8 kilometers (5.0 miles) away." info[1] = "A male giraffe can weigh as much as a pick up truck! Although a giraffe’s neck is 1.5 – 1.8 metres, it contains the same number of vertebrae at a human neck." info[2] = "Penguins spend around half their time in water and the other half on land. Penguins spend around half their time in water and the other half on land." info[3] = "Polar bears keep warm thanks to nearly 10 cm of blubber under the skin. Polar bears have black fur under their outer layer of white fur." var x = confirm("Would you like to learn about an animal?") if (x == true) { varnum = Math.floor(Math.random()*4) document.getElementById("animal").innerHTML = animals[num]; document.getElementById("pic1").src = pics[num]; document.getElementById("firstp").innerHTML = info[num]; } </script> </body>

  9. Comments • A way of including comments to yourself and to other people without the browser caring. • Comments start with /* and end with */. • Everything between these opening and closing markers is ignored by the browser • so anything between them won’t be run by javascript. <script> /* This script asks the user for a number. It uses that number to set the element with the id “ball1” to the width of the number the user entered */ varx = parseInt(prompt("What size should the ball's width be?"))document.getElementById("ball1").width = x </script> • Comments are designed for leaving information for people to read (as opposed to the browser) • But we can use comments to isolate what code is working and what isn’t

  10. Debugging: • You've got a problem – your code doesn't work. • There is a "bug“* in your code. (something that isn't correct • Could be a typo (most likely!!) • Could be a "syntax error" • e.g., document.getElementbById('pic1).src= "cat.jpg"; • e.g., forgetting an opening or closing { } or ( ) • e.g., if (par1 = 'pic1') • Could be a logic error • These are the hardest to find! • When what you're trying to do won't be done in the way you're trying to do it. • How do you find the "bug"?? *Aside: the term debugging came from radio repairmen from before WWII. In fixing radios, the repairmen often had to clean out bug carcases in order to get the radios working.

  11. Finding the bug (Debugging) • Is your web site showing up as you want it to? • Probably an html error • Make sure the page is valid (you’ve got an opening and closing <html> tag and an opening and closing <body> tag inside it. • Check to make sure that if you opened a tag, you closed it properly. • Next, check to make sure everything opened is closed • Make sure your quotes (" ") open and close properly • Make sure the quotes are " "and not “” (from copying from ppt or word) • Go through and check for opening and closing () and {} • CHECK CAREFULLY FOR PROPER CAPITALIZATION • If nothing shows up, check to make sure you've properly entered, <script> </script>

  12. To isolate where the bug is, use comments: <!DOCTYPE html> <html><head><meta charset= "utf-8" /></head> <body> <h1> Do you need a coat in Europe? </h1> <p id = “p1”> Find out here! </p> <script> varctemp = parselnt(prompt("What is the temperature (in Celsius?")) varftemp = (9/5) * ctemp + 32 if (ftemp >= 20) { document.getElementById(‘p1’).innerHTML = "You'll need a coat and hat } else if (ftemp => 45) { document.getElementById(‘p1’).innerHTML =“You'll need a light coat" } else if (ftemp >=60) { document.getElementById(‘p1’).innerHTML ==“You'll need a sweater" } else if (ftemp >= 70) { document.getElementByID(‘p1’).innerHTML =“ You're good without a coat" } </script> </body></html>

  13. Comments/Debugging <body> <h1>Learn about <span id = "animal">animals</span></h1> <p><img width = "230" height = "200" id = "pic1" alt = "animal pic"> </p> <p id = "firstp"> You can learn so much about every animal in the zoo!</p> <script> var animals = new Array() animals[0] = "lions" animals[1] = "giraffes" animals[2] = "penguins" animals[3] = "polar bears" var pics = new Array() pics[0] = "Images/lion.jpg" pics[1] = "Images/giraffe.jpg" pics[2] = "Images/penguin.jpg" pics[3] = "Images/polarbear.jpg" var info = new Array() info[0] = "Lions are the second largest big cat species in the world (behind tigers). The roar of a lion can be heard from 8 kilometers (5.0 miles) away." info[1] = "A male giraffe can weigh as much as a pick up truck! Although a giraffe’s neck is 1.5 – 1.8 metres, it contains the same number of vertebrae at a human neck." info[2] = "Penguins spend around half their time in water and the other half on land. Penguins spend around half their time in water and the other half on land." info[3] = "Polar bears keep warm thanks to nearly 10 cm of blubber under the skin. Polar bears have black fur under their outer layer of white fur." var x = confirm("Would you like to learn about an animal?") if (x == true) { varnum = Math.floor(Math.random()*4) document.getElementById("animal").innerHTML = animals[num]; document.getElementById("pic1").src = pic[num]; document.getElementById("firstp").innerHTML = info[num]; } </script> </body>

  14. Functions • Remember this? • Wouldn’t it be nice to be able to bring up a new animal and paragraph without having to reload the page each time? • We can! We can place the javascript inside a function, with a name, and then “call” the function again and again and again. <body> <h1>Learn about <span id = "animal">animals</span></h1> <p><img width = "230" height = "200" id = "pic1" alt = "animal pic"> </p> <p id = "firstp"> You can learn so much about every animal in the zoo!</p> <script> var animals = new Array() animals[0] = "lions" animals[1] = "giraffes" animals[2] = "penguins" animals[3] = "polar bears" var pics = new Array() pics[0] = "Images/lion.jpg" pics[1] = "Images/giraffe.jpg" pics[2] = "Images/penguin.jpg" pics[3] = "Images/polarbear.jpg" var info = new Array() info[0] = "Lions are the second largest big cat species in the world (behind tigers). " info[1] = "A male giraffe can weigh as much as a pick up truck!" info[2] = "Penguins spend around half their time in water and the other half on land. " info[3] = "Polar bears keep warm thanks to nearly 10 cm of blubber under the skin." var x = confirm("Would you like to learn about an animal?") if (x == true) { varnum = Math.floor(Math.random()*4) document.getElementById("animal").innerHTML = animals[num]; document.getElementById("pic1").src = pics[num]; document.getElementById("firstp").innerHTML = info[num]; } </script> </body>

  15. Defining a function function fname() { code that function does } Fname is the name you give your function. The { and } start and end the function You put whatever you want to happen in between { and }

  16. link Example: <!DOCTYPE html><html><head> <meta charset= "utf-8" /></head> <body> <p id = "firstp"> This is a paragraph</p> <script> function changestyle() { document.getElementById('firstp').style.color = "#FFFFFF"; document.getElementById('firstp').style.backgroundColor = "#000000"; document.getElementById('firstp').style.fontFamily = "arial"; } </script> </body></html>

  17. link Example: <!DOCTYPE html><html><head> <meta charset= "utf-8" /></head> <body> <p id = "firstp"> This is a paragraph</p> <input type = "button" value = "Click here for high contrast" onClick= "changestyle()" > <script> function changestyle() { document.getElementById('firstp').style.color = "#FFFFFF"; document.getElementById('firstp').style.backgroundColor = "#000000"; document.getElementById('firstp').style.fontFamily = "arial"; } </script> </body></html>

  18. Functions (continued) • Functions do not execute automatically • So far, the code we have written executed when we click on the button • Functions ONLY execute when our code calls them • Functions can go in the head section of our html code or in the body • We usually put them in the head section • Reason: if there are images involved, by putting it in the head section, the images will preload. • If we put the code in the body section, the images won’t download until the function is called, making it run slow. • Plus, it is just sloppier

  19. Naming Functions • Like variables: • No spaces!!!!! • No special characters • Cannot start with a number • Cannot be the same name as a variable you’re using • Cannot be the same name as something that javaScript already uses.

  20. link <!DOCTYPE html><html> <head> <meta charset= "utf-8" /> <script> function show_confirm() { var r=confirm("Press a button"); if (r==true) { document.getElementById('p1').innerHTML = "You pressed OK!"; } else { document.getElementById('p1').innerHTML = "You pressed Cancel!"; } } </script> </head> <body> <input type="button" value="Show confirm box" onclick="show_confirm()" > <p id = "p1"> Answer goes here </p> </body> </html>

  21. link <!DOCTYPE html><html><head> <meta charset= "utf-8" /> <script > function show_pref() { var color = prompt("Please enter your favorite color!", ""); if (color == "purple") { document.getElementById('p1').innerHTML="You are artistic and moody! " } else if (color == "blue") { document.getElementById('p1').innerHTML="You are serene and calm." } else if (color == "red") { document.getElementById('p1').innerHTML="You are fiery and passionate!" } else if (color == "green") { document.getElementById('p1').innerHTML="You are earthy and comfortable." } } </script> </head> <body> <h1> color transcript </h1> <input type = "button" value = "find out what your color says about you!" onClick = "show_pref()"> <p id = 'p1'> Your info will go here </p> <p>Thanks for playing! <p> </script> </body> </html>

More Related