简单，否则点击然后做

Simple if else onclick then do?

本文关键字：然后 简单      更新时间：2023-09-26
  1. 如果是按钮点击改变颜色，我该怎么做？
  2. 使用 .onclick 是最好的选择吗？
  3. 我这样做的方式是最佳吗？

谢谢。

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

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

因此，您必须添加一个偶数，每次用户按任何键将更改添加到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

首选的现代方法是通过将事件侦听器直接添加到元素或元素的父级（委托）来使用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>

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

你可以在其中使用 jQuery，就像

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

此外，jQuery易于使用。

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

我这样做了，我更喜欢它，但它可以优化，对吧？

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


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>

相关文章：