javascript - 特定のボタンクリックに応じてコードを変更するにはどうすればよいですか？

Question

赤と青の2つのボタンがあります。赤をクリックすると、「サンプルコード」が表示され、青に移動する必要があります。「サンプルコード」が非表示になり、「新しい段落」が表示されます。その逆も同様です。

Answer 1

onClickリスナーを追加します。これらはJQueryで簡単に実行できます。

何かのようなもの...

$.('#myRedbutton').click(function(){
  //Do the red button stuff.
};

$.('#myBluebutton').click(function(){
  //Do the blue button stuff.
};

純粋なJavascriptの場合は、ボタンのHTMLを次のように編集できます。

 <button onclick="redButton()">Red</button>

上記のボタンをクリックすると、が呼び出されredButton()ます。

Answer 2

var red = document.getElementById('RED');
var blue = document.getELementById('BLUE');
var sampleCode = document.getElementById('SAMPLE');

red.addEventListener('click', function () {
    blue.style.display = 'none'; // hide blue, and you can use this method to hide every element you want
    sampleCode.style.display = 'block'; // display sampleCode element
};