-PR-
締切済み

イベントリスナーがうまくいかない

  • すぐに回答を!
  • 質問No.9361862
  • 閲覧数93
  • ありがとう数2
  • 気になる数0
  • 回答数1
  • コメント数0

お礼率 64% (171/265)

delBtnがない場合にイベントリスナーを読み込むとエラーが出てその後の処理が行われないため
下記のようにあった場合のみ予約するようにしたところ今度はクリックしても実行されない問題が起きました。

読み込み時は、エラーにならないようにし、かつボタンを押したときに要素を削除するようにするにはどうしたらよいでしょうか?

var Result = document.getElementsByClassName('Result')[0].innerHTML = '<span class="u-mr-1rem">あああああ</span><input id="DelBtn" type="button" value="削除">;

var Result = document.createElement('p');
BtnWrap.appendChild(Result);
Result.classList.add('Result u-mtb-1rem');

var delBtn = document.getElementById('DelBtn');

if(delBtn !== null) {
delBtn.addEventListener('click', function() {
document.getElementsByClassName('Result')[0].remove();
});
}
通報する
  • 回答数1
  • 気になる
    質問をブックマークします。
    マイページでまとめて確認できます。

回答 (全1件)

  • 回答No.1
レベル10

ベストアンサー率 66% (70/106)

ページ読み込み時からdelBtnが存在しているなら、読み込まれていないDOM要素を取得しようとするのでエラーになっている可能性が高いです。
document.addEventListener('DOMContentLoaded', function(){
 // delBtnのDOM要素取得、イベントリスナ予約などの処理
});
で問題なく動くと思います。

もし、ページ読み込み時には存在していないが、何らかのイベントによってdelBtnが存在するようになるのなら、その「何らかのイベント」をトリガーとしてdelBtnの要素を取得、イベントリスナを予約すれば良いと思われます。

いずれにせよ、if(delBtn !== null)は必要ないでしょう。
補足コメント
okweb12345

お礼率 64% (171/265)

document.addEventListener('DOMContentLoaded', function(){
var delBtn = document.getElementById('memoDelBtn');

delBtn.addEventListener('click', function() {
document.getElementsByClassName('createResult')[0].remove();
});

});


上記のようにしたところ確かにエラーは出なくなり削除は出来たのですが、
今度は削除後にもう一度textareaにテキストを入れて削除ができないです。

もしかするとDOMContentLoadedとは要素の読み込み時に一回だけ実行するという事なのでしょうか?

もう少し調べてみます。

できれば入れて、textareaの下にその内容を表記して、削除して、
をずっと繰り返し出来るようにしたいです・
投稿日時 - 2017-08-12 11:28:09
お礼コメント
okweb12345

お礼率 64% (171/265)

delBtnはクリックした時に作成します。
投稿日時 - 2017-08-11 19:31:43


このQ&Aで解決しましたか?
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,500万件のQ&Aを分析して最適な回答をご提案します。

こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-
-PR-

特集


抽選で合計100名様にプレゼント!

ピックアップ

ページ先頭へ