JS document.getElementById esegui al clic del pulsante

Question

Sono estremamente nuovo in JavaScript, quindi abbi pazienza con me.

Ho il codice seguente:

<input id="test" name="test" type="text" value="" /> 
<input id="test" type="button" value="Go!" /> 
<script type="text/javascript"> 
    window.location.href="http://www.thenewendurancefitness.com/" + document.getElementById('test').value; 
</script> 

Vorrei che il codice da eseguire solo su un clic del pulsante. La funzione è di aggiungere i dati di input dell'utente alla fine dell'URL e quindi, al clic del pulsante, caricare l'url.

A partire da ora, quando carico la pagina, viene eseguita automaticamente e passa all'URL.

Answer 1

<input id="test" name="test" type="text" value="" /> 
<input id="test2" type="button" onclick="fnc()" value="Go!" /> 
<script type="text/javascript"> 
function fnc(){ 
window.location.href="http://www.thenewendurancefitness.com/" + document.getElementById('test').value; 
} 

</script> 

Answer 2

È necessario avvolgere il codice in una funzione e quindi chiamare la funzione in base a un evento. Qui, l'evento onclick del pulsante. NOTA che gli ID devono essere unici. Modificare il codice per:

<input id="test" name="test" type="text" value="" /> 
<input id="test2" type="button" value="Go!" onclick="foo()" /> 
<script type="text/javascript"> 
function foo(){ 
    window.location.href="http://www.thenewendurancefitness.com/" + document.getElementById('test').value; 
} 
</script> 

jsFiddle example

Answer 3

noti che ID sono unici, e che si dovrebbe utilizzare un listener di eventi per questo

<input id="test" name="test" type="text" value="" /> 
<input id="button" type="button" value="Go!" /> 

<script type="text/javascript"> 
    document.getElementById('button').addEventListener('click', function() { 
     var val = document.getElementById('test').value; 
     window.location.href="http://www.thenewendurancefitness.com/" + val; 
    }, false): 

</script> 

Answer 4

1. Si hanno due campi di input con lo stesso ID, è un no! Cambia il secondo in qualcosa di diverso!

2. Metti il ​​tuo codice JavaScript corrente in una funzione di

   function clickHandler(event) { 
       // Your code... 
   } 
   

3. Fissare un listener di eventi per il vostro contenitore

   var myContainer; 
   
   // assign element from DOM 
   myContainer = document.getElementById(ID_OF_CONTAINER); 
   
   // attach event handler 
   myContainer.addEventListener('click', clickHandler); 
   

Questo dovrebbe fare il trucco

Answer 5

<form onsubmit="return submit()"> 
    <input id="test" name="test" type="text" value="" /> 
    <input id="submit" type="submit" value="Go!" /> 
</form> 
<script type="text/javascript"> 
function submit() { 
    location.href="http://www.thenewendurancefitness.com/"+document.getElementById('test').value; 
} 
</script>