Q&A
わぁ！できた！ありがとうございます！
(上図解説)
左４個は押しても変化がない、
右９個は押すと(左から６番目のように)黒くなり、
再び押すと白に戻る。
この色の変わるボタンの色をリセットし、白に戻すリセットボタンを作りたい。
これ以外にも作っているサイトにはリセットボタンを作っているので、
「bodyの項目すべてをリセット」ではなくここだけをリセットしたい。
ご依頼したいのは
・リセットボタンに関する部分のコード(主にスクリプトコード)
・その解説
です。
自分で書くとリセットボタンが反応せず、完全に手詰まって住まいました。
ネットで調べて色々くっつけて作ったものなので、他のコードのおかしなところも
ぜひ教えてください。
以下のHEMLコードは関係ありそうなところだけを抜き出し注釈を入れたものです
<head> <script type="text/javascript"> function func_test(obj) { if (obj.style.color == 'white') { obj.style.color = 'black'; obj.style.background = 'white'; } else { obj.style.color = 'white'; obj.style.background = 'black'; } } </script> <style type="text/css"> <!-- .item { width: 30px; height: 40px; border: 1px solid #ccc; background-color: white; color: black; border-bottom: 5px solid black; } .noitem { width: 30px; height: 40px; border: 1px solid #ccc; background-color: white; border-bottom: 5px solid #ccc; } .noitem1 { width: 30px; height: 40px; border: 1px solid #ccc; background-color: #ccc; border-bottom: 5px solid #ccc; } --> </style> </head> <body> <script type="text/javascript"> //教えていただきたいリセットボタンのコード function OnButtonClick(obj) { document.getElementsByClassName("item").style.color = 'black'; document.getElementsByClassName("item").style.background = 'white'; } </script> <input type="button" id="button_sample" value="リセット" onclick="OnButtonClick(this)" /> <label> <div class="click-button"> <button class="noitem"> </button> //ここの色は変化させたくない <button class="noitem"> </button> //ここの色は変化させたくない <button class="noitem"> </button> //ここの色は変化させたくない <button class="noitem1"> </button> //ここの色は変化させたくない <button class="item" onclick="func_test(this)"> </button> <button class="item" onclick="func_test(this)"> </button> <button class="item" onclick="func_test(this)"> </button> <button class="item" onclick="func_test(this)"> </button> <button class="item" onclick="func_test(this)"> </button> <button class="item" onclick="func_test(this)"> </button> <button class="item" onclick="func_test(this)"> </button> <button class="item" onclick="func_test(this)"> </button> <button class="item" onclick="func_test(this)"> </button> </div> </label> </body>
回答2件
0
html
1document.getElementsByClassName("item")
ここの取得結果ですが、class名で取得しているので、配列になります。
console.logで確認した内容
1HTMLCollection(9) [button.item, button.item, button.item, button.item, button.item, button.item, button.item, button.item, button.item] 20: button.item 31: button.item 42: button.item 53: button.item 64: button.item 75: button.item 86: button.item 97: button.item 108: button.item 11length: 9 12[[Prototype]]: HTMLCollection
なので、forループを使用して、styleを変更する必要があります。
js
1 <script type="text/javascript"> 2 function OnButtonClick(obj) { 3 let items = document.getElementsByClassName("item"); 4 for (let i = 0; i < items.length; i++) { 5 items[i].style.color = 'black'; 6 items[i].style.background = 'white'; 7 } 8 } 9 </script>
ご確認の方、よろしくお願いします。
投稿2022/05/18 08:29
総合スコア845
0
ベストアンサー
こういうことですか？
javascript
1<script> 2function func_test(obj) { 3 obj.classList.toggle('black'); 4} 5function OnButtonClick(obj) { 6 obj.closest('div').querySelectorAll('.black').forEach(x=>x.classList.remove('black')); 7} 8</script> 9<style> 10.noitem{ 11 background-Color:white; 12} 13.item:not(.black){ 14 background-Color:white; 15} 16.item.black{ 17 background-Color:black; 18} 19</style> 20<div> 21<input type="button" id="button_sample" value="リセット" onclick="OnButtonClick(this)" /> 22<label> 23 <div class="click-button"> 24 <button class="noitem"> </button> 25 <button class="noitem"> </button> 26 <button class="noitem"> </button> 27 <button class="noitem"> </button> 28 <button class="item" onclick="func_test(this)"> </button> 29 <button class="item" onclick="func_test(this)"> </button> 30 <button class="item" onclick="func_test(this)"> </button> 31 <button class="item" onclick="func_test(this)"> </button> 32 <button class="item" onclick="func_test(this)"> </button> 33 <button class="item" onclick="func_test(this)"> </button> 34 <button class="item" onclick="func_test(this)"> </button> 35 <button class="item" onclick="func_test(this)"> </button> 36 <button class="item" onclick="func_test(this)"> </button> 37 </div> 38</label> 39</div> 40<hr> 41<div> 42<input type="button" id="button_sample" value="リセット" onclick="OnButtonClick(this)" /> 43<label> 44 <div class="click-button"> 45 <button class="noitem"> </button> 46 <button class="noitem"> </button> 47 <button class="noitem"> </button> 48 <button class="noitem"> </button> 49 <button class="item" onclick="func_test(this)"> </button> 50 <button class="item" onclick="func_test(this)"> </button> 51 <button class="item" onclick="func_test(this)"> </button> 52 <button class="item" onclick="func_test(this)"> </button> 53 <button class="item" onclick="func_test(this)"> </button> 54 <button class="item" onclick="func_test(this)"> </button> 55 <button class="item" onclick="func_test(this)"> </button> 56 <button class="item" onclick="func_test(this)"> </button> 57 <button class="item" onclick="func_test(this)"> </button> 58 </div> 59</label> 60</div>
投稿2022/05/18 08:23
総合スコア114779
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/05/18 08:55