如何通过一个按钮重置所有按钮的值

问题描述：

我无法弄清楚如何通过一个重置按钮将所有按钮的值重置为默认值，任何人都可以帮忙吗？如何通过一个按钮重置所有按钮的值

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>

答

这应该工作：

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>

这将无法正常工作......它不会重设值 –

正确，您需要在'onClickReset（）'函数中添加额外的CSS以将所有“可见”状态（即颜色，可见性）重置为默认值。如果默认状态具有更复杂的逻辑，您可能还需要重置其他“功能”状态。 –

@ charlie97我通过在这里添加相应的代码来修复它：https://jsbin.com/rosefosumi/edit?html,output 修改如下： 'button1 = 0;' 'document.getElementById（“button1”） .value = button1;' '...' ResetButton（）请检查我是否遗漏了任何东西。 –

答

这将是很容易...只需添加另一个按钮，并将它的onclick功能是：

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

没有，有很多方法可以做到这一点。有没有特定的方式，你想要它？ – Markasoftware

答

比方说，有一个第三个按钮，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; 
};

答

HTML

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

的Javascript

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

答

尝试利用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()"/>

@ charlie97是的。解决方案中的“js”应该将值返回为“0”或“默认”。 _“颜色”_不出现在原始问题中。当'input type =“reset”'元素点击时调用''''''''''''''按钮''html'或'css'可以设置为'reset'函数的任何值。 – guest271314

答

我要解决的不仅仅是重置的数字。

考虑下降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>

这应该适用于所有现代浏览器（IE9 +）。确保你的标记是按照正确的顺序排列的，并且它被包裹在一个'form'中，就像我所显示的那样。为了简单起见，我依赖于nextElementSibling的标记结构来处理这个示例，因此请确保您的只读输入元素直接跟随其按钮伙伴。如果没有这个顺序，你需要用元素搜索得到更多的罗嗦，或者使用'data'属性来直接找到目标输入。 – Oka

确保您的脚本标记出现在您的DOM元素之后。将它放在结束'

如何通过一个按钮重置所有按钮的值

相关推荐