CODEWITHSUNDEEP
javascripthtmlbuttononclick
Tak
Tak

Reputation: 167

how to make an event happen when click a button on HTML by using javascript

I am trying to make HTML print out "Germany" when you click the button. But it is not working correctly. Is there something wrong in my code?

HTML

<input type="button" value="click!" onclick="shuffle();"/>
<div id="output"></div>

Javascript

(function(){
    window.onload = function(){
        alert("welcome to my trip record");
    }
})();

var shuffle = function(){
    var target = document.getElementById("output");
    target.innerHTML = "Germany";
}

Upvotes: 0

Views: 3447

Answers (4)

Jose Marques
Jose Marques

Reputation: 748

You made two mistakes First mistake <input /> this is nothing. Second most common "function ();", the ";" Is wrong

Your corrected code

(function(){
    window.onload = function(){
        alert("welcome to my trip record");
    }
})();

var shuffle = function(){
    var target = document.getElementById("output");
    target.innerHTML = "Germany";
}
<input type="button" value="click!" onclick="shuffle()"/>
<div id="output"></div>

I like to use DOM EventListener

window.onload = function(){
    alert("welcome to my trip record");
}
document.getElementById("myBtn").addEventListener("click", function_t);
function function_t(){
var target = document.getElementById("output");
target.innerHTML = "Germany";
}
 <input type="button" value="click!" id = "myBtn" >
 <div id="output"></div>

Upvotes: 0

selvarajmas
selvarajmas

Reputation: 1643

Try to use addEventListener for make event on button click

document.getElementById("myBtn").addEventListener("click", function(){
    var target = document.getElementById("output");
    target.innerHTML = "Germany";
});

here is the working jsfiddle:https://jsfiddle.net/jxjpzvvz/

Upvotes: 1

TypedSource
TypedSource

Reputation: 708

<button id='btn_click' type="button">Click me!</button>
<div id="output"></div>

use button element for buttons, not input type button. we are not in the time of html 4.0 ;)

(function(){
    window.onload = function(){
        alert("welcome to my trip record");
    }
})();

var shuffle = function(event){
    var target = document.getElementById("output");
    target.innerHTML = "Germany";
}

document.getElementById('btn_click').addEventListener('click', shuffle);

i'm fan of no js in the html tags directly, so i add a listener to the element

Upvotes: 0

Kody R.
Kody R.

Reputation: 2460

Remove the ; from your onclick

<input type="button" value="click!" onclick="shuffle()"/>

Upvotes: 1

Related Questions