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>

Answer 4

Pure Javascript版本：

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>

这是jQuery版本：

$(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>

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

4 个答案:

HTML

的Javascript