点击按钮时增加一个数字。

Question

我想编写JavaScript代码，可以在单击按钮时增加数字。你能帮我吗？ 我尝试了这个方法，但它不起作用。

var document.getElementById("par").innerHTML = i;
        function sum(){
            i++;
        }

<p id="par">1</p>
<img onclick="sub()" height="40px" width="40px" src="sub.png">

- Sepehr

---

这个回答解决了你的问题吗？javascript onclick增加数字 - Eduards

我认为提供您代码的更多细节将有助于回答这个问题，比如您在onclick中引用的sub()函数在哪里。也许这就是错误所在，应该是sum()函数？ - bluejambo

Answer 1

const button = document.querySelector("#increaser");
const res = document.querySelector("#result");

button.addEventListener("click", () => {
  res.textContent++
});

<div>
    <p id="result">1</p>
    <button id="increaser">Add</button>
</div>

- B.Ch.

Answer 2

你可以定义一个全局变量来存储值，同时需要保持函数名称不变。

        var i=0;
        function sub(){
            i++;
            document.getElementById("par").innerHTML = i;
        }

<p id="par">1</p>
<img onclick="sub()" height="40px" width="40px" src="sub.png">

- flyingfox

Answer 3

在更新sum函数中的值后，您需要更新innerHTML。

let i = 1;

document.getElementById("par").innerHTML = i;

function sum() {
  i++;
  document.getElementById("par").innerHTML = i;
}

<p id="par">1</p>
<img onclick="sum()" height="40px" width="40px" src="sub.png">

- TechySharnav

Answer 4

首先，您需要获取当前显示在 p 标签中的数字。您可以每次从 DOM 中读取它，也可以在 JavaScript 中跟踪它。 我们还应该获取对您的 p 标签的引用，以备后用。

let i = 1;
let p = document.getElementById("par");

接下来，当您调用 sub 函数时，您正在增加 i，但是您没有将更改后的值应用于 p 标签。您可以像这样做：

function sum() {
  i++;
  p.innerHTML = i;
}

你的HTML可以保持原样。

- Nils Fahle

Answer 5

function sum() {

    var p = document.getElementById("par") ;

    p.innerHTML = parseInt(p.innerHTML) + 1 ;

}

<p id="par">1</p>

<img onclick="sum()" height="40px" width="40px" src="https://img.icons8.com/metro/452/plus.png">

- Ehsan

---

@Sepehr，请查看这个答案！ - Ehsan