HTML5 Button onClick function

Question

My code is very simple, as I am just learning to use JavaScript.

I am trying to make a HTML5 button element perform a simple alert function when clicked on. However, with the following code, the button does nothing.

 function theFunction(){ alert("Hi there"); }

 <button type="button" onlick="theFunction()">Button</button>

Answer 1

It's onclick=func_name not onlick

 function theFunction(){ alert("Hi there"); }

 <button type="button" onclick="theFunction()">Button</button>

Answer 2

Note, however, that HTML is not case-sensitive. Because of its close association with client-side JavaScript, this difference can be confusing. Many JavaScript objects and properties have the same names as the HTML tags and attributes they represent. While these tags and attribute names can be typed in any case in HTML, in JavaScript they typically must be all lowercase. For example, the HTML onclick event handler attribute is commonly specified as onClick in HTML, but it must be referred to as onclick in JavaScript code.

 function theFunction(){ alert("Hi there"); }

 <button type="button" OnClick="theFunction()">Button</button>

Answer 3

You miss c :

<button type="button" onlick="theFunction()">Button</button>
                     //^------------------ change to onclick

Answer 4

There's a little typo. Change onlick to on c lick

Answer 5

Just Change onlick to onclick

 function theFunction(){ alert("Hi there"); }

 <button type="button" onclick="theFunction()">Button</button>

Answer 6

It should be like this:

 function theFunction(){ alert("Hi there"); }

 <button onclick="theFunction()">Click me</button>

Answer 7

You wrongly wrote onclick to onlick. here is the es6 example code.

<button type="button" onclick="clickFunction()">ClickME</button>

let clicka = clickFunction(() => 
 alert("Success")
);

Answer 8

You missed some character from the onclick.

 function theFunction(){ alert("Hi there"); }

 <button type="button" onClick="theFunction()">Button</button>