###前提・実現したいこと
ホームページ上で試験対策用の記憶補助のために「赤シート」暗記方法の様なページを作っています。
テキストのカラーと背景色を同じにすることで目隠しして、クリックすると背景色を無しにしてテキストを見られるようになる。次に同じテキストをクリックすると背景色が出て目隠しされる、という仕掛けです。
###発生している問題・エラーメッセージ
chromeだけは一つ目のテキストはできるが、2つ目以降は開きっぱなしになってしまいます。
当該ページリンク内容
wordpress4.7.3
simplicty2.4.0i
###該当のソースコード
javascript
1function check01() { element = document.getElementById('kuro01'); 2 element.id = "siro01"; 3 element.onclick = new Function("uncheck01();"); } 4 5function uncheck01() { element = document.getElementById('siro01'); 6 element.id = "kuro01"; 7 element.onclick = new Function("check01();"); } 8 9function check02() { element = document.getElementById('kuro02'); 10 element.id = "siro02"; 11 element.onclick = new Function("uncheck02();"); } 12 13function uncheck02() { element = document.getElementById('siro02'); 14 element.id = "kuro02"; 15 element.onclick = new Function("check02();"); } 16 17......以下同様に99個
css
1#kuro01 { 2 background-color: black; 3} 4 5#siro01 { 6 background-color: none; 7} 8 9#kuro02 { 10 background-color: black; 11} 12 13#siro02 { 14 background-color: none; 15} 16 17......以下同様に99個
HTML
1<h3>神経系とは</h3> 2神経系とは、中枢では<span id="kuro01" onclick="check01()">脳と脊髄</span>、末梢では<span id="kuro02" onclick="check02()">運動</span>神経・<span id="kuro03" onclick="check03()">感覚</span>神経・<span id="kuro04" onclick="check04()">自律</span>神経という神経組織からなる。
###試したこと
onClick=""では関数書き換えができなかったので、onclick=""をつかいました。
###補足情報(言語/FW/ツール等のバージョンなど)
firefox、safari、andoroid、iphoneでは上手くいってます。がchromeだけ上手く行きません。
internetExplorer11でもOKです。
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/05/02 00:16
2017/05/02 01:13
2017/05/02 01:39