Add function to img button

Question

I would like to know how to add function to an image button - this code is different to other posts like mine is based around input type img not img src

*<input type="image" src="llama.png" name="saveForm" class="btTxt submit" id="saveForm" />*

I am trying to make the image into a Clicker meaning I am using a clickFunction to do so. Any suggestions?

Possible duplicate of [Javascript - onclick](https://stackoverflow.com/questions/7923350/javascript-onclick) — Thomas Darvik, May 07 '18 at 13:37
Possible duplicate of [How do I add a .click() event to an image?](https://stackoverflow.com/questions/7374562/how-do-i-add-a-click-event-to-an-image) — kanwal019, May 07 '18 at 13:50
Possible duplicate of [Javascript, add onclick event programmatically](https://stackoverflow.com/questions/13229208/javascript-add-onclick-event-programmatically) — Kakul Sarma, May 09 '18 at 09:34

Mamun · Accepted Answer · 2018-05-07T13:40:58.670

2

Try with addEventListener():

document.getElementById('saveForm').addEventListener('click', function(){
  console.log('you have clicked', this.name);
});

<input type="image" src="llama.png" name="saveForm" class="btTxt submit" id="saveForm" />

edited May 07 '18 at 13:40

answered May 07 '18 at 13:34

Mamun

66,969
9
47
59

Thank you I'm new to javascript/html – Nova Bot May 07 '18 at 13:37
@NovaBot, you are most welcome. Does this answer your question? – Mamun May 07 '18 at 13:38

score 1 · Answer 2 · answered May 07 '18 at 13:36

1

You can listen to the click event by doing something like:

function foo() {
  console.log("I am called");
}

<input type="image" src="llama.png" name="saveForm" onclick="foo()" class="btTxt submit" id="saveForm" />

answered May 07 '18 at 13:36

Ashish Ranjan

12,760
5
27
51

score 1 · Answer 3 · answered May 07 '18 at 13:37

<input type="image" src="llama.png" name="saveForm" class="btTxt submit" id="saveForm" onclick="callFunction() />

<script>
callFunction(){
  alert('Calling');
}

</script>

Or You can user EventListener

document.getElementById('saveForm').addEventListener('click', function(e){
  alert('Calling');
});

score 0 · Answer 4 · answered May 07 '18 at 13:42

0

Here is the simple solution using onclick event

 function myImg() {
  alert("clicked");
}

 <input type="image" name="saveForm"  src="xyz.png" onclick="myImg()" class="btTxt submit" id="saveForm" />

answered May 07 '18 at 13:42

Sai Manoj

3,809
1
14
35

Add function to img button

4 Answers4