如何实现JavaScript点击计数器在下拉选单值变更时自动重置为0

解决方案 #

你只需要修改下拉菜单触发的myFunction函数，在里面添加计数器重置逻辑即可，因为你声明的clicks是全局变量，可以直接在该函数内访问修改：

function myFunction() {
  var x = document.getElementById("mySelect").value;
  document.getElementById("demo").innerHTML =  x ;
  // 新增重置计数器逻辑
  clicks = 0;
  document.getElementById("clicks").innerHTML = clicks;
};

完整修改后代码 #

<html>
<head>
<title>script</title>
</head>
<body>
<p>Select a AWRAD from the list.</p>
<select id="mySelect" onchange="myFunction()">
  <option value="">None</option>
  <option value="Al-ASaS">الاساس</option>
  <option value="IztikFar">استغفار</option>
</select>
<p>Your Selected Awrad will be shown here.</p>
<!--Custom Div-->
<div style="width: 200px;height: 100px;border: 2px green solid;border-radius: 5px;" id="div-j">
  <h4 id="demo" style="text-align: center;"></h4>
  <p id="clicks" style="text-align: center;">0</p>
</div>
<!--Custom Div Ends-->
<br>
<script>
function myFunction() {
  var x = document.getElementById("mySelect").value;
  document.getElementById("demo").innerHTML =  x ;
  // 重置计数器
  clicks = 0;
  document.getElementById("clicks").innerHTML = clicks;
};
var clicks = 0;
function onClick() {
  clicks += 1;
  document.getElementById("clicks").innerHTML = clicks; 
};
</script>
<img src="https://mb.burhaniya.pk/wp-content/uploads/2021/08/counter.png" onClick="onClick()" width="70" height="70" alt="计数按钮" />
</body>
</html>

补充说明 #

• 原有代码中冗余的mycount函数和注释掉的重复onClick函数已清理，避免代码冗余
• 给计数显示的p标签添加了初始值0，页面加载时就能看到初始计数

内容的提问来源于stack exchange，提问作者fxxffxx