Question

我正在尝试设置非常基本网页，该网页基本上记录了我已完成的各种编码挑战。

我目前正在尝试从JavaScript中获取值并将其放入HTML中的输入框中。我理解innerHTML和getElementById的用法（我之前已经使用过它们将值输入到文本框中）但这次似乎我错过了一些东西。我似乎无法获得＆＃34; sum＆＃34;的新价值。在文本框中显示。

我在做什么是不正确的？是＆＃34; sum＆＃34;的值迷失在for / if语句中？如果这太简单，我道歉。我找不到任何可以使这项工作的东西。

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

Answer 1

input是单个标记元素，它不能具有内部HTML。请改为设置value属性。它也是document.getElementById，而不只是getElementById。

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

您还应该将脚本放在元素下面或将其附加到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>

Answer 2

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

Answer 3

您需要在文档对象上调用getElementById。另外，您想要设置输入属性，而不是innerHTML。

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

请参阅example

Answer 4

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;

原因是您使用innerHTML属性而不是value属性。与其他DOM元素不同，输入没有innerHTML属性，因为它是单个标记元素。此外，您还有语法错误：document.getElementById不仅仅是getElementById。

这是一个有效的fiddle

Answer 5

我可以发誓它的文件.getElementById不只是getElementById

另外，尝试将JavaScript放在最底层。您正在尝试操作页面上尚未呈现的元素。

JavaScript值不会通过getElementById方法插入到HTML输入框中

5 个答案: