こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

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

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();
});
}

投稿日時 - 2017-08-11 16:13:51

QNo.9361862

すぐに回答ほしいです

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

ANo.1

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

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

いずれにせよ、if(delBtn !== null)は必要ないでしょう。

投稿日時 - 2017-08-11 18:31:21

補足

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

お礼

delBtnはクリックした時に作成します。

投稿日時 - 2017-08-11 19:31:43