Javascript 简单 if else onclick 然后做什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27731812/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Simple if else onclick then do?
提问by Markus Hallcyon
- How do I make it so if yes button clicked change colour?
- Is using .onclick the best option for this?
- Am I doing it the optimal way?
- 如果单击是按钮更改颜色，我该如何制作？
- 使用 .onclick 是最好的选择吗？
- 我这样做是最佳方式吗？
Thanks.
谢谢。
html:
html：
<body>
<div id="box"></div>
<button id="yes">yes</button>
<button id="no">no</button>
<script src="js/script.js"></script>
</body>
css:
css：
#box {
width: 200px;
height: 200px;
background-color: red;
}
js:
js：
function Choice () {
var box = document.getElementById("box");
var yes = document.getElementById("yes");
var no = document.getElementById("no");
if (yes.clicked == true) {
box.style.backgroundColor = "red";
} else if (no.clicked == true) {
box.style.backgroundColor = "green";
} else {
box.style.backgroundColor = "purple";
};
};
Choice ();
回答by Maroxtn
You should use onclickmethod because the function run once when the page is loaded and no button will be clicked then
您应该使用onclick方法，因为该函数在页面加载时运行一次，然后不会单击任何按钮
So you have to add an even which run every time the user press any key to add the changes to the div background
因此，您必须添加一个偶数，每次用户按任意键将更改添加到 div 背景时都会运行
So the function should be something like this
所以函数应该是这样的
htmlelement.onclick() = function(){
//Do the changes
}
So your code has to look something like this :
所以你的代码必须看起来像这样：
var box = document.getElementById("box");
var yes = document.getElementById("yes");
var no = document.getElementById("no");
yes.onclick = function(){
box.style.backgroundColor = "red";
}
no.onclick = function(){
box.style.backgroundColor = "green";
}
This is meaning that when #yes button is clicked the color of the div is red and when the #no button is clicked the background is green
这意味着当 #yes 按钮被点击时，div 的颜色是红色的，当 #no 按钮被点击时，背景是绿色的
Here is a Jsfiddle
这是一个Jsfiddle
回答by Xotic750
The preferred modern method is to use addEventListenereither by adding the event listener direct to the element or to a parent of the elements (delegated).
首选的现代方法是addEventListener通过将事件侦听器直接添加到元素或元素的父元素（委托）来使用。
An example, using delegated events, might be
使用委托事件的示例可能是
var box = document.getElementById('box');
document.getElementById('buttons').addEventListener('click', function(evt) {
var target = evt.target;
if (target.id === 'yes') {
box.style.backgroundColor = 'red';
} else if (target.id === 'no') {
box.style.backgroundColor = 'green';
} else {
box.style.backgroundColor = 'purple';
}
}, false);#box {
width: 200px;
height: 200px;
background-color: red;
}
#buttons {
margin-top: 50px;
}<div id='box'></div>
<div id='buttons'>
<button id='yes'>yes</button>
<button id='no'>no</button>
<p>Click one of the buttons above.</p>
</div>回答by Xotic750
You may use jQuery in it like
您可以在其中使用 jQuery，例如
$('#yesh').click(function(){
*****HERE GOES THE FUNCTION*****
});
Besides jQuery is easy to use.
此外，jQuery 易于使用。
You can make changes in colors etc using simple jQUery or Javascript.
您可以使用简单的 jQUEry 或 Javascript 更改颜色等。
回答by Girish
you call function on page load time but not call on button event, you will need to call function onclickevent, you may add event inline element style or event bining
您在页面加载时调用函数但不调用按钮事件，您将需要调用函数onclick事件，您可以添加事件内联元素样式或事件合并
function Choice(elem) {
var box = document.getElementById("box");
if (elem.id == "no") {
box.style.backgroundColor = "red";
} else if (elem.id == "yes") {
box.style.backgroundColor = "green";
} else {
box.style.backgroundColor = "purple";
};
};<div id="box">dd</div>
<button id="yes" onclick="Choice(this);">yes</button>
<button id="no" onclick="Choice(this);">no</button>
<button id="other" onclick="Choice(this);">other</button>or event binding,
或事件绑定，
window.onload = function() {
var box = document.getElementById("box");
document.getElementById("yes").onclick = function() {
box.style.backgroundColor = "red";
}
document.getElementById("no").onclick = function() {
box.style.backgroundColor = "green";
}
}<div id="box">dd</div>
<button id="yes">yes</button>
<button id="no">no</button>回答by Diego Fagundez
I did it that way and I like it better, but it can be optimized, right?
我是这样做的，我更喜欢它，但它可以优化，对吗？
// Obtengo los botones y la caja de contenido
var home = document.getElementById("home");
var about = document.getElementById("about");
var service = document.getElementById("service");
var contact = document.getElementById("contact");
var content = document.querySelector("section");
function botonPress(e){
console.log(e.getAttribute("id"));
var screen = e.getAttribute("id");
switch(screen){
case "home":
// cambiar fondo
content.style.backgroundColor = 'black';
break;
case "about":
// cambiar fondo
content.style.backgroundColor = 'blue';
break;
case "service":
// cambiar fondo
content.style.backgroundColor = 'green';
break;
case "contact":
// cambiar fondo
content.style.backgroundColor = 'red';
break;
}
}
