onclick函式不執行-有解無憂

我試圖通過每次單擊提交按鈕時將參與者的數量增加一來更新參與者的數量，并且通過這樣做，我在我的腳本標簽中添加了一個 add() 并在每次單擊它時增加了參與者的數量。但是由于某種原因，參與者的數量沒有改變。

順便說一句，我是 DOM 和 JS 的新手

let Agenda_style = document.querySelector('.agenda'); //to add style  you must acess the class name/ID using querySelector
Agenda_style.style.color = "red "; // set color to red to change the color of the class agenda
let NewElement = document.createElement("li "); //create new element of type <li>
NewElement.innerText = "Here "; // add a text inside the <li> element 
Agenda_style.append(NewElement); // append a tet to the agendaa class

let participant = 0;

function add() {
  participant  ;
  document.getElementById("submit").innerText = participant;
};

<h5>Number of participant:<span id="submit">0</span></h5>
<button type="button" onclick="add()">Submit</button>
</div>

uj5u.com熱心網友回復：

它對我來說失敗了，因為我現在有.agenda元素..你的 HTML 中有那個嗎？

如果我在腳本的那部分進行空檢查，剩下的部分就可以了。

<h5>Number of participants: <span id="submit">0</span></h5>
    <button type="button" onclick="add()">Submit</button>
</div>
<script>
    let Agenda_style = document.querySelector('.agenda'); // to add style you must access the class name/ID using querySelector

    if(Agenda_style != null) { // only proceed if Agenda_style exists
        Agenda_style.style.color = "red "; // set color to red to change the color of the class agenda
        let NewElement = document.createElement("li "); // create new element of type <li>
        NewElement.innerText = "Here "; // add a text inside the <li> element 
        Agenda_style.append(NewElement); // append a tet to the agendaa class
    }

    let participant = 0;

    function add() {
        participant  ;
        document.getElementById("submit").innerText = participant;
    }
</script>

uj5u.com熱心網友回復：

這些天我們傾向于不使用行內 JavaScript，所以最好用抓住你的按鈕querySelector，然后addEventListener在點擊時使用它來呼叫你的函式。這樣，您的標記、CSS 和代碼之間就有了“關注點分離”。

const number = document.querySelector('#number');
const button = document.querySelector('button');

button.addEventListener('click', add, false);

let participant = 0;

function add() {
  number.textContent =   participant;
}

<h5>Number of participant:
  <span id="number">0</span>
</h5>

<button type="button">Submit</button>

uj5u.com熱心網友回復：

這應該作業

function add() {
  let val = document.querySelector('#submit').innerText;
  val = parseInt(val) 1;
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/440308.html

標籤：javascript html dom

上一篇：如何使用Bootstrap獲得此列布局？

下一篇：我在將段落標題居中時遇到問題