on image click run javascript

Question

I have the following image tag:

<img src="notification.png" class="notif-btn">

and the following div tag:

<div class="container-submit" id="not-add">
            
    <!--<i class="notif-btn fas fa-bell fa-10x"><a href="comingsoon.html"></a></i>-->
    <label for="" class="close-btn fas fa-times"></label>
    <div class="header">
        <h3><span class="blue">Get</span> <span class="green">Notified</span></h3>
    </div>
    <div class="main">
        <form>
            <span>
                <i class="fas fa-phone-square-alt"></i>
                <input type="tel" placeholder="Mobile No" name="">
            </span><br>
            <span>
                <i class="fa fa-user"></i>
                <input type="text" placeholder="Name" name="name">
            </span><br>
            <span>
                <i class="fas fa-envelope"></i>
                <input type="email" placeholder="Email" name="email">
            </span><br>
            <button class="button" type="submit">Submit</button>
        </form>
    </div>
</div>

I want to run a specific java script when clicked on the image it hides the divs and displays it back when clicked again

How do you imagine that could be done? Have you tried something? — Kinglish, Jul 10 '21 at 06:59
What problem are you having? Use `addEventListener()` to assign a function to run when you click on the image. — Barmar, Jul 10 '21 at 06:59

score 0 · Answer 1 · answered Jul 10 '21 at 06:59

0

<img src="image.png" onclick="onClickOnImage()" alt=""/>

<script>
  function onClickOnImage(){
    //add your business logic here
  }
</script>

answered Jul 10 '21 at 06:59

Muhammad Atif Akram

1,204
1
4
12

score 0 · Answer 2 · answered Jul 10 '21 at 07:27

You have this:

<img src="notification.png" class="notif-btn">

It can be made to execute Javascript functions by adding an event handler, like this:

<img onclick="yourFunction()" src="notification.png" class="notif-btn">

This function can be either in the same html file enclosed in a tag or called from an external file.

Source: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick

score 0 · Answer 3 · answered Jul 10 '21 at 07:41

0

<img src="image.png" onclick="onImageClick()"/>

<script>
  function onImageClick(){
    //add logic 
  }
</script>

answered Jul 10 '21 at 07:41

Gokul

39
3

on image click run javascript

3 Answers3