在图像上单击运行 javascript [重复]答案

【问题标题】：on image click run javascript [duplicate]在图像上单击运行 javascript [重复]
【发布时间】：2021-07-10 15:41:03
【问题描述】：

我有以下图片标签：

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

以及下面的 div 标签：

<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>

我想在单击图像时运行特定的 java 脚本，它会隐藏 div 并在再次单击时将其显示回来

【问题讨论】：

您认为这会如何实现？你有没有尝试过？
你有什么问题？使用addEventListener() 分配一个函数，当您单击图像时运行。

标签： javascript html css

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

你有这个：

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

可以通过添加事件处理程序来执行Javascript函数，如下所示：

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

这个函数可以在同一个 html 文件中包含在一个标签中，也可以从外部文件中调用。

来源：https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick

【讨论】：

【解决方案3】：

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

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

【讨论】：