JavaScript对元素/值的每个更改列表计数为0(从0开始)



你们能帮助我几乎做了一切,但当我改变值计数器应该是零(基本上是一个计数器从JavaScript中,当你点击图像它应该在计数器中计数为1,当我改变列表上的值时,它应该从一开始就变成0)

<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;"></p>

</div>

<!--Custom Div Ends-->

<br>
<!--<p id="clicks"></p><br>-->
<script>
function myFunction() {
var x = document.getElementById("mySelect").value;
document.getElementById("demo").innerHTML =  x ;
};
var clicks = 0;
function onClick() {
clicks += 1;
document.getElementById("clicks").innerHTML = clicks; 
};

</script>

<!--New Function-->
<script>
function mycount() {
var x = document.getElementById("mySelect").value;
document.getElementById("demo").innerHTML = "You selected: " + x;
}
</script>




<script>
//     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" />
<!--<p>Clicks: <a id="clicks">0</a></p>-->



</body>
</html>

您只需在使用select下拉菜单时将点击设置为0并呈现它们。

var clicks = 0;
// extracted this for DRYness
function displayClicks() {
document.getElementById("clicks").innerHTML = clicks;
}
function onSelect() {
var x = document.getElementById("mySelect").value;
document.getElementById("demo").innerHTML = x;
// simply reset the clicks and rerender them
clicks = 0;
displayClicks();
};

function onClick() {
clicks += 1;
displayClicks();
};
function mycount() {
var x = document.getElementById("mySelect").value;
document.getElementById("demo").innerHTML = "You selected: " + x;
}
<html>
<head>
<title>script</title>
</head>
<body>

<p>Select a AWRAD from the list.</p>
<select id="mySelect" onchange="onSelect()">
<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;"></p>

</div>

<!--Custom Div Ends-->

<br>
<!--<p id="clicks"></p><br>-->





<img src="https://mb.burhaniya.pk/wp-content/uploads/2021/08/counter.png" onClick="onClick()" width="70" height="70" />
<!--<p>Clicks: <a id="clicks">0</a></p>-->


</body>
</html>

最新更新