如何通過一個按鈕重置所有按鈕的值

Question

我無法弄清楚如何通過一個重置按鈕將所有按鈕的值重置爲默認值，任何人都可以幫忙嗎？

JS

var button1 = 0; 
var button1 = 0; 

function onClick1() { 
    button1 += 1; 
    document.getElementById("button1").innerHTML = button1; 
    }; 

function onClick2() { 
    button2 += 1; 
    document.getElementById("button2").innerHTML = button2; 
}; 

HTML

<button type="button" onClick="onClick1()">Click</button> 
<p><a id="button1">0</a></p> 
<button type="button" onClick="onClick2()">Click</button> 
<p><a id="button2">0</a></p> 

Answer 1

這應該工作：

JS：

function onClickReset() { 
    button1 
    document.getElementById("button1").innerHTML = button1; 
    button2 
    document.getElementById("button2").innerHTML = button2; 
    // .. other code to set buttons to default state 
} 

HTML：

<button type="button" onClick="onClickReset()">Reset</button> 

Answer 2

這將是很容易...只需添加另一個按鈕，並將它的onclick功能是：

function onClick3(){ 
    button1=button2=-1; 
    onClick1();onClick2(); 
} 

Answer 3

比方說，有一個第三個按鈕，Reset所以HTML是：

<button type="button" onClick="onClick3()">Reset</button> 

的Javascript：

function onClick3() { 
    button1 = 0 
    button2 = 0 
    document.getElementById("button1").innerHTML = button1; 
    document.getElementById("button2").innerHTML = button2; 
};  

Answer 4

HTML

<button onclick="reset()">Reset<button> 

的Javascript

function reset() { 
    button1=0; 
    button2=0; 
    onClick1(); 
    onClick2(); 
} 

Answer 5

嘗試利用Array.prototype.forEach()設置button1，button2變量0，每個a元素與id與"button"開始0

var button1 = 0; 
 
var button2 = 0; 
 

 
function onClick1() { 
 
    button1 += 1; 
 
    document.getElementById("button1").innerHTML = button1; 
 
}; 
 

 
function onClick2() { 
 
    button2 += 1; 
 
    document.getElementById("button2").innerHTML = button2; 
 
}; 
 

 
function reset() { 
 
    button1 = button2 = 0; 
 
    [].forEach.call(document.querySelectorAll("[id^=button]"), function(el) { 
 
    el.innerHTML = button1 
 
    }); 
 
};

<button type="button" onClick="onClick1()">Click</button> 
 
<p><a id="button1">0</a> 
 
</p> 
 
<button type="button" onClick="onClick2()">Click</button> 
 
<p><a id="button2">0</a> 
 
</p> 
 
<input type="reset" onclick="reset()"/>

Answer 6

我要解決的不僅僅是重置的數字。

考慮下降onclick處理程序贊成addEventListener。這是最佳實踐，因爲on*事件屬性和DOM屬性相當過時。 addEventListener將它全部保存在JavaScript中，並有助於促進關注的分離。

另一件事是考慮你在標記中使用哪些元素。錨和段落可能不是你想要的，因爲它們在語義上沒有意義。我將刪除該段落，並使用一個readonly輸入元素（因爲它正在更改用戶輸入，因此完成）。將它全部包裝在form中，您可以使用標準的reset行爲。

使用CSS來獲得所需的間距和視覺效果。

考慮以下幾點：

var buttons = document.querySelectorAll('button'); 
 

 
function increment (event) { 
 
    var input = this.nextElementSibling, 
 
     value = parseInt(input.value) + 1; 
 

 
    input.value = value; 
 
} 
 

 
Array.prototype.forEach.call(buttons, function (button) { 
 
    button.addEventListener('click', increment); 
 
});

<form> 
 
    <div> 
 
    <button type="button">Click</button> 
 
    <input type="text" value="0" readonly /> 
 
    </div> 
 

 
    <div> 
 
    <button type="button">Click</button> 
 
    <input type="text" value="0" readonly /> 
 
    </div> 
 

 
    <button type="reset">Reset</button> 
 
</form>