web-dev-qa-db-ja.com

他にonclickがあれば簡単ですか？

  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 ();
javascripthtmlcssif-statementonclick
5
Markus Hallcyon

onclickメソッドを使用する必要があります。これは、ページが読み込まれ、ボタンがクリックされないときに関数が1回実行されるためです。

そのため、ユーザーが任意のキーを押して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

6
Maroxtn

推奨される最新の方法は、イベントリスナーを要素または要素の親（委任）に直接追加することで 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>
3
Xotic750

次のようにjQueryを使用できます

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

JQueryのほかに使いやすいです。

簡単なjQUeryまたはJavascriptを使用して、色などを変更できます。

2
user3738510

ページの読み込み時に関数を呼び出しますが、ボタンイベントでは呼び出しません。関数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>
1
Girish

私はその方法でそれをやりましたが、私はそれがより好きですが、最適化できますよね？

// 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;
  }
}
0
Diego Fagundez