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

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

ただいまの
回答率

90.34%

  • JavaScript

    17513questions

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

  • Chrome

    640questions

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

  • onclick

    26questions

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

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 636

ceeport

score 8

前提・実現したいこと

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

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

chromeだけは一つ目のテキストはできるが、2つ目以降は開きっぱなしになってしまいます。

当該ページリンク内容

wordpress4.7.3
simplicty2.4.0i

該当のソースコード

function check01() { element = document.getElementById('kuro01');
    element.id = "siro01";
    element.onclick = new Function("uncheck01();"); }

function uncheck01() { element = document.getElementById('siro01');
    element.id = "kuro01";
    element.onclick = new Function("check01();"); }

function check02() { element = document.getElementById('kuro02');
    element.id = "siro02";
    element.onclick = new Function("uncheck02();"); }

function uncheck02() { element = document.getElementById('siro02');
    element.id = "kuro02";
    element.onclick = new Function("check02();"); }

......以下同様に99
#kuro01 {
    background-color: black;
}

#siro01 {
    background-color: none;
}

#kuro02 {
    background-color: black;
}

#siro02 {
    background-color: none;
}

......以下同様に99個
<h3>神経系とは</h3>
神経系とは、中枢では<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です。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

+3

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

<style>
.mask {
  color: black;
  background-color: white;
  cursor: pointer;
}

.mask[aria-hidden="true"] {
  color: black;
  background-color: black;
}
</style>
</head>
<body>
<p id="mask-switch">
  <input type="button" id="all-open" value="ALL OPEN">
  <input type="button" id="all-close" value="ALL CLOSE">
</p>

<h3>神経系とは</h3>
<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>

<script>
'use strict';
document.querySelectorAll('.mask').forEach(function (element) {
  element.addEventListener('click', function (event) {
    var element = event.target;

    element.setAttribute('aria-hidden', element.getAttribute('aria-hidden') === 'true' ? 'false' : 'true');
  }, false);
});

document.getElementById('mask-switch').addEventListener('click', function handleClick (event) {
  var input = event.target, ariaHidden;

  switch (input.id) {
    case 'all-open':
      ariaHidden = 'false';
      break;
    case 'all-close':
      ariaHidden = 'true';
      break;
  }

  if (ariaHidden) {
    for (var elements = document.querySelectorAll('.mask'), i = 0, len = elements.length; i < len; ++i) {
      console.log(elements[i]);
      elements[i].setAttribute('aria-hidden', ariaHidden);
    }
  }
}, false);
</script>

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

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

Re: ceeport さん

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/05/02 09:16

    回答、ありがとうございました。
    1つ1つの開け閉めは提案いただいたコードで再現できるようです。

    なお、参考ページURLhttp://bodyshift.net/2016/05/11/post-246/にあるように、ALL OPEN、ALL CLOSEというボタンを押すことですべての開け閉めをできるようにしてあります。

    キャンセル

  • 2017/05/02 10:13

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

    キャンセル

  • 2017/05/02 10:39

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

    キャンセル

+1

以下同様に99個

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

function check(obj) {
    obj.classList.remove("hide");
    obj.onclick = new Function("uncheck(this)");
}
function uncheck(obj) { 
    obj.classList.add("hide");
    obj.onclick = new Function("check(this)");
}
<span onclick="check(this)" class="kuro hide">〜〜〜〜</span>
.kuro {cursor: pointer;}
.kuro.hide{background-color: black;}

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

追記

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/04/28 14:44

    ご教授ありがとうございます。
    提案いただいたコードでは、希望の動きになりませんでした。

    参考ページhttp://bodyshift.net/2016/05/11/post-246/

    キャンセル

  • 2017/05/02 09:03

    >追記
    回答と動作検証、ありがとうございました。
    1つ1つの開け閉めは提案いただいたコードで再現できるようです。

    なお、参考ページURLにあるように、ALL OPEN、ALL CLOSEというボタンを押すことですべての開け閉めをできるようにしてあります。

    キャンセル

check解決した方法

0

cssで当該idを

#kuro01{cursor:pointer;}


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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 90.34%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • JavaScript

    17513questions

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

  • Chrome

    640questions

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

  • onclick

    26questions

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