CODEWITHSUNDEEP
javascripthtml
Brandon Lee
Brandon Lee

Reputation: 1

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

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>

Upvotes: 0

Views: 2604

Answers (5)

Sid Shukla
Sid Shukla

Reputation: 1030

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

Upvotes: 0

Daniel Imms
Daniel Imms

Reputation: 50149

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>

Upvotes: 2

Mark Eriksson
Mark Eriksson

Reputation: 1475

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.

Upvotes: 0

Derek Greer
Derek Greer

Reputation: 16262

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

Upvotes: 0

Ritesh Karwa
Ritesh Karwa

Reputation: 2254

<!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>

Upvotes: 0

Related Questions