JavaScript value won't insert into HTML input box with getElementById method

Question

I am attempting to set up a very basic webpage which essentially documents various coding challenges I have completed.

I am currently attempting to take a value out of JavaScript and place it into an input box in HTML. I understand the usage of innerHTML and getElementById (and I have used both of them before to input a value into a text box) but it seems that I am missing something this time around. I can't seem to get the new value of "sum" to show in the text box.

What am I doing that is incorrect? Is the value of "sum" getting lost in the for / if statement? I apologize if this is overly simple. I cannot find anything that makes this work.

    <!DOCTYPE html>
<html>
<head>
</head>

<body>

<script>

    var sum = 0;

    for (i = 0; i < 1000; i++) {
        if (i % 3 === 0 || i % 5 === 0) {
            sum = sum += i;
            }    
        }   

    var totalSum = sum;
    getElementById("answer1").innerHTML = totalSum;


</script>

<h1>Challenge 1</h2>
<p>Find the sum of all the multiples of 3 or 5 below 1000 (begin with 10, then work up).</p>
<p>Answer is 
    <input type="text" id="answer1"></input>
</p>

</body>
</html>

You are trying to write to an element before it is rendered to the page. — epascarello
– epascarello, Commented May 21, 2015 at 22:14

Daniel Imms · Accepted Answer · 2015-05-22 00:52:26Z

2

input is a single tag element, it cannot have inner HTML. Set the value property instead. Also it's document.getElementById, not just getElementById.

document.getElementById("answer1").value = totalSum;

You should also either put the script below the element or attach it to the window.onload.

<script>
window.addEventListener('load', function () {
    var sum = 0;
    for (i = 0; i < 1000; i++) {
        if (i % 3 === 0 || i % 5 === 0) {
            sum = sum += i;
            }    
        }   

    var totalSum = sum;
    document.getElementById("answer1").value = totalSum;
});
</script>

edited May 22, 2015 at 0:52

answered May 21, 2015 at 22:14

Daniel Imms

50.6k19 gold badges157 silver badges170 bronze badges

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

Comments

Ritesh Karwa · Accepted Answer · 2015-05-21 22:18:47Z

<!DOCTYPE HTML>
<html>
<head>
<title> Untitled </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style type="text/css">

textarea {
  overflow: auto;
}
</style>

</head>
<body>
 <h1>Challenge 1</h2>
 <p>Find the sum of all the multiples of 3 or 5 below 1000 (begin with 10, then work up).</p>
 <p>Answer is 
     <input type="text" id="answer1"></input>
 </p>

<script type="text/javascript">
   $(document).ready(function(){
     var sum = 0;

         for (i = 0; i < 1000; i++) {
             if (i % 3 === 0 || i % 5 === 0) {
                 sum = sum += i;
                 }    
             }   
             console.log(sum);
         var totalSum = sum;
         console.log(totalSum);
         document.getElementById("answer1").value = sum;
});

</script>

</body>
</html>

Derek Greer · Accepted Answer · 2015-05-21 22:19:29Z

0

You need to call the getElementById on the document object. Additionally, you are wanting to set the input property, not the innerHTML.

    document.getElementById("answer1").value = totalSum;

See example

answered May 21, 2015 at 22:19

Derek Greer

16.4k5 gold badges50 silver badges58 bronze badges

Comments

Mark Eriksson · Accepted Answer · 2015-05-21 22:20:58Z

0

I could swear it's document.getElementById not just getElementById

Also, try putting your JavaScript at the bottom. You're trying to manipulate an element on the page that hasn't yet been rendered.

answered May 21, 2015 at 22:20

Mark Eriksson

1,47510 silver badges19 bronze badges

1 Comment

Brandon Lee Over a year ago

I recently had an instructor who swore that it could be either or. He frequently used examples that only included "getElementById" and NOT "docuement.getElementById." I will use the document.getElementById going forward to eliminate this misshap.

Sid Shukla · Accepted Answer · 2015-05-22 08:18:41Z

0

var sum = 0;

for (i = 0; i < 1000; i++) {
    if (i % 3 === 0 || i % 5 === 0) {
        sum = sum += i;
    }    
}   

var totalSum = sum;
document.getElementById("answer1").value = totalSum;

The reason is because you are using the innerHTML property instead of the value property. Input does not have the innerHTML property unlike other DOM elements because it's a single tag element. Also, you have a syntax error : it's document.getElementById not just getElementById.

Here's a working fiddle

edited May 22, 2015 at 8:18

answered May 21, 2015 at 22:20

Sid Shukla

1,0511 gold badge10 silver badges34 bronze badges

Collectives™ on Stack Overflow

JavaScript value won't insert into HTML input box with getElementById method

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related