JavaScript getElementById not Working

Question

I need help with this code if someone is willing to help. I cannot get the 2 getElementById functions to work and I am a beginner so I am sure it is something simple but I have not been able to fix it. I need to click on the text to change the font. Any help in the right direction will be greatly apprecited. Please check the code below.

<?xml version = "1.0" encoding = "utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Solution Page 486 Exercise 12.7</title> <style type = "text/css"> .option { color: darkblue } .graybg { background-color: #aaaaaa } .whitebg { background-color: #ffffff } .sans { font-family: sans-serif } .serif { font-family: serif } </style> <script type = "text/javascript"> function bodyClass(color) { document.body.className = color; } </script> </head> <body> <div id = "main">Click on Options Listed Below to see how they modify this page.<br ><br > <div>Options: <div onclick = "bodyClass('graybg');" class = "option">Gray background</div> <div onclick = "bodyClass('whitebg');" class = "option">White background</div> <div onclick = "document.getElementById(" class = "option" classname ="sans" ? main?).>Sans-serif text</div> <div onclick = "document.getElementById(" class = "option" classname ="serif" ? main?).>Serif text</div></div></div> </body> </html>

Your markup is all messed up. <div onclick = "document.getElementById('YOUR_ID_HERE')" ....> is how it should be — JohnP
– JohnP, Commented Nov 29, 2011 at 8:06
getElementById is exactly that, it will get an element by it's ID, for example document.getElementById("main") would then get the div with the id="main" like you have above. — Matt
– Matt, Commented Nov 29, 2011 at 8:07

Quentin · Accepted Answer · 2011-11-29 08:07:00Z

The syntax of getElementById is:

document.getElementById('the_id_of_an_element')

You have:

document.getElementById(

You need to give it an argument and include the closing ). You then probably want to do something with the return value.

hungryMind · Accepted Answer · 2011-11-29 08:08:35Z

document.getElementById itself says it fetch element by Id but not by class or any other attributes, this should work document.getElementById('main')

Naeem Ul Wahhab · Accepted Answer · 2011-11-29 08:08:03Z

Do not write JavaScript in a string assigned to an 'onclick' property. Write it in a function in a tag and assign the function,here is the code:

<body> ... <div id='an_id'> <!-- doesn't have to be a div, any element is OK --> ... <script type='text/JavaScript'> var some_elem = document.getElementById( 'an_id' ); some_elem.onclick = my_func; // no parens, no quotes! function my_func() { // your code goes here // in here, 'this' refers to the element that got the click } </script> </body>

Hope this will help.

user497849 · Accepted Answer · 2011-11-29 08:12:18Z

You didn't understand how getElementById works:

<html> <head> <script type="text/javascript"> function onButtonClick() {{ document.getElementById( "main" ).innerHTML = "html of div main has changed!"; }; </script> </head> <body> <div id="main">This is the initial text</div> <button onclick="onButtonClick();">Click me</button> </body> </html>

save the above code as "test.html", load it in a browser, click button, see effect.

<div id="main"> <= id="main" means that you give an identifier to the "div" element, when you call "document.getElementById", you need to pass the value of "id", in this case "main".

Collectives™ on Stack Overflow

JavaScript getElementById not Working

4 Answers 4

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Related