如何使用 innerHTML 递增结果

How do I increment results using innerHTML

本文关键字：结果 innerHTML 何使用      更新时间：2023-09-26

我已经设置了代码，只是每次单击进程UserText按钮时都无法获得递增的结果编号，有人可以指出我正确的方向吗？ 

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>
您必须在

函数外部声明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

试试这个。 希望对...

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

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

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

你清除函数内部的num。那么，这是怎么回事呢？ Num正在增加，但当它在函数内部声明时，它会再次设置为 1。所以，你需要在函数之外编写它：

var num=1;
function userHTML(){
}

下面是一个工作示例：

https://jsfiddle.net/5sp846x7/

相关文章：