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.

Monostrophe

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

Yardarm

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>

Lida

Here's a -1 from me for "code-dump", I appreciate your attempt to answer but this doesn't help anyone solve the root problem, I'm happy to change my vote if you better your answer and explain what and why this works. – Mireillemireles

The code in your answer is wrong. You have to remove the brackets in the onclick attribute in order to make it work properly – Yardarm

Answer 3

You need to wrap your code in a function, and then call the function based on an event. Here, the onclick event of the button. NOTE that IDs must be unique. Change your code to:

<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

Huey

Answer 4

Note that ID's are unique, and that you would use an event listener for that

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

Cyclopentane

@Huey - It's a horrible answer, I would downvote it as well. What a tool, using addEventListener when there's an onclick attribute available! – Cyclopentane

I need a towel to soak up the dripping sarcasm. – Huey

Want a good laugh? Get a load of what Connor commented on my answer. – Huey

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>

Sneaky