如何仅在JavaScript中单击按钮时执行操作

Posted 2021-04-08

我已经创建了一个带有动作功能的按钮，如下所示，但在单击动作按钮之前会触发警报消息（单击我）。如何仅在单击按钮（单击我）时才显示警报消息，而不是在下拉选项值中选择“一个”时。

<p align="center">
    <button style="height:50px;width:100px" onclick"=dropdownChange();">click me</button>
</p>

<p align="right">
    <select dir="rtl" name="test2" id="experience" onchange="dropdownChange()" >
        <option value="one"> one</option>
        <option value="five">five</option>
        <option value="six">six</option>
        <option value="seven">seven</option>
        <option value="" disabled selected>choose</option>
    </select>
    <font size="3"> number of experience</font>
</p>

<script>
function dropdownChange() {
    var experience=document.getElementById("experience").value;

    if(experience==="one") {
        alert("ok");
        document.getElementById('experience').value = "";
    }
}
</script>

答案

  <p align="center"><button style="height:50px;width:100px" onclick= 
dropdownChange();>click me </button></p>

<p align="right"><select dir="rtl" name="test2" id="experience" 
 >

    <option value="one"> one</option>
    <option value="five">five</option>
    <option value="six">six</option>
    <option value="seven">seven</option>
    <option value="" disabled selected>choose</option>

    </select> <font size="3"> number of experience</font>

   </p>

    <script>
     function dropdownChange() { 
        var experience=document.getElementById("experience").value;
        if(experience==="one")    {
        alert("ok");
        document.getElementById('experience').value = "";
      } 
  }

这应该可以解决问题

另一答案

嗨，你忘了“下拉前后改变（）。

<button style =“height：50px; width：100px”onclick =“dropdownChange（）;” >点击我</ button>

另一答案

您的代码没有任何问题，它可以正常工作，如下所示。发布更多代码，问题出在其他地方。

function dropdownChange() 
{
  var age = document.getElementById('age').value;
  var major = document.getElementById('major').value;
  var experience = document.getElementById('experience').value;

     if ( age == "" || major == "" || experience == "" ) 
      alert("fields cannot be empty!");
     else
      alert("Age: " + age + "
Major: " + major + "
Experience: " + experience);
 } 

<!-- Sample elements -->
<input type="text" id="age" value="99" />
<input type="text" id="major" value="Physics" />
<input type="text" id="experience" value="Hmm" />


<p align="center"><button style="height:50px;width:100px"onclick="dropdownChange();"  >click me </button></p>

以上是关于如何仅在JavaScript中单击按钮时执行操作的主要内容，如果未能解决你的问题，请参考以下文章

Javascript/jQuery 仅在浏览器后退/前进按钮单击时检测哈希更改

Android - 仅在 AsyncTask 未完成时单击按钮时显示进度对话框

Javascript - 仅在 DOM 中可见 div 时播放音频

如何在单击输入按钮时提交表单以及执行 javascript 函数？

如何在动态操作中单击按钮时调用Oracle APEX中的javascript函数？

仅在单击指定按钮时如何启动 DropDownList SelectedIndexChanged 事件？