当按钮被按下时，如何改变HTML文件上的字段

How to change field on HTML file when button is pressed

本文关键字：改变 HTML 文件 字段 何改变 按钮      更新时间：2023-09-26

当我按下按钮时如何更改HTML本身?在这种情况下，当我按下按钮时，值被存储为"displayCount"。有没有一种方法可以让我直接看到HTML代码上的计数?如果按一次，我可以在HTML上看到数字1，而不是一个变量。

谢谢!

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title> </title>
    </head>
    <body>
        <input type="button" value="Count" id="countButton" />
        <p>The button was pressed <span id="displayCount">0</span> times.</p>
        <script type="text/javascript">
            var count = 0;
            var button = document.getElementById("countButton");
            var display = document.getElementById("displayCount");
            button.onclick = function() {
                count++;
                display.innerHTML = count;
            }
        </script>
    </body>
</html>

例如，如果button被按了一次，其中一行将从

   <p>The button was pressed <span id="displayCount">1</span> times.</p>

This Fiddle works as you want.

我把你的脚本改成:

 var count = 0;
function countIt(){
  var button = document.getElementById("countButton");
  var display = document.getElementById("displayCount");
    count++;
    display.innerHTML = count;
  }

和你的HTML到:

  <input type="button" onclick="countIt()" value="Count" id="countButton" />
<p>The button was pressed <span id="displayCount">0</span> times.</p>

希望这对你有帮助

<script type="text/javascript">
var clicks = 0;
function onClick() {
    clicks += 1;
    document.getElementById("clicks").innerHTML = clicks;
};
</script>
<button type="button" onClick="onClick()">Count</button>
<p>The button was pressed : <a id="clicks">0</a></p>

这是我对你的问题的建议。

我删除了你使用的变量count，只使用你的HTML上的数字，它工作得很好。

var button = document.getElementById("countButton");
var display = document.getElementById("displayCount");
button.onclick = function(){
    display.innerHTML = ++display.innerHTML;
}

谢谢,爱迪生

我猜你可能想使用parseInt()显式地增加count作为一个整数，像这样:

var count = parseInt(display.textContent,10);

你的代码可以这样写:

var button = document.getElementById("countButton");
var display = document.getElementById("displayCount");
var count = parseInt(display.textContent,10);
button.onclick = function(){
    count++;
    display.innerHTML = count;
}
DEMO: http://jsfiddle.net/naokiota/9dQjv/2/

parseInt()的文件在这里:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt 

    <script>
    var count = 0;
    function counts()
    {
    var result = document.getElementById('txtbxid');
    count ++ ;
    result.value = count;
    }
    </script>
     <input type="text"  id="txtbxid" name="txtbxid">
    <input type="button"  id="add" name="add" value="add" onClick="counts()">
相关文章：