Javascriptのバグ "e.preventDefault（）;"関数ではありません

Question

私の間違いはどこにあるのか分からないので1時間です。さらに、私はそれが愚かなものだと確信しています。とにかく、ここでそれは私のjavascriptのコードです：

var deleteRefsButton = document.getElementsByClassName('refs--item--delete'); 

var deleteRefs = function(e, i){ 
    e.preventDefault(); 
    e.parentNode.classList.add('deleted'); 
    document.getElementById('deletedInput'.i).value = true; 
} 

for (var i=0;i<deleteRefsButton.length;i++){ 
    var button = deleteRefsButton[i]; 
    button.addEventListener('click', deleteRefs(button,i), false); 
} 

そして、ここに私のhtmlスキーム：あなたが見ることができるように、私の目標は、リンクをクリックしてイベントをリッスンする

<div class="refs--item" id="refs1"> 
    <div class="refs--item--text"> 
     content 
    </div> 
    <input type="hidden" name="deleted1" value="false"> 
    <a class="refs--item--delete" href="#">Delete this refs</a> 
</div> 
<div class="refs--item" id="refs2"> 
    <div class="refs--item--text"> 
     content 
    </div> 
    <input type="hidden" name="deleted2" value="false"> 
    <a class="refs--item--delete" href="#">Delete this refs</a> 
</div> 
... 

です（a.refs- -item-delete）、一番上のスクロールを防ぎ、parentNodeに "deleted"クラスを追加し、最後に真の隠し入力にtrueを追加します。

しかし、この現在のコード、何も仕事で、コンソールは言う：

Uncaught TypeError: e.preventDefault is not a function 

だから、多分あなたは私のミスを見ました。

ではJavaScriptの基礎としなければならない、間違ったカップルの事があります

Answer 1

事前にありがとうございます。

addEventListenerを使用する場合は、トリガーしたい機能のインスタンスを渡すと実行されません。

button.addEventListener('click', deleteRefs, false); 

リスナーがトリガーされると、イベントは最初の引数として渡されます。それはpreventDefaultが未定義であることを解決します。

getElementById('deletedInput'.i) 2番目の文字列にiを呼び出そうとしています。それは有効なjavascriptではありません。何がどうなることです：あなたはaddEventListenerでやっているようにあなたは、関数を実行することはできませんので

getElementById('deletedInput' + i); 

しかしiが不定となります。

IDのプレフィックスがdeletedInputの要素がないため、このdocument.getElementById('deletedInput'.i)を実行することはできません。これはquerySelectorで解決できます。これを私の例に加えました。

最後に、forループが0から始まることに注意してください。0の要素がありません。iに1を加えてハンドラをハンドラに渡す必要があります。

あなたのコードを編集しました。このようなことができます。ご質問がある場合はdeveloper.mozilla.orgを参考にしてください。これをコピーして貼り付けても問題ありません。

var deleteRefsButton = document.getElementsByClassName('refs--item--delete'); 
var deleteRefs = function(){ 

    // The arguments object is an Array-like object corresponding to the arguments passed to a function. 
    var i = arguments[0]; 
    var e = arguments[1]; 
    e.preventDefault(); 
    e.currentTarget.parentNode.classList.add('deleted'); 
    document.querySelector('[name="deleted' + i + '"]').value = true; 
} 

for (var i=0; i < deleteRefsButton.length; i++){ 

    var button = deleteRefsButton[i]; 

    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind 
    // .bind will prepend i the the list of arguments passed to deleteRefs 
    button.addEventListener('click', deleteRefs.bind(this, i + 1), false); 
}