Q&A
まず本来期待する結果が何なのかを書いて下さい。
以前はどう動いていて、今はどのような状態ですか（動かない→どのように動かない？）
※以前動いていたのを知っているのはあなただけのためわかりません。
よろしくお願いします。
###ＪＡＶＡ Ｓｃｒｉｐｔが気付いたら動いていなかった
以前に書いて検証して安心していたら、動かなくなっていて、慌てているところです。
Ｇｏｏｇｌｅ Ｃｈｒｏｍｅの最新版と
Ｍｉｃｒｏｓｏｆｔ Ｅｄｇｅで再度検証しましたが、原因を特定できていません。
ソースは変更していないつもりですが、改めて見直してみても、エラーとなりそうな個所を見つけられません。
ソースではないとしたら、どんなことを直せばいいでしょうか。
以下コードです。
<html> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript"> window.onload=function(){ const phone=document.getElementById('phone'); const line=document.getElementById('line'); phone.addEventListener('focus',function(){ phone.innerText='クリックまたはタップして0123-456-7890に電話する'; }); phone.addEventListener('blur',function(){ phone.innerText='電話'; }); phone.addEventListener('mouseover',function(){ phone.innerText='クリックまたはタップして0123-456-7890に電話する'; }); phone.addEventListener('mouseout',function(){ phone.innerText='電話'; }); line.addEventListener('focus',function(){ line.innerText='ＬＩＮＥ ＩＤを追加'; }); line.addEventListener('blur',function(){ line.innerText='LINE'（相談専用）'; }); line.addEventListener('mouseover',function(){ line.innerText='ＬＩＮＥ ＩＤを追加'; }); line.addEventListener('mouseout',function(){ line.innerText='ＬＩＮＥ'; }); } </script> </head> <body style="background-color:#FFFFCC;"> <div style="font-size:18px; color:#000000; text-align: center;"> <p> <a id="phone" href="tel:01234567890">電話</a><br> <a id="line" href="https://line.me/xxxxxxxxxxxx">ＬＩＮＥ</a> </p> </div> </body> </html>
上のコードのscriptタグの中のＪＳが動作してくれません。
###ＣｈｒｏｍｅやＥｄｇｅのデバッグツールやオンラインエディタなども使ってみました
デバッグツールでは、使い慣れてないせいもあって、よくわかりませんでした。
オンラインエディタでも、何も変更されませんでした。
ご教授お願いします。
そうですね、すみません。
電話とＬＩＮＥのリンクにフォーカスまたはマウスオーバーすると表示が変わるのが実装したい機能です。
現在はフォーカスしてもマウスオーバーしても、表示が変わりません。
解決したのなら、BAを選ぶなりして質問を閉じましょう。
未解決なら仕方ないですが。
回答1件
0
ベストアンサー
javascript
1line.addEventListener('blur',function(){ 2line.innerText='LINE'（相談専用）'; 3});
ここで引用符の対応が崩れています。
投稿2021/08/13 02:01
総合スコア146018
直りました！
たった一文字を見逃していたのは、とても悔しいです。
今後コードを書くのに気を付けたら、こういうミスがなくなるという方法はあるでしょうか。
質問文のコードを見れば明らかです（色付けが崩れています）。
あなたの回答
tips
プレビュー
