preventDefault und übergeben Parameter für click Ereignis Listener

Question

Ich möchte das Submit-Ereignis für eine Schaltfläche zu stoppen, sondern auch einen Parameter in eine Funktion übergeben, die von dem Klick ausgelöst wird. Hier ist, was ich dachte funktionieren könnte:

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

Hier ist der 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> 

ich nicht das HTML ändern kann, kann ich nur die JS bearbeiten. Danke im Voraus!!!

Answer 1

Ihre Funktion übernimmt zwei Parameter function NL(line, event){...} aber Sie es mit nur einem Parameter NL('add new line'); sind aufgerufen wird.

Sie senden das Ereignis nicht an die NL-Funktion.

Dies sollte funktionieren:

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

die event Deklarieren mit 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>