詳しい人求む！

javascriptで、style undefined と出てエラーになる

解決済

質問者：kotamagokotama
質問日時：2021/09/18 23:23
回答数：2件

お世話になります。JS初心者です。

jsで、「要素を追加し、ある文字が無いときは非表示にする」ということをしたいのですが、コンソールでは何のエラーは出ませんが、動作しません。

ちなみに、
functionを取ったり、16行目の下(let htmlstrApper〜)に
htmlstr.style.display = "none"; を入れると、 style undefined　でエラーになります。

一体どこが悪いのでしょうか？
どなたか、ご教授のほど、どうぞ宜しくお願い致します。

<html>
<body>
<div>
<div class="itemDescription">
<p>テストです。テストです。</p>
<div class="buttonA">
<button type="submit" style="display: block;">ボタン</button>
</div>
</div>
</div>

<script>
function htmlstrCkbtnApper(){
let itemDescription = document.querySelector(".itemDescription").innerText;
let buttonA = document.querySelector(".buttonA");
const htmlstr = '<p style="color:red;font-weight:bold">追加の説明文あああ</p>';
let htmlstrApper = buttonA.insertAdjacentHTML('beforebegin',htmlstr);

if(itemDescription.match(/いいい/) ) {
htmlstr.style.display = "block";
}else{
htmlstr.style.display = "none";
}
}

</script>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： fujillin
回答日時：2021/09/18 23:46

こんばんは

＞コンソールでは何のエラーは出ませんが、動作しません。
ご提示の状態では、関数定義がされているだけの状態なので、実行はされません。

ロードしたときに実行したければ、
　htmlstrCkbtnApper(); //　関数を実行させる。
を入れておくとか。

ボタンを押した際に実行するなら、
document.querySelector('.buttonA button').addEventListener('click', ()=>{
htmlstrCkbtnApper();
});
等として、実行させるなど。
想像するところ、一度だけ実行すれば良さそうですが、上記の記述だと、ボタンを押すたびに関数が呼び出されるので、何度でも繰り返してしまいますのでご注意。

＞style undefined　でエラーになります。
そこは、勘違いが原因ではないかと思われます。
変数 htmlstr は文字列として定義されていますので、styleプロパティはありません。
それなので、エラーになっています。

表示のstyleを設定したければ、DOM要素を取得して設定すれば可能と思います。

- 0
- 件

通報する

この回答へのお礼

早速のご回答ありがとうございます。

できました！
呼び出し忘れてるとか、もう、恥ずかしい限りのミスで申し訳御座いません。
htmlstrに、divのidつけて、DOM要素を取得したら、思っていた通りの挙動ができました。

>変数 htmlstr は文字列として定義されていますので、…
確かに、おっしゃる通り、文字列ですね。これにstyleなんて効くわけないですよね…。そんなことにも気づけない悲しさ。

上記のように設定したら、functionは不要になりましたので^^;、それも消して実行させることにしました。

本当にありがとうございました。

通報する

お礼日時：2021/09/19 10:12

No.2

回答者： fujillin
回答日時：2021/09/19 06:59

No1です。

No1では、ついつい
＞「要素を追加し、ある文字が無いときは非表示にする」
のまま回答してしまいましたが・・・

実際の内容がよくわかりませんけれど、1度だけ実行するスクリプトだと想像しますので、普通なら
　「ある文字が存在したら、要素を追加する」
　（存在しないときはなにもしない）
という内容にすると思われます。
（繰り返し実行するにしても、判断基準がHTMLの記述内容なら、判定結果は常に同じはず）