JS document.getElementById execute on Button click

Question

I am extremely new to JavaScript, so bear with me.

I have the following 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>

I would like the code to only be executed upon a button click. The function is to add the user input data to the end of the url and then upon the button click, load that url.

As of now, when I load the page, it automatically executes and goes to the url.

Answer 1

1. You have two input fields with the same ID, that's a no go! Change the second one to something different!

2. Put your current javascript code into a function

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

3. Attach an event listener to your container

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

That should do the trick

Answer 2

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