javascript code is not working

Question

This code is not working:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script>
document.getElementByID("button").addEventListener('click', outInfo, false);
function outInfo () {
var user =  document.getElementById("userName").value;
alert(user);
}
</script>
</head>
<body>
<p>User Name:
<input id="userName" type="text"/>
<input id="button" type="button" value="Click Me" />
</p>
</body>
</html>

This code is working:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script>
<script>
function output() {
var i = document.getElementById("input");
window.alert(i.value);
}
</script>
</head>
<body>
<p>User Name:
<input type="text" name="username" id="input" size="30"/>
<input type="button" id="button" value="Start" onclick="output()" />
</p>
</body>
</html>

What's wrong with the first one? I suppose the problem is with a function "outInfo". Which way is the best to solve such problems?

Elements don't exist yet. Add script before closing body tag. — elclanrs
– elclanrs, Commented Dec 12, 2013 at 22:48
Please make the title more descriptive. "Code is not working" is very vague. — kviiri
– kviiri, Commented Dec 12, 2013 at 22:48
Possible example... stackoverflow.com/questions/15255801/… — Evan Carslake
– Evan Carslake, Commented Dec 12, 2013 at 22:50

dthree · Accepted Answer · 2013-12-12 23:26:54Z

1

You are trying to run the javascript referring to an element before the document fully loads.

Do this:

HTML

<body onload='onLoad()'></body>

JS

function onLoad() {

  // ... Now manipulate my DOM
  document.getElementById("button").addEventListener('click', outInfo, false);

}

edited Dec 12, 2013 at 23:26

answered Dec 12, 2013 at 22:48

dthree

20.9k14 gold badges81 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dthree Over a year ago

Great! Consider accepting my answer if this did cause it to work out.

Guffa · Accepted Answer · 2013-12-12 22:50:57Z

The element doesn't exist yet, when you try to bind the event to it.

You have to run the code after the element has been created, either by putting the code somewhere after the element:

<input type="button" id="button" value="Start" onclick="output()" />
<script>
document.getElementById("button").addEventListener('click', outInfo, false);
</script>

Or by using the load event that happens after the page is completely loaded:

document.onload = function(){
  document.getElementById("button").addEventListener('click', outInfo, false);
};

Note also that it's getElementById, not getElementByID.

very helpful answer - "Or by using the load event that happens after the page is completely loaded:"

Collectives™ on Stack Overflow

javascript code is not working

2 Answers 2

HTML

JS

1 Comment

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

HTML

JS

1 Comment

1 Comment

Linked

Related