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

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

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

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

Q&A

2回答

1793閲覧

onクリックがわからない

konkuro1007

総合スコア24

JavaScript

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

0グッド

0クリップ

投稿2017/08/24 07:23

編集2022/01/12 10:55

ロード時はすべての文字が黒。

クリックしたエレメントだけを白い色にすると同時にそれ以外を黒い色にする

ウィンドウをクリックした時にすべての文字を黒い色にする(今回の課題)

javascript

1function enlargement(event) { 2 //エレメントを全て黒い色にする(動作確認済み) 3 var reset_element = document.getElementById("elements").getElementsByTagName("p"); 4 for(var count = reset_element.length; count--;){ 5 reset_element[count].style.color = "#000"; 6 } 7 //この間にウインドウをクリックした場合の処理(未完成動作せず) 8 //処理内容は(エレメントを全て黒い色にする)と同じ 9 /* 10 window("click", function(reset_element, event){ 11 for(var count = reset_element.length; count--;){ 12 reset_element[count].style.color = "#000"; 13 } 14 }); 15 */ 16 //クリックしたエレメントを白い色にする(動作確認済み) 17 var click_element = event.target; 18 click_element.style.color = "#FFF"; 19}

html

1<div id="elements"> 2 <p onclick="enlargement(event);">Text1</p> 3 <p onclick="enlargement(event);">Text2</p> 4 <p onclick="enlargement(event);">Text3</p> 5</div>

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

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

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

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

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

m.ts10806

2017/08/24 07:28 編集

細かいですが、コードのタイトルがhtml,javascript逆では
konkuro1007

2017/08/24 07:29 編集

今直しました すみません
konkuro1007

2017/08/24 07:34

タイトルも直しました ありがとうございます
m.ts10806

2017/08/24 07:37 編集

windowというのは画面内の今回のテキスト以外の任意の場所という解釈で合ってますか?
konkuro1007

2017/08/24 07:51 編集

その通りです。しかし、テキストをクリックした場合にもウインドウをクリックした場合の処理をおこなって。最終的に上書きされるような形で適用しても可とします。
m.ts10806

2017/08/24 07:57

色々踏まえてサンプル提示しました。ご確認ください。
guest

回答2

0

無関係なPにも影響ありますが、グルーピングは必要ないでしょうか?
たとえば

  • classでまとめる
  • siblingに対してのみ操作する

また、cssの指定をダイレクトにやるよりcssで属性をきめておいて
クラス名を付け替えるほうが汎用性があがると思います

sample

一応、既に白くなっているpを再クリックすると黒に戻すようにしてあります

CSS

1p{ color:black;} 2p.hoge{color:white;background-Color:black;}

javascript

1document.addEventListener('click',function(e){ 2 var t=e.target; 3 if(t.nodeName=="P"){ 4 var n=t.parentNode.firstChild; 5 while(n){ 6 if(n.nodeName=="P"){ 7 if(n==t){ 8 n.classList.toggle('hoge'); 9 }else{ 10 n.classList.remove('hoge'); 11 } 12 } 13 n=n.nextSibling; 14 } 15 }else{ 16 var p=document.querySelectorAll('p'); 17 Array.prototype.map.call(p,function(i){ 18 i.classList.remove('hoge'); 19 }); 20 } 21});

HTML

1<div id="elements"> 2<p>Text1</p> 3<p>Text2</p> 4<p>Text3</p> 5</div> 6<div id="elements2"> 7<p>Text4</p> 8<p>Text5</p> 9<p>Text6</p> 10</div>

投稿2017/08/24 07:37

編集2017/08/24 07:55
yambejp

総合スコア114585

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

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

konkuro1007

2017/08/24 07:54

私はそれほど詳しくないので、タイミングでどうにかしようと考えています。 もしそれ以外の方法があるのなら、参考にしたいと思います。
yambejp

2017/08/24 07:58 編集

sampleつけときました ちなみにpの中に何らかのタグがある場合は、親のpタグより子供が優先されます 状況がわからないので仕様が増える場合はご指摘下さい
konkuro1007

2017/08/24 08:02 編集

ありがとうございます。参考にさせていきます。
guest

0

ご提示のソースではwindowクリックはenlargement()内にあるため、
pがクリックしたときしか動きません。

こんな感じでしょうか。

javascript

1var color_flg = false;//文字白が適用されているか 2 3window.load = color_reset; //画面表示時にリセット処理実行 4 5function enlargement(event) { 6 color_reset(); 7 8 //クリックしたエレメントを白い色にする 9 var click_element = event.target; 10 click_element.style.color = "#FFF"; 11 color_flg = true; //適用したためフラグon 12} 13 14//全て黒にする処理 15function color_reset(){ 16 var reset_element = document.getElementById("elements").getElementsByTagName("p"); 17 for(var count = reset_element.length; count--;){ 18 reset_element[count].style.color = "#000"; 19 } 20} 21 22window.onclick = function(event){ 23 if(event.target.tagName != "P" && color_flg){ //window内全てのクリックに反応するためPタグは除去 24 color_reset(); 25 color_flg = false; //全黒に戻したためフラグoff 26 } 27}; 28

若干強引なところもありますが、これである程度ご希望通りには動くとは思います。
ソース内コメントから「文字白が適用されているときのみwindowクリックにて全黒に戻す」としたいのかなぁと勝手に推測し、flgによる制御を行っています。
また「全て黒に戻す」は同じ処理内容だったので1つの関数にまとめています。
念のためwindowのload時にもその関数を実行するようにしています。

ただ、既に指摘があるとおり、操作したい対象をグルーピングしたり、cssのon,off切り替えのみの方がシンプルで分かりやすく汎用性のある記述となると思いますのでご検討ください。

投稿2017/08/24 07:57

編集2017/08/24 07:59
m.ts10806

総合スコア80765

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

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

konkuro1007

2017/08/24 08:09

多分これで解決すると思います。 ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問