Question

我试图制作一个小程序来获取3个用户输入，然后从中循环。例如，用户说他想从数字5开始到数字25并按5计数，所以程序将执行：＆＃34; 5 10 15 ...＆＃34;

但我似乎失败了，我无法找到我做错的事。

HTML / JS

    <!DOCTYPE HTML>
<html>

<head>
    <title>Counter</title>
    <link rel="Stylesheet" type="text/css" href="style.css" />
</head>

<body>
    <h1>The Counter</h1>
    <form>
        <fieldset>
            <label for="firstNum"> Start from </label>
            <input type = "text" id = "firstNum"> </input>
            <label for="lastNum"> Up to </label>
            <input type="text" id="lastNum"> </input>
            <label for="countBy"> Count By </label>
            <input type= "text" id="countBy"> </input> </br>

            <button onclick = "startCount()" type = "button"> Start the Counter! </button>
        </fieldset>
    </form>
    <p id="loopHere"></p>
    <script>

    function startCount() {
    var firstNum = document.getElementById("firstNum");
    var lastNum = document.getElementById("lastNum");
    var countBy = document.getElementById("countBy");//finish getElements

    var a = firstNum.value;
    var b = lastNum.value;
    var c = countBy.value;//finish getting values

    for(i = a; i <= b; i += c) {
        document.write(i + "</br>");
    }//finish loop

    }//finish function startCount()

    </script>
</body>

</html>

CSS

  fieldset {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}
input {
    width: 20%;
    color: red;
}
h1 {
    text-align: center;
}
button {
    margin-left: auto;
    margin-right: auto;
}

感谢。

Answer 1

DOM中的

value属性返回String值，而不是Int。所以你需要将它们转换为整数：

var a = parseInt( firstNum.value, 10 );
var b = parseInt( lastNum.value, 10 );
var c = parseInt( countBy.value, 10 ); //finish getting values

Answer 2

您的string值可以投放到int。 for循环检查数学条件：

var a = 1 * firstNum.value;
var b = 1 * lastNum.value;
var c = 1 * countBy.value;

Answer 3

你检查了＆＃34; a，b，c＆＃34; var type？

尝试使用以下代码：

for(i = eval(a); i <= eval(b); i += eval(c))

编辑：见评论

在这种情况下，parseInt会更好，但是如果他尝试使用其他东西而不是数字会有问题，这就是为什么，因为它似乎是为了探索目的，我选择指向eval =）

除了数字ex：（1 + 1），（customVar * 2）....

用户输入问题循环？

HTML / JS

CSS

3 个答案: