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 方法，因为该功能在加载页面时运行一次，并且不会点击任何按钮

因此，每当用户按任意键将更改添加到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 2

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

您可以在其中使用jQuery，如

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

除了jQuery易于使用。

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

Answer 4

你在页面加载时调用函数但不调用按钮事件，你需要调用函数onclick事件，你可以添加事件内联元素样式或事件bining

＆＃13;

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

＆＃13;

<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>

＆＃13;

或事件绑定，

＆＃13;

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

＆＃13;

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

＆＃13;

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>

简单，如果还有onclick然后呢？

6 个答案: