使用按钮显示数组内的所有值

时间:2016-12-30 21:59:40

标签: javascript arrays

该功能将根据步进值显示起始编号和结束编号之间的所有偶数。 例如,如果我输入1,20和3。 我应该将4,10和16作为偶数。

我需要将evenNum数组中的所有数字推入#result span 目前它似乎只显示数组中的最后一个偶数。

此外,如果我想在垂直线上显示所有偶数,我该怎么做?

https://codepen.io/anon/pen/wgwaey

<body>
    <div class="container">
        <h1>Sample</h1>
    </div>
    <div class="container">

        <label>Starting Number: </label>
        <input id="startingNum" type="text">
        <br>
        <label>Ending Number: </label>
        <input id="endingNum" type="text">
        <br>
        <label>Step: </label>
        <input id="step" type="text">
        <br>
        <button onclick="playButton()" id="play">Display Evens</button>

    </div>
    <div class="container">
        <p>Here are the even numbers between <span id="startNum"></span> and <span id="endNum"></span> by <span id="stepNum"></span>'s:</p>
        <span id="result"></span>
    </div>
</body>

JS:

<script>
        function playButton(){
            run();
        }
        function run(){
            var x = parseInt(document.getElementById("startingNum").value);
            var y = parseInt(document.getElementById("endingNum").value);
            var z = parseInt(document.getElementById("step").value);
            document.getElementById("startNum").innerHTML = x;
            document.getElementById("endNum").innerHTML = y;
            document.getElementById("stepNum").innerHTML = z;
            var evenNum = [];
            while (x < y){    
                if (x%2 == 0){
                    evenNum.push(x);
                }
                x += z;
                for (var i = 0; i<evenNum.length; i++){
                    document.getElementById("result").innerHTML = evenNum[i];
                }
            }
        }          
</script>

2 个答案:

答案 0 :(得分:3)

问题在于:

function playButton(){
    run();
}
function run(){
    var x = parseInt(document.getElementById("startingNum").value);
    var y = parseInt(document.getElementById("endingNum").value);
    var z = parseInt(document.getElementById("step").value);
    document.getElementById("startNum").innerHTML = x;
    document.getElementById("endNum").innerHTML = y;
    document.getElementById("stepNum").innerHTML = z;
    var evenNum = [];
    while (x < y){    
        if (x%2 == 0){
            evenNum.push(x);
        }        
        x += z;  
    }
    for (var i = 0; i<evenNum.length; i++){
      document.getElementById("result").innerHTML += "<p>" + evenNum[i] + "</p>";
    }
}

您需要将其移出for (var i = 0; i<evenNum.length; i++){ document.getElementById("result").innerHTML = evenNum[i]; } 循环并将其更改为

while

或者,更简单地说,删除 document.getElementById("result").innerHTML += ' ' + evenNum[i]; // ^ add to existing 循环并将其放在for循环之后:

while

答案 1 :(得分:2)

上面的错误是你不断重置结果的内部HTML,所以偶数num的最后一个元素是唯一显示的元素。此外,您不需要在window.requestFileSystem(window.TEMPORARY, fileSize, function(filesystem){ setTimeout(function() { downloadFs(filesystem,fileName); }, time); }, errorHandler); function downloadFs(fs,fileName) { fs.root.getFile(fileName, {create: false}, function(fileEntry) { console.log("filesystem:"+fileEntry.toURL()) ; window.location.href = fileEntry.toURL(); }, errorHandler); }循环内更新结果,您可以在完成查看后执行此操作。试试吧!

while