When I execute the following code, why does the variable name which is assigned to output only print the first time I use it...not every time I used it?
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script>
window.onload = function(){
var name = prompt("What's your name?");
var lengthOfName = name.length
document.getElementById('output').innerHTML = name;
};
</script>
</body>
</head>
<body>
<h1>My First Heading</h1> <p id="output" </p>
<p>My first paragraph.</p> <p id="output" </p>
<p>My second paragraph.</p>
<p id="output" </p>
</body>
</html>
when i run it...this is the what it looks like
My First Heading dodo bird
My first paragraph.
My second paragraph.
I would expect it to look like this
My First Heading dodo bird
My first paragraph. dodo bird
My second paragraph. dodo bird
Instead of document.getElementById use document.querySelectorAll('#elID'), and loop over all the elements, setting their innerhtml.
Although, you should use class instead, as each elements Id in a doc should be unique. So, document.querySelectorAll('.elClass')