JS document.getElementById ausführen auf Button klicken

Question

Ich bin extrem neu in JavaScript, also bitte mit mir.

Ich habe den folgenden Code:

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

Ich möchte den Code wie nur auf eine Schaltfläche klicken ausgeführt werden. Die Funktion besteht darin, die Benutzereingabedaten am Ende der URL hinzuzufügen und diese URL dann beim Klicken auf die Schaltfläche zu laden.

Ab jetzt, wenn ich die Seite laden, wird es automatisch ausgeführt und geht zur 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

Sie müssen Ihren Code in eine Funktion einfügen und dann die Funktion basierend auf einem Ereignis aufrufen. Hier das Onclick-Ereignis der Schaltfläche. Beachten Sie, dass IDs eindeutig sein müssen. Ändern Sie Ihren Code:

<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

Beachten Sie, dass IDs eindeutig sind, und dass Sie einen Ereignis-Listener für das

<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. Sie haben Eingabefelder zwei verwenden würden, mit der gleichen ID, das ist ein Nein! Ändern Sie den zweiten zu etwas anderem!

2. Setzen Sie Ihren aktuellen Javascript-Code in eine Funktion

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

3. einen Ereignis-Listener Ihrem Container anbringen

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

, die den Trick tun sollten

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>