Question

我有我的代码设置，我只是无法在每次点击processUserText按钮时增加结果编号，有人能指出我正确的方向吗？

function userHTML() {
    var uput = document.getElementById('uput').value;
    var num=1; 
    num = num ++;
    var html = num +  '.' + uput + '<br>' ;  
    //document.getElementById('result').innerHTML = html;
    document.getElementById("results").innerHTML += html;
} 
document.getElementById("processUserText").onclick = function() {

}
document.getElementById("reset").onclick = function(){  
    document.getElementById("results").innerHTML = "";
}
document.getElementById('processUserText').addEventListener("click", userHTML);

HTML：

<input name="uput" id="uput" type="text" size="50" placeholder="Enter your input!"/>
<input type="button" value="processUserText" id="processUserText">
<input type="button" value="Reset" id="reset">
<div id="results"></div>

Answer 1

您必须在函数之外声明num变量。如果在函数内部声明它，则在函数调用之间不保留其值。

而不是

function userHTML() {
    var num = 1;
    num++;
    // get user input and show new value
}

做这样的事情

var num = 1;
function userHTML() {
    // get user input and show new value
    num++;
}

此外，行num = num++;实际上并未增加num。您需要做的只是num++。其原因是num++（称为后增量）和++num前增量之间的微妙差异。此代码说明了不同之处：

var a = 1;
console.log(a++); // 1
console.log(a); // 2

var b = 1;
console.log(++b); // 2
console.log(b); // 2

Answer 2

将var num=1;移到userHTML()函数之外（否则每次调用时都会将其设置为1）。

并将num = num ++;更改为num++;，因为第一个因为++运算符的优先级而只分配num = num。

Answer 3

试试这个。希望它有所帮助...

    <!DOCTYPE html>
    <html>
    <head>
        <title>Index Page</title>
    </head>
    <body>
        <form>
            <input name="uput" id="uput" type="text" size="50" placeholder="Enter your input!"/>
            <input type="button" value="processUserText" id="processUserText">
            <input type="button" value="Reset" id="reset">
        </form>
        <div id="results"></div>

        <script type="text/javascript">
            var i = 0;
            function userHTML() {
                var uput = document.getElementById('uput').value;
                var num = i;
                var html = num +  '. ' + uput + '<br>' ;  
                document.getElementById("results").innerHTML += html;
            } 
            document.getElementById("processUserText").onclick = function() {
                i++;
                userHTML();
            }
            document.getElementById("reset").onclick = function() {
                i = 0;
                document.getElementById("results").innerHTML = "";
            }
        </script>
    </body>
    </html>

Answer 4

你在函数内部发现num。那么，这会发生什么？ Num正在增加但是因为它在函数内部声明它再次设置为1.所以，你需要在函数之外写它：

var num=1;
function userHTML(){
}

这是一个有效的例子：

https://jsfiddle.net/5sp846x7/

如何使用innerHTML增加结果

4 个答案: