回答受付が終了しました

以下のソースコードをbuttonが複数あったときそれぞれ押されたときに、ボタンの上の中心で◯●切り替わるようにしたいのですが、どうしても切り替えの方法がわかりません。教えてください! よろ

以下のソースコードをbuttonが複数あったときそれぞれ押されたときに、ボタンの上の中心で◯●切り替わるようにしたいのですが、どうしても切り替えの方法がわかりません。教えてください! よろ しくお願いします。 ソースコード↓を使って… function sampleFn( $event ) { if( $event.button == 0 ){ document.getElementById( "sampleOutput" ).innerHTML = "●"; }else if( $event.button == 1 ){ document.getElementById( "sampleOutput" ).innerHTML = " "; }else{ document.getElementById( "sampleOutput" ).innerHTML = "○"; } } 元のソースコード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>JavaScript</title> <style> .table{ position:absolute; top: 50%; left: 50%; margin-top: -300px; margin-left: -300px; border: 5px solid black; } .button { width: 80px; height: 80px; background-color: #0f0; text-align: center; font-size: 50px; cursor: pointer; border: 3px solid black; } </style> </head> <body> <table class="table" id="sampleButton"> <p> <span id="sampleOutput" style="margin-left: 500px;"></span> <tr><td> <button class = "button"> </button> <button class = "button"> </button> <button class = "button"> </button> <button class = "button"> </button> <button class = "button"> </button> <button class = "button"> </button> <button class = "button"> </button> <button class = "button"> </button> </td></tr> <tr><td> <button class = "button"> </button> <button class = "button"> </button> <button class = "button"> </button> <button class = "button"> </button> <button class = "button"> </button> <button class = "button"> </button> <button class = "button"> </button> <button class = "button"> </button> </td></tr> </p> </table> <script type="text/javascript"> window.onload = function () { document.getElementById( "sampleButton" ).onmousedown = function( $event ){ sampleFn( $event ); }; } function sampleFn( $event ) { if( $event.button == 0 ){ document.getElementById( "sampleOutput" ).innerHTML = "●"; }else if( $event.button == 1 ){ document.getElementById( "sampleOutput" ).innerHTML = " "; }else{ document.getElementById( "sampleOutput" ).innerHTML = "○"; } } </script> </body> </html>

JavaScript14閲覧

回答(1件)

0

完全コピペで動作を確認して下さい。 <!doctype html> <html> <head> <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'> <!-- ↑metaタグでcharsetをUTF-8に設定しています。 モチロン他のキャラクターセットに変更しても良いですが、 必ずcharsetに設定されているキャラクターセットでセーブして下さい。 キャラクターセットが違うと全角文字が文字化けします。 --> <title>test</title> </head> <body> <div id="sampleButton"> <button class = "button"> </button> <button class = "button"> </button> <button class = "button"> </button> </div> <script type='text/javascript'> <!-- window.onload = () => { oSampleButton = document.getElementById("sampleButton"); a1oButtonSummary = oSampleButton.getElementsByClassName("button"); for(let i = 0; i<a1oButtonSummary.length; i++){ a1oButtonSummary[i].addEventListener("click",ButtonHandler, false); } } function ButtonHandler(ev){ let oTarget = ev.currentTarget; let s = "●"; if(oTarget.innerHTML!="○"){ s = "○"; } oTarget.innerHTML = s; } // --> </script> </body> </html>