preventDefault并为点击事件监听器传递参数

Question

我想停止按钮的提交事件，但还要将参数传递到由点击触发的函数中。这是我认为可以工作：

function NL(line, event){ 
    event.preventDefault(); 
    document.getElementsByClassName('new-line')[1].innerHTML=line; 
} 
document.getElementsByClassName('new-line')[0].addEventListener('click', function(){NL('add new line');}); 

这里的HTML：

<form class='myform'> 
    <div class='form-block'> 
    <span class='line'>1</span> 
    <button class='new-line'>New Line</button> 
    <button class='new-line'>New 2nd Line</button> 
    </div> 
</form> 

我不能改变的HTML，我只能编辑JS。提前致谢！！！

Answer 1

你的函数接受两个参数function NL(line, event){...}但你只有一个参数NL('add new line');调用它。

您没有将事件发送到NL功能。

这应该工作：

function NL(line, event){ 
    event.preventDefault(); 
    document.getElementsByClassName('new-line')[1].innerHTML=line; 
} 
document.getElementsByClassName('new-line')[0].addEventListener('click', function(event){ 
    NL('add new line', event); 
}); 

Answer 2

function NL(line, event) { 
 
    event.preventDefault(); 
 
    document.getElementsByClassName('new-line')[1].innerHTML = line; 
 
} 
 
document.getElementsByClassName('new-line')[0].addEventListener('click', function(event) { 
 
    NL('add new line', event); 
 
});

<form class='myform'> 
 
    <div class='form-block'> 
 
    <span class='line'>1</span> 
 
    <button class='new-line'>New Line</button> 
 
    <button class='new-line'>New 2nd Line</button> 
 
    </div> 
 
</form>

Answer 3

声明event与addEventlistener()

function NL(line, event){ 
 
    event.preventDefault(); 
 
    document.getElementsByClassName('new-line')[1].innerHTML=line; 
 
} 
 
document.getElementsByClassName('new-line')[0].addEventListener('click', function(){NL('add new line',event);});

Here's the HTML: 
 

 
<form class='myform'> 
 
    <div class='form-block'> 
 
    <span class='line'>1</span> 
 
    <button class='new-line'>New Line</button> 
 
    <button class='new-line'>New 2nd Line</button> 
 
    </div> 
 
</form>