所以，我正在嘗試構建一個計算器，我想做的第一件事就是在我的輸出中顯示所有按鈕。我創建了一個名為 displayButtons 的函式，在里面，我通過 id 獲得了前 2 個按鈕，但是，當我嘗試顯示它們時，只顯示數字 2。解決此問題的一種方法是為每個數字創建一個函式，然后它會起作用，但這不是我想要的。我也嘗試過將每個數字的函式嵌套在一個函式中，但我無法在點擊時正確呼叫它。有任何想法嗎？提前致謝！
HTML 代碼：
<div id="output"></div>
<div class="numbers">
<button value="1" id="one" onclick="displayButtons()">1</button>
<button value="2" id="two" onclick="displayButtons()">2</button>
JS代碼：
function displayButtons() {
var one = document.getElementById("one").value;
document.getElementById("output").innerHTML = one;
var two = document.getElementById("two").value;
document.getElementById("output").innerHTML = two
}
uj5u.com熱心網友回復：
你試過for回圈嗎？您可以使用閉包或“let”關鍵字或單獨的函式添加單擊功能。在 codepen 中運行以下命令，看看它是如何作業的，以及這是否有用。
function createButtons() {
//let is block scoped, not function scoped
for (let i = 1; i <= 5; i ) {
var body = document.getElementsByTagName("BODY")[0];
var button = document.createElement("BUTTON");
button.innerHTML = 'Button ' i;
button.onclick = function() {
alert('This is button ' i);
}
body.appendChild(button);
}
}
createButtons();
uj5u.com熱心網友回復：
要在點擊數字時顯示輸出，您可以像這樣在函式內部傳入一個this物件
<button value="1" id="one" onclick="displayButtons(this)">1</button>
當您單擊它時，您將收到函式內的按鈕節點完整代碼將是
<div class="numbers">
<button value="1" id="one" onclick="displayButtons(this)">1</button>
<button value="2" id="two" onclick="displayButtons(this)">2</button>
</div>
<script>
function displayButtons(button) {
document.getElementById("output").innerHTML = button.value
}
</script>
uj5u.com熱心網友回復：
你不斷覆寫innerHTML, 這就是為什么你只看到 2。
我建議你改變你的方法。你所有的按鈕都在div.numbers. 將單擊事件偵聽器添加到數字 div。如果按下任何按鈕，此事件偵聽器將觸發，因為單擊事件會冒泡。這稱為事件委托。
在 click 事件處理程式中，您可以查看單擊了哪個按鈕并將value單擊的按鈕添加到div#output.
const output = document.querySelector('#output');
const numbers = document.querySelector('.numbers');
numbers.addEventListener('click', event => {
const button = event.target;
output.textContent = button.value;
});<div id="output"></div>
<div class="numbers">
<button value="1">1</button>
<button value="2">2</button>
<button value="3">3</button>
<button value="4">4</button>
<button value="5">5</button>
</div>uj5u.com熱心網友回復：
您必須在 onclick 引數中獲取每個按鈕的 id，例如： onclick= displayButtons(id) 它會為每個按鈕創建不同的點擊事件
function displayButton(id){
let oldValue = document.getElementById("output").innerHtml
document.getElementById("output").innerHTML = oldValue id;}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/476810.html
標籤：javascript 功能 按钮