Trying to get the result of javascript function using innerHTML

Question

I have a simple program that takes in an input and then should show that input multiplied up to 100. I am new to this, but have tried to get it to work before posting here. I have the link to the program that I am referring to.

I want the result to be shown, but I cannot figure out why it is not showing.

You can see what I have below. I think I do not have the html and javascript hooked up properly.

Here is my html:

<body>
  <input type="number" id="NumToBMultiplied" class="value" placeholder="Enter an integer" />
  <input type='submit' id='RunProg' class='button' />
  <p> id='result'</p>
</body>

Here is my Javascript:

h = document.getElementByID('NumToBMultiplied');
var result = document.getElementbyID('RunProg').addEventListener('click', function () {
    for (i = 0; i < 100; i++)
        return i * h;
    }
});
document.getElementByID('result').innerHTML = result;

http://jsbin.com/wayejequxu/1/edit?html,js,output

Any help is appreciated!

You should add the code to the question instead of just a link. — Pedro Lobito
– Pedro Lobito, Commented Apr 19, 2015 at 18:34
getElementByID is incorrect, use: getElementById lower case d instead — Pedro Lobito
– Pedro Lobito, Commented Apr 19, 2015 at 18:43
I'm sorry but I'm a bit confused with your question, what's the desired output ? do you really want to multiply h x i 100 times ? — Pedro Lobito
– Pedro Lobito, Commented Apr 19, 2015 at 18:59
Well, the number (100) is arbitrary. I am working through a few code challenges trying to learn Javascript. I just picked 100, but I realize 5 would work as well. — Callie
– Callie, Commented Apr 19, 2015 at 19:23

codyogden · Accepted Answer · 2015-04-19 19:26:37Z

2

From how I understand your code, you are wanting to multiply the input 100 times, then output that into a HTML tag. The result in your example is not being added to the result paragraph as it isn't in the loop.

HTML

This is changed only slightly. Notice the onClick="solve()" to the button instead of adding an event listener.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<input type="number" id="NumToBMultiplied" class="value" placeholder="Enter an integer"/>
    <input type="submit" id="RunProg" onClick="solve()" class="button"/>
    <p id="result">&nbsp;</p>
</body>
</html>

Javascript

I've added a line break after each result of the for loop so the result is easier to read. And the output is cleared before a new solve() is run.

var output = document.getElementById("result");

function solve() {

  var input = document.getElementById("NumToBMultiplied").value;

  output.innerHTML = "";

  for(i=0; i < 100; i++) {

    output.innerHTML += i * input + "<br/>";

  }

}

Result here: http://jsbin.com/foduyofewi/1/

edited Apr 19, 2015 at 19:26

answered Apr 19, 2015 at 18:52

codyogden

7491 gold badge8 silver badges17 bronze badges

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

1 Comment

Callie Over a year ago

Yes! This is what I was trying to do. Now that I see a working solution maybe I can get one to work with an event listener. Thanks, I appreciate your help!

jcubic · Accepted Answer · 2015-04-19 18:39:45Z

1

You need to store your result in variable inside a callback and set innerHTML also in callback:

document.getElementById('RunProg').addEventListener("click", function() {
    var result = 1;
    var input = +h.value;
    for (var i = 1; i < 100; i++) {
        result *= i * input;
    }
    document.getElementById("result").innerHTML = result;
});

DEMO

answered Apr 19, 2015 at 18:39

jcubic

67.1k58 gold badges252 silver badges466 bronze badges

2 Comments

Pedro Lobito Over a year ago

I cannot run your code successfully, I get: ReferenceError: h is not defined, you may have to initialize var h

Callie Over a year ago

When I run your solution it gives one answer. I was wanting it to show a list. For example if you put 1 in, then you would get 1x1, 1x2, etc. To me it seems like a for loop should do that. Am I missing something? I think a while loop would work, but should it also work with a for loop?

odedta · Accepted Answer · 2015-04-19 19:00:01Z

0

Pure Javascript version:

function multiply(x) {
	var result = document.getElementById('result');
    result.innerHTML = x.value * 100;
}

<input type="number" id="NumToBMultiplied" class="value" onchange="multiply(this)" placeholder="Enter an integer"/>
<p id="result"></p>

This is the jQuery version:

$(document).ready(function() {
    $('#NumToBMultiplied').on('change',function(){
      $('#result').text($(this).val()*100);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="NumToBMultiplied" class="value" placeholder="Enter an integer"/>
<p id="result"></p>

edited Apr 19, 2015 at 19:00

answered Apr 19, 2015 at 18:45

odedta

2,4785 gold badges26 silver badges57 bronze badges

6 Comments

Pedro Lobito Over a year ago

Is jQuery being used ?

Pedro Lobito Over a year ago

You may be talking about a different question, not this one.

odedta Over a year ago

Callie asked this: I have a simple program that takes in an input and then should show that input multiplied up to 100. I gave him/her a proper solution.

Callie Over a year ago

I am actually trying to avoid jQuery. I am trying to really learn Javascript so I wanted to try and use something without jQuery.

odedta Over a year ago

Coming in a moment :)

|

dwightreid · Accepted Answer · 2015-04-19 19:15:19Z

Just some modification to your code to remove some of the typos and errors. I'm not sure you can return the result like how you have done it, a more traditional approach is shown below.

Full code

<!DOCTYPE html>
<html>
<head>
</head>
<body>
 <input type="number" id="NumToBMultiplied" class="value" placeholder="Enter an integer" />
  <input type='submit' id='RunProg' class='button' />
  <p id='result'> </p>
</body>

<script>
h = document.getElementById('NumToBMultiplied').value;
document.getElementById('RunProg').addEventListener('click', function () {
    for (i = 0; i < 100; i++){
        var  result = h*i;
        }
    document.getElementById('result').innerHTML = result;
});


</script>

</html>

Collectives™ on Stack Overflow

Trying to get the result of javascript function using innerHTML

4 Answers 4

HTML

Javascript

1 Comment

2 Comments

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

HTML

Javascript

1 Comment

2 Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related