Question

这是我的代码，我目前正在尝试使用document.getElementById来创建列表，但它只输出我的变量v的最后一个值。我是编程的新手，所以我不知道怎么去使它以正确的方式显示奇数列表。

<!DOCTYPE HTML>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Sum of odd numbers between one and the input</title>
<script type="text/javascript">
/* Defining Table
 * Input: User inputs a number (n)
 * Processing: add all the odd intergers between 1 and the input (n)
 * Output: The sum
 */
function oddSum() {
var number = document.getElementById("input").value;
var n = parseFloat (number);
var sum = 0;


for (v = 1; v <= n ; v +=2){

document.getElementById("v").innerHTML = v;

sum += v;

}

document.getElementById("outputDiv").innerHTML = sum;
}
</script>
</head>

<body>                             
Input a number <input type="text" id="input">    
<button type="button" onclick="oddSum()">Sum of odd</button>
<br> <br> 
Here are the odd numbers. <div id="v"></div>
<br> Here is the sum of the odd numbers. <div id="outputDiv"></div>


</body>       
</html>

Answer 1

innerHTML替换元素的内部html，它不会将新内容添加到您已有的内容中。

也许试试

document.getElementById("v").innerHTML += v;

同时检查：https://jsperf.com/innerhtml-vs-append：）

Answer 2

不完全相同，但我在JS小提琴中做了这个来演示逻辑。 https://jsfiddle.net/mtg7g3oz/您想从计数中排除数字1，对吧？只需将提示替换为输入元素，将提醒替换为输出div innerhtml

var input = prompt('please enter a number.');
var total = 0;
for(var i=1;i<input;i+=2){
    total += i;
}
alert(total-1);

Answer 3

要回答为什么只获得最后一个元素的问题，innerHTML方法会将您要定位的元素清除，然后将其内容替换为您通过变量分配的内容。所以最后你所拥有的就是最后一个元素。

innerHTML

我相信你正在尝试构建一个DOM元素。要做到这一点，你必须使用另一种方法。

如何在循环内输出变量列表？

3 个答案: