Javascript循环添加

Javascript loop addition

本文关键字：添加 循环 Javascript      更新时间：2023-09-26

大家好。 我只是想问点什么。 我需要在输入数字后添加变量。我真的不知道该怎么做。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>

<input type="number" id="userNumber">
<input type="button" id="doFunction" value="Submit Number">
<script>
var number=document.getElementById('userNumber');
var button=document.getElementById('doFunction');
var textNumber;

button.onclick=function(){
for(var i=0; i < number.value; i++){
    textNumber=document.createTextNode(i+1);
    document.body.appendChild(textNumber);
}
}
</script>
</body>
</html>

我希望输出应该是（我输入 5 ）

12345

总和 = 15

您也可以使用闭包。另外，您可以使用inner html ，而不是使用 text nodes

看看小提琴的想法。 http://jsfiddle.net/FU3P6/

(function() {
    var oIn = document.getElementById('in');
    var oGo = document.getElementById('do');
    var oRs = document.getElementById('rs');
    oGo.addEventListener('click', function() {
        var nCount = 0, nSum = 0;
        var oCount, oSum;
        while(nCount < oIn.value) {
            nCount += 1;
            oCount = document.createTextNode(nCount + " ");
            oRs.appendChild(oCount);
            nSum += nCount;
        }
        oSum = document.createTextNode('Sum: ' + nSum);
        oRs.appendChild(oSum);
    }, false);
})();

你可能想要这个（需要将onclick事件处理程序放在load事件中）

window.addEventListener('load', function(){
    var number=document.getElementById('userNumber');
    var button=document.getElementById('doFunction');
    button.onclick=function(){
        for(var i=0; i < number.value; i++){
            var textNumber = document.createTextNode(i+1);
            document.body.appendChild(textNumber);
        }
    }
});

演示。

更新：

window.addEventListener('load', function(){
    var number=document.getElementById('userNumber');
    var button=document.getElementById('doFunction');
    button.onclick=function(){
        var sum = 0;
        for(var i=0; i < number.value; i++){
            var textNumber = document.createTextNode(i+1);
            document.body.appendChild(textNumber);
            sum +=(i+1);
        }
        var textNumber = document.createTextNode(sum);
        var slash = document.createTextNode(' / ');
        document.body.appendChild(slash);
        document.body.appendChild(textNumber);
    }
});

更新了演示。

相关文章：