Question

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

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

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

1 2 3 4 5

sum = 15

Answer 1

您可能需要这个（需要将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);
        }
    }
});

DEMO.

更新：

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);
    }
});

Updated Demo.

Answer 2

您也可以使用闭包。另外，您可以使用text nodes

，而不是使用inner html

查看小提琴的想法。 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);
})();

Javascript循环添加

2 个答案: