JS document.getElementById execute on Button click

Question

Jestem niezmiernie nowym użytkownikiem JavaScript, więc proszę o mnie.

Mam następujący kod:

<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> 

Chciałbym kod wykonywany dopiero po kliknięciu przycisku. Ta funkcja polega na dodaniu danych wejściowych użytkownika na końcu adresu URL, a następnie po kliknięciu przycisku załaduj ten adres URL.

Od tej chwili, po załadowaniu strony, automatycznie wykonuje się i przechodzi do adresu 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

Musisz zawinąć kod w funkcję, a następnie wywołać funkcję na podstawie zdarzenia. Tutaj zdarzenie onclick przycisku. UWAGA, że identyfikatory muszą być unikalne. Zmienić swój kod do:

<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

Zauważ, że identyfikacyjne są wyjątkowe, i że należałoby użyć detektora zdarzeń dla tego

<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. masz dwa pola wprowadzania z tym samym identyfikatorem, to nie da! Zmień drugi na coś innego!

2. Połóż aktualny kod javascript do funkcji

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

3. Dołączanie detektor zdarzeń do pojemnika

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

To powinno załatwić sprawę

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>