Using the Input tag as a button

Question

in my HTML file, I am using an image to represent a button which the player can click. This button works as a way to load into the game. When the user clicks it, I want the webpage to run my JavaScript file.

Currently, the input tag is handled like this:

<input type="image" src="Images/start.jpg" height='200' width='350' alt='Something went wrong loading the images. Update your Internet plugins and try again.'/>

I've checked on quite a few websites, but the ones I've seen have told me that onclick (what I assume I could use) is a button tag aspect only.

Am I wrong about this? What would be the simplest way to execute my script?

Answer 1

onclick works fine with type="image" too. You can do that like this:

HTML:

<input type="image" src="Images/start.jpg" height='200' width='350' alt='Something went wrong loading the images. Update your Internet plugins and try again.' onclick="yourScript();"/>

JS:

function yourScript()
    {
        //your JS here
    }

Answer 2

Adding a click handler to an input element of type image works just fine.

---

Demo

 function INIT() { alert('INITIALIZE GAME'); } function UPDATE() { alert('UPDATE GAME'); } document.getElementById("startGame").addEventListener("click", function() { INIT(); UPDATE(); }); 

 <input type="image" src="https://i.stack.imgur.com/mRsBv.png?s=328&g=1" height='100' width='100' alt='Something went wrong loading the images. Update your Internet plugins and try again.' id="startGame" /> 

Answer 3

如果要在用户单击图像时在Javascript页面中运行函数，则必须使用以下事件onClick：“ yourfunctionname（）”并编写以下代码：

<input type="image" src="Images/start.jpg" height='200' width='350' alt='Something went wrong loading the images. Update your Internet plugins and try again.'onClick:"yourfunctionname()"/>