点击一定数量后执行一个动作，e.g.showing一张图片

Question

我有一个点击计数器和一些功能，我该如何定义，after/with 例如第 10 次单击应执行的功能？使用 HTML、CSS、JavaScript.

试图在 HTML 中的 javascript 中向我的点击计数器函数添加 if 子句，激活一个应该播放声音的函数。但是我做错了，没用-

var clicks = 0;
function counting() {
  clicks += 1;
  document.getElementById("clicks").innerHTML = clicks; 
}


<p>Clicks: <a id="clicks"></a></p>

点击计数器。为什么我不能添加：

if (clicks == 10) playSound();

然后让声音播放使用：

var audio = document.getElementById("audio");
  function playSound() {
  audio.currentTime = 0;
  audio.play();}

音频定义为HTML中的音频ID。

Answer 1

您可能需要使用 eventListener 来计算点击次数。参见：https://www.w3schools.com/js/js_htmldom_eventlistener.asp

如果您使用 jQuery，click() 方法可能会有所帮助。参见：https://www.w3schools.com/jquery/event_click.asp

也可以使用on()方法同时绑定多个事件。参见：https://www.w3schools.com/jquery/event_on.asp

至于在一定数量的点击后执行操作，您可能需要在您的计数器中采用任何一种方法。希望这在某种程度上有所帮助！

Answer 2

我会为点击添加一个事件监听器，在每次点击后它会检查点击计数器是否 == 10；

Var counter = 0

document.getElementById("clicks").addEventListener(‚click‘, () => {
 Counter++

 if (clicks == 10) {
   playSound() 
 }

})

Answer 3

尝试（而不是 == 你可以多次使用 >= 到运行函数）

document.onclick = e=> msg.innerHTML= (++counter==10) ? playSound() : counter ;

function playSound() { return "Play sound/ show picture" }
let counter=0;

<div id="msg">Click somewhere</div>

Answer 4

你的错误 是 "===" 你用的是 "=="

var clicks = 0;
function counting() {
  clicks++;
  document.getElementById("clicks").innerHTML = clicks;   
  if (clicks === 10) {
    playSound();
  }
}
var audio = document.getElementById("audio");
  function playSound() {
    audio.currentTime = 0;
    audio.play();
  }

<p onclick="counting();">Clicks: <a id="clicks"></a></p>
<audio id="audio" controls="">
  <source src="https://www.html-seminar.de/downloads/musikausschnitt-mike-coustic-memories.mp3" type="audio/mpeg">
</audio>

点击一定数量后执行一个动作，e.g.showing一张图片

Performing an action after a certain amount of clicks, e.g.showing a picture

html

javascript

css

counter