尝试使用innerHTML获取javascript函数的结果

Question

我有一个简单的程序，接受一个输入，然后应该显示输入乘以100。我对此很陌生，但在这里发布之前，我已经试着让它开始工作了。我有我所指的程序的链接。

我想把结果显示出来，但我不明白为什么没有显示出来。

你可以看到我下面有什么。我认为我没有正确地连接html和javascript。

这是我的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>    

这是我的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

任何帮助都是非常感谢的！

Answer 1

根据我对您代码的理解，您希望将输入乘以100次，然后将其输出到HTML标记中。示例中的结果不会添加到result段落中，因为它不在循环中。

HTML

这种情况只略有改变。请注意按钮中的onClick="solve()"，而不是添加事件侦听器。

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

我在for循环的每个结果之后都添加了一个中断行，这样结果就更容易阅读了。并在运行新的solve()之前清除输出。

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/>";

  }

}

结果：http://jsbin.com/foduyofewi/1/

Answer 2

您需要将结果存储在回调中的变量中，并在回调中设置innerHTML：

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

Answer 3

只需对代码进行一些修改，以删除一些排版和错误。我不确定您是否能够像如何返回结果一样，下面显示了一种更传统的方法。

全码

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