質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

onclick

onclickとはユーザーのクリック処理を指します。これは"onmousedown"(押下)と"onmouseup"(押上)の二つの事象の組み合わせです

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

3回答

2350閲覧

Google chromeでjsの関数書き換えができない

ceeport

総合スコア14

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

onclick

onclickとはユーザーのクリック処理を指します。これは"onmousedown"(押下)と"onmouseup"(押上)の二つの事象の組み合わせです

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2017/04/16 05:13

編集2017/04/16 06:14

###前提・実現したいこと
ホームページ上で試験対策用の記憶補助のために「赤シート」暗記方法の様なページを作っています。
テキストのカラーと背景色を同じにすることで目隠しして、クリックすると背景色を無しにしてテキストを見られるようになる。次に同じテキストをクリックすると背景色が出て目隠しされる、という仕掛けです。

###発生している問題・エラーメッセージ

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です。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

解決済のようですが、関数を書き換えずとも実装できるように思います。

HTML

1<style> 2.mask { 3 color: black; 4 background-color: white; 5 cursor: pointer; 6} 7 8.mask[aria-hidden="true"] { 9 color: black; 10 background-color: black; 11} 12</style> 13</head> 14<body> 15<p id="mask-switch"> 16 <input type="button" id="all-open" value="ALL OPEN"> 17 <input type="button" id="all-close" value="ALL CLOSE"> 18</p> 19 20<h3>神経系とは</h3> 21<p>神経系とは、中枢では<span class="mask" aria-hidden="true">脳と脊髄</span>、末梢では<span class="mask" aria-hidden="true">運動</span>神経・<span class="mask" aria-hidden="true">感覚</span>神経・<span class="mask" aria-hidden="true">自律</span>神経という神経組織からなる。</p> 22 23<script> 24'use strict'; 25document.querySelectorAll('.mask').forEach(function (element) { 26 element.addEventListener('click', function (event) { 27 var element = event.target; 28 29 element.setAttribute('aria-hidden', element.getAttribute('aria-hidden') === 'true' ? 'false' : 'true'); 30 }, false); 31}); 32 33document.getElementById('mask-switch').addEventListener('click', function handleClick (event) { 34 var input = event.target, ariaHidden; 35 36 switch (input.id) { 37 case 'all-open': 38 ariaHidden = 'false'; 39 break; 40 case 'all-close': 41 ariaHidden = 'true'; 42 break; 43 } 44 45 if (ariaHidden) { 46 for (var elements = document.querySelectorAll('.mask'), i = 0, len = elements.length; i < len; ++i) { 47 console.log(elements[i]); 48 elements[i].setAttribute('aria-hidden', ariaHidden); 49 } 50 } 51}, false); 52</script>

(2017/0/02 10:11追記)

[ALL OPEN], [ALL CLOSE] ボタンを追加しました。

Re: ceeport さん

投稿2017/05/01 07:11

編集2017/05/02 01:11
think49

総合スコア18156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ceeport

2017/05/02 00:16

回答、ありがとうございました。 1つ1つの開け閉めは提案いただいたコードで再現できるようです。 なお、参考ページURLhttp://bodyshift.net/2016/05/11/post-246/にあるように、ALL OPEN、ALL CLOSEというボタンを押すことですべての開け閉めをできるようにしてあります。
think49

2017/05/02 01:13

> ALL OPEN、ALL CLOSEというボタンを押すことですべての開け閉めをできるようにしてあります。 ソースコードを読みましたが、合計400個の関数を作るのは無駄に過ぎるように思います。 親記事のコードを修正しました。
ceeport

2017/05/02 01:39

丁寧で素早い回答、ありがとうございました。 知らない関数がありますので勉強させていただき、提案いただいたコードを使わせていただきたいと思います。
guest

0

以下同様に99個

こういう作り方は問題を増やす度に関数もデザインも増えるのでやってはいけないです。
またCSSの指定をidでやることはアンチパターンで例え一種類のUIだとしても基本的にクラスでやるのが一般的です。
コードを読ませていただいたところ2種類の関数とデザインだけ用意すればいいようなので

javascript

1function check(obj) { 2 obj.classList.remove("hide"); 3 obj.onclick = new Function("uncheck(this)"); 4} 5function uncheck(obj) { 6 obj.classList.add("hide"); 7 obj.onclick = new Function("check(this)"); 8}

html

1<span onclick="check(this)" class="kuro hide">〜〜〜〜</span>

css

1.kuro {cursor: pointer;} 2.kuro.hide{background-color: black;}

もし今後もWEBページを作る仕事をする必要があり、ちゃんとWEBページの作り方を勉強したことないのであれば一度ちゃんと勉強されてから作ったほうが書いてるときに大変にならずよいと思います。

追記

すみません。jQueryで動作検証したため普通のhtmlのイベントだとthisがspanに紐づかないということに気づきませんでした。
eventオブジェクトを使う方法で直しても良いのですが、楽な方法でなおしました。動作確認できているのでご参考にしてもらえればと思います。

投稿2017/04/16 08:14

編集2017/05/01 06:32
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ceeport

2017/04/28 05:44

ご教授ありがとうございます。 提案いただいたコードでは、希望の動きになりませんでした。 参考ページhttp://bodyshift.net/2016/05/11/post-246/
ceeport

2017/05/02 00:03

>追記 回答と動作検証、ありがとうございました。 1つ1つの開け閉めは提案いただいたコードで再現できるようです。 なお、参考ページURLにあるように、ALL OPEN、ALL CLOSEというボタンを押すことですべての開け閉めをできるようにしてあります。
guest

0

自己解決

cssで当該idを

css

1#kuro01{cursor:pointer;}

にすることで解決しました。

投稿2017/04/16 06:08

編集2017/04/16 06:11
ceeport

総合スコア14

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問