user2919631 user2919631 -4 years ago 123
CSS Question

JavaScript html editing error

I am fairly new to JS, just writing some scripts to learn. Could someone show me where I'm going wrong here? I think it may just be a syntax error somewhere or that I haven't used the correct features for this task.

Thanks :)

HTML:

<!DOCTYPE html>
<html>
<head>
<title>javascript &#8226; training</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<div id='textOff'>
Hi there this is some sample text for my JS
</div>
<input type='submit' value='show me some stuff!' onclick='show();'/>
<script>
function show() {
var text = document.getElementByID('textOff');
console.log(text); //debugging
text.id = 'mainText';
};
</script>
</body>

</html>


CSS:

body {
background-color: #17161F;
color: white;
}

#mainText {
width: 20%;
height: 30%;
font-family: Arial;
margin-left: 20%;
margin-top: 20%;
}

#textOff {
display: none;
}

Answer Source

JavaScript is case sensitive.

 getElementById // correct
 getElementByID // incorrect

Use the JavaScript console provided by your browser:

TypeError: Object #<HTMLDocument> has no method 'getElementByID'

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download