简单的if else onclick then呢？

Question

如果单击“是”按钮，我该如何更改颜色？
使用 .onclick 是最好的选择吗？
我这样做是最佳方式吗？

谢谢。

html:

<body>
<div id="box"></div>
<button id="yes">yes</button>
<button id="no">no</button>
<script src="js/script.js"></script>
</body>

CSS:

#box {
    width: 200px;
    height: 200px;
    background-color: red;
}

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 ();

Answer 1

您在页面加载时调用函数但不调用按钮事件，您将需要调用函数 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>

或事件绑定，

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>

Answer 2

您应该使用 onclick 方法，因为函数运行会在页面加载后单击一次，然后

所以你必须添加一个 even which 运行每次用户按任意键将更改添加到 div 背景

所以函数应该是这样的

htmlelement.onclick() = function(){
    //Do the changes 
}

因此您的代码必须如下所示：

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";
}

这意味着当点击#yes 按钮时 div 的颜色为红色，而当点击 #no 按钮时背景为绿色

这是一个Jsfiddle

Answer 3

首选的现代方法是使用 addEventListener 通过将事件侦听器直接添加到元素或添加到元素的父级（委托）。

一个使用委托事件的例子可能是

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>

Answer 4

你可以像

一样在其中使用jQuery

$('#yesh').click(function(){
     *****HERE GOES THE FUNCTION*****
});

此外 jQuery 易于使用。

您可以使用简单的 jQUery 或 Javascript 更改颜色等。

Answer 5

我就是这样做的，我更喜欢它，但它可以优化，对吗？

// 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;
  }
}

Answer 6

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";
  }
  else {
          box.style.backgroundColor = "indigo";
        }
}

<div id="box">dd</div>
<button id="yes">yes</button>
<button id="no">no</button>

简单的if else onclick then呢？

Simple if else onclick then do?

html

javascript

css

if-statement

onclick