根据用户输入

时间:2018-04-01 19:28:53

标签: javascript html

只需按一下按钮就可以按下一个按钮,然后接收用户的输入。然后,它将这些步骤作为列表打印到p标记中。我想知道如何覆盖以前创建的步骤,因为我注意到再次调用该方法会添加到上一个列表的末尾。

我使用列表的主要原因是为了便于阅读,所以除非有更好的方法,否则我不想摆脱它。

//collatz function
function collatz (){
    var step = 0;
    var inputCollatz = prompt("What number do you want to add?")
    if (inputCollatz <= 1){
        document.getElementById("collatz").innerHTML = "No steps required, already less than or equal to 1.";
    }
    else if(isNaN(inputCollatz)){
        document.getElementById("collatz").innerHTML = "Please add a number.";
    }
    else if (inputCollatz.toString().indexOf('.') != -1){
        document.getElementById("collatz").innerHTML = "Whole numbers please!";
    }
    else{
        while(inputCollatz > 1){
            //needed help w/ ternary operators, still need practice with it
            inputCollatz = inputCollatz % 2 ? 3 * inputCollatz + 1 : inputCollatz / 2;
            step++;
            var item = document.createElement("li");
            var text = document.createTextNode(inputCollatz);
            item.appendChild(text);
            var list = document.getElementById("collatz");
            list.appendChild(item);
        }
        document.getElementById("steps").innerHTML = "Number of steps: " + step.toString();
    }
}

这是html中的按钮。

    <button onclick="collatz()">Find the number of steps.</button><br/>
        <br/>
        <div id="collatz"></div>
        <br/>
        <div id="steps"></div>

1 个答案:

答案 0 :(得分:0)

我被建议在每个循环之前清除collatz div,这有效。

...
else {
    document.getElementById("collatz").innerHTML = '';
    while(inputCollatz > 1) {
    ....