Using document.getElementById to change style:



JavaScript 2: getElementById Part 2Using document.getElementById() you can modify the content of a web page. For images, using document.getElementById() you can modify:the src (we’ve seen this)the alt (if you changed the src to, say, “tornado.gif”, you would want to change the alt as well)the style of the imageUsing document.getElementById to change style:You can use document.getElementById to change the style of an html element on your web page. Again, whatever element you’re changing must have a unique id.Step 1 Add a paragraph to your html code. Give the paragraph an id (I gave it an id of ‘p1’). With the id, my paragraph looks like this:<p id = 'p1'> Computers are good at following instructions, but not at reading your mind.</p>Step 2: Below this paragraph, create a button. The button should have a value of “green”, and should call a greenfunction when it is clicked on. The id of the above paragraph should be passed into the parameter when the button is clicked on. So you might have something like this:<input type = "button" value = "Green" onClick = "greenfunc('p1')">Step 3: now in your .js file, create a new function. This function should take an input parameter. This function has to have the same name as the function called with the input button, and it must have a parameter. Step 4: inside the function, use document.getElementById to set style of the element whose id was passed into and is now held by the parameter. To change the style, you should use .style and then specify the style you want to change. So my greenfunc looked like this:function greenfunc(x) {document.getElementById(x).style.borderColor = "#339922"document.getElementById(x).style.backgroundColor = "#99FF99"document.getElementById(x).style.color = "#227722"}Step 5: Save your files. Test to make sure they workIf it doesn’t:Make sure you are using borderColor and not border-colorMake sure you use = and not :Your Turn: Part 1 (3 pts): Get the above code workingPart 2: (6 pts) More ColorIn your html, add two more buttons: one that calls a redfunction, and one that calls a bluefunction. Make sure the buttons call those functions with the id of the paragraphNow in your javaScript file, create two new functions: a redfunction, and a bluefunction. Both functions should have a parameter that will hold the id of the element being passed in.For each function, modify the style being created so that it is appropriate to the function (e.g., for the red function the border becomes a reddish color, the background color becomes a different reddish color, etc., and for the blue function the border becomes a bluish color, etc.Test your 3 buttons – each should change the paragraph’s color style to be that of the button they clicked on.Part 3: (5 pts): For Other ElementsIn your html code, add a header element. It can be an <h1> or a <h2> or any of the header elements. Give the header an id.Below the header, copy the three buttons from above and modify them slightly so that they now call the same functions, but with the id of the header you just created. Save and test your code. When you click on any of these 3 buttons, the header’s style should change to the color specified.Some things you can change with the style:backgroundColorbackgroundImagebackgroundPositionbackgroundRepeatborderColorborderStyleborderWidthmarginpaddingwidthposition colorfontFamilyfontSizefontWeightfontStylelineHeighttextAlignAnd more…, for instance, you could have a function as follows:function changeStyle(par) {document.getElementById(par).style.backgroundColor= "#662200"document.getElementById(par).style.color= "#FFFFCC"document.getElementById(par).style.border= "6px solid orange"document.getElementById(par).style.padding= "15px"document.getElementById(par).style.fontFamily= "arial"}That changes the border, the padding, and the font’s family as well as the background color and the font’s colorYour Turn:EasierToReadStyle (6 pts):Create a function in your javaScript that has a parameter that will hold the id of an element on your web page. Inside the function modify the element’s style so that the element would be easier to read: increase the size of the font, set the background color to black or very dark and the font color to white or very light, change the font to a sans-serif font like arial, and change the line height to be nicely spaced. Now back in your html page, create a few paragraphs and headers (h2, h3, something like that) At least 2 paragraphs and at least 1 header. Give each of these its own unique id. Make each of these elements call the easiertoread function when you click on it, and make sure it passes in its id. Save and test – now when you click on those paragraphs and header, their style should change so that the element clicked on is easier to read.Changing width and heightAs you can see in the above style elements, you can change the width and height of an element. Step 6: In your web page, add an image. Give the image an id. Style the image so that it’s relatively small on the web page.Step 7: Create a button below the image. The button should have a value of “make larger” and it should call a function with the id of the image as the value that will go into the function’s parameter.Step 8: Save and make sure that the image shows up. Step 9: Now in your javaScript file, create a function with the same name as the one the button above calls when clicked on. The function should have a parameter (that will hold the id of the image)Step 10: Inside the function, change the style of the image’s width and height using document.getElementById and the style.width and style.height. My function looked as follows:function grow(x) {document.getElementById(x).style.width = "300px"document.getElementById(x).style.height = "300px"}Step 11: Now save your javaScript. Test your code. When you click on the button below the image, it should grow to 300 px in size.Your Turn:Part 1: Get the above code workingPart 2: Create a second button that makes the image smaller. Create a corresponding javaScript function that changes the style to make the width and height smallerinnerHTML:So far we’ve changed the style of something with an id, the src, the width, the height, and the alt of an image, but we haven’t changed the actual content of your html page. For Changing the content can be done using innerHTMLFirst, you must understand exactly what innerHTML is. The innerHTML is what is between the opening and the closing tag, regardless of what the tag is. So in the following html code:<p id = “firstp”> This is the innerHTML text between the opening and closing tag</p>The innerHTML of firstp is: “This is the innerHTML text between the opening and closing tag”In this html code:<h1 id = “largeheader”>Autumn</h1>The innerHTML of largeheader is “Autumn”In this html code:<a href = "" id = "coolcows">link to cows are awesome</a>The innerHTML is “link to cows are awesome”Let’s start with this:CoStep 1: in your html page, add 3 paragraphs. Give each an id. Make each call the function, readinnerHTML (that you will be writing shortly) with its id as a parameter. For now, make the content of the paragraph short – a one-word thing, like a season, an animal, a holiday, something like that. So, for instance, one of the 3 paragraphs might looks like this:<p id = 'p1' onClick = "readinnerHTML('p1')"> Cows </p>Step 2: Save your html page. Load it in a browser just to be sure it’s working.Step 3: in your .js file, add a function readinnerHTML(par). The function will read the innerHTML of whatever id you sent into the function. And then you’ll use an alert to print it out (for now). So the function will look like this:function readinnerHTML(par) {x = document.getElementById(par).innerHTMLalert("you clicked on " + x)}Step 4: Save the .js file and test the function by clicking on each of the paragraphs.Do you understand what happened? When you clicked on the paragraph, you sent the id of the paragraph into the parameter par in the function in the .js file. Then document.getElementById(par).innerHTML gets the innerHTML, or whatever is between the opening and closing tag of the element with the id. That is put into the variable x. So x holds the stuff between the opening and closing tag. The alert box is then used to print out, ‘you clicked on ‘ and whatever x holds. So the alert box is printing out the innerHTML of each of the paragraphs when you click on them.You can make this more interesting by adding an ‘if’ condition to your function. The if condition will add more information about whatever the user clicked on. To give you an example, I had as my paragraphs, a cow, a giraffe, and a panda. So my if condition looks like this:if (x === 'Cows') {y = "You are more likely to be killed by a cow than a shark"}else if (x === 'Giraffes') {y = "A giraffe's legs are longer than most humans are tall, and their necks are too short to reach the ground"}else if (x === 'Pandas') {y = "A baby panda eats its mother's poop, and all pandas have 6 digits on their paws"}So the variable y will hold extra information about the paragraph the user clicked on.And finally, you will want to put the innerHTML together with the new information. I included a “: “ between the two so they’re nicely separated:alert(x + ": "+y)So the modified function will look like this:function readinnerHTML(par) {x = document.getElementById(par).innerHTMLif (x === 'Cows') {y = "You are more likely to be killed by a cow than a shark"}else if (x === 'Giraffes') {y = "A giraffe's legs are longer than most humans are tall, and their necks are too short to reach the ground"}else if (x === 'Pandas') {y = "A baby panda eats its mother's poop, and all pandas have 6 digits on their paws"}alert(x + ": "+y)}Step 5: Modify your function to resemble the function above, only with y holding information appropriate to the paragraphs on your html page.Step 6: save both the html and the .js, and load the .html into a browser and test it.Instead of using an alert box, you can also replace the existing paragraph with the new, expanded information. To do that, you’d replace the js code, alert(x + “: “ + y) withdocument.getElementById(par).innerHTML = x + ": "+yStep 6: Modify your function above by replacing the alert box with the above document.getElementById. Save both the html and the .js code, and test this in the browser. Make sure you understand what is going on!! Make sure you understand what x holds, and also that par holds the id of an element on your html page. The element whose innerHTML is being read and the element whose innerHTML is being changed are both identified by the id in the par parameter.You can use document.getElementById to modify another paragraph on your web page.Step 7: Add both an image and another paragraph above the 3 paragraphs you created in step 1, above. Give the paragraph an id of ‘mainid’.Step 8: modify the bottom document.getElementById() that changes the innerHTML (not the one that reads the innerHTML). You are going to change it so that, instead of modifying the paragraph that calls the function, you modify the mainid paragraph simply by changing the innerHTML of that bottom document.getElementById(). So that bottom line will now look like this:document.getElementById('mainid').innerHTML = x + ": "+yStep 10: Save your html code and your .js file. Load the html code and click on each of the paragraphs (not the mainid paragraph). When you click on a paragraph, the mainid paragraph should change text to reflect the paragraph you clicked on.Your Turn:In step 7, you added an image to the html code. Give the image an id. You can now use document.getElementById() with the id of the image to change the .src of the image, along with the mainid’s paragraph. Modify the function you created above so that, depending on what paragraph is clicked on, an appropriate image shows up as well as a longer paragraph. Modify the style of the paragraph so that it fits with either the image’s colors or the paragraph’s themes (so, for instance, if you’ve got the word Panda as a paragraph, when you click on it, you want a picture of the panda to pop up in the image’s spot, text about pandas to pop up in the mainid paragraph, and maybe give the mainid paragraph a background of bamboo with a yellow-green border and yellow text, or something like that). Note that to do this, you’ll have to modify each of the if conditions so that each one uses document.getElementById to change the image’s src and also to change mainid’s style.Step 3: Add a button (input type = “button”…) Make the value be “click to enlarge” and make the onClick call a function “enlarge(‘a’)”Note: right now you’re passing in the word ‘a’. There is no reason for this. It’s just a placeholder for now. Later, you’ll pass in something more relevant and use it in the function. For now, just pass in ‘a’ and trust me that it will eventually serve a purpose.Step 4: Save the html file. Load it and make sure the image shows up in your web page.Step 5. Now, in the .js file, add a function and call it enlarge(x).Step 6: In the file, add the following lines:function enlarge(x) {document.getElementById('pump1').width = 300document.getElementById('pump1').height = 300}Step 7: Save the .js file. Make sure the html file is linked to the .js file. Step 8: Load the .html file into a browser. Click on the button to enlarge. Your picture should get bigger. Step 9: Create another button in your html code. Make the value be “click to make smaller” and make it call a function shrink(‘b’) (again, sending in ‘b’ is useless for now)Step 10: In your .js code, create a second function called shrink(x). Inside the function, use document.getElementById to set the width to 100 and to set the height to 100. Step 11: Save the .js. Load the html into a browser and test both buttons. One should make the image larger, and the other should make the image smaller.Your Turn:Part a: Add 2 or 3 more images to your web page. Give each its own id.Now give each of the new images its own set of enlarge and shrink buttons. Each enlarge button should call the enlarge(x) function with the id associated with that image. Each shrink button should call the shrink(x) function with the id associated with that image.Note that you are not changing the .js file at all!!! Save yoru html. Test it by clicking on all the buttons. Each button should adjust the picture associated with it.Part c: create a new function, askUser(x). For this function, instead of setting the width to a particular value (e.g., 300), use a prompt box to ask the user, “how wide do you want the image?” the user will type in a value, and that number should go into whatever variable you have to the left of the prompt. Use document.getElementById(x).width to set the width to the variable holding what the user typed in to the prompt box. For each of 3 new images, create a button that calls the function askUser with the appropriate id inside the parentheses. Save the files, load them and test them to see if, when the user types something in, the width adjusts to what the user typed in.Using document.getElementById to get information:You have used document.getElementById to change existing information, but, like the prompt box, you can also use document.getElementById to obtain information about your html page. Let’s try it:Step 1: create a new function in your .js. Call it getInfo(x).Step 2: Inside the function, use a variable to hold what the width of an image is by using document.getElementById(x) as follows (the variable will be called y):y = document.getElementById(y).widthStep 3: to show what y holds, use an alert box as follows:alert(y)Putting this all together, you’d have:function getInfo(x) {y = document.getElementById(x).widthalert(y)}Step 4: Create a new (or modify an existing) html page. Add at least 2 images to the page, making sure each has a unique id. For each image, add a button that calls getInfo(x). Make sure each button in your html page, when it calls getInfo() has the id in single quotes in between the parentheses. Step 5: Save both files. Load the html page into a browser and test it by clicking on each of the buttons. When you click on the buttons, you should have an alert box that pops up Try: modify getInfo so that y holds the height instead of the width. Save and try. Then modify the function so that y holds the alt. Again, save and try. Modify one more time, so that y holds the src. Save and try. See how this works? Now put it back so that y holds the width.Since y holds the width, let’s use that information. You can add to and subtract from y, and then use the updated y value to modify the html image’s width. Step 6: Modify getInfo as follows::function getInfo(x) {y = document.getElementById(x).widthalert(y)z = y + 10alert(z)y = zalert(y)}Step 7: Save the .js and then run your html and test the functionCan you see how y updates to be the original width + 10? Let’s use that to update the width of your image.Step 8: Let’s get rid of everything but the last alert:function getInfo(x) {y = document.getElementById(x).widthz = y + 10y = zalert(y)}Step 9: Now let’s set the width to the updated y value:function getInfo(x) {y = document.getElementById(x).widthz = y + 10y = zalert(y)document.getElementById(x).width = y}Step 10: Save the .js. Load your html file and test the function by clicking on the button that calls getInfo(). You should see the width in an alert box, and then the width should increase by 10.Step 11: Click on the button multiple times. See how the width keeps increasing by 10 every time you click on it? This is because you are changing the width with document.getElementById(x).width = yOnce you do this, the width is now whatever number y holds. So the next time you call the function, and you do:y = document.getElementById(x).widthy will now hold the width that was updated last time you called the function. So you are adding 10 to the updated width. If you don’t understand this, ask me to explain more.Your Turn:Part 1: update getInfo. First, change its name to getLarger(x). Now, in addition to increasing the width by 10 every time you call the function, have the function increase the height as well. You will need different variables for this, so you may need to add something like this:q = document.getElementById(x).heightp = q + 10Your updated function should work such that every time you call getLarger, both the width and the height should increase by 10Part 2: Write a similar function getSmaller(x) that decreases the width and the height of an image by 10. Add buttons in the html that call this function. Now you should be able to click on both buttons and one will make the image get larger, and the other will make it get smaller for each image that calls getLarger and getSmallerPart 3: Add some conditions to your getLarger and getSmaller functions. The conditions should be as follows:If the height gets bigger than 300, you want to set it back to 100. Same with the width. So inside your function, after you’ve increased the value in y, and then later the q, you will use the y and the q in an if condition, for example:if (y > 300) {y = 100}You’ll do the same with q after you’ve increased the value in q.Part 4: do something similar to the getSmaller function such that if the width and the height get smaller than 20, reset them back to 100. Save and test. ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download