on image click run javascript [duplicate]

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
– Kinglish, Commented Jul 10, 2021 at 6:59
What problem are you having? Use addEventListener() to assign a function to run when you click on the image. — Barmar
– Barmar, Commented Jul 10, 2021 at 6:59

Muhammad Atif Akram · Accepted Answer · 2021-07-10 06:59:45Z

0

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

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

answered Jul 10, 2021 at 6:59

Muhammad Atif Akram

1,3351 gold badge6 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

SenKi · Accepted Answer · 2021-07-10 07:27:28Z

0

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

answered Jul 10, 2021 at 7:27

SenKi

531 silver badge5 bronze badges

Comments

Gokul · Accepted Answer · 2021-07-10 07:41:03Z

0

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

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

answered Jul 10, 2021 at 7:41

Gokul

394 bronze badges

Collectives™ on Stack Overflow

on image click run javascript [duplicate]

3 Answers 3

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Linked

Related