Question

我正在建立一个网站，每当我点击并且x等于一系列数字时，它就会播放音频，但是当我在这些数字之间点击一次后，如果x不在范围内，我也会播放。请帮忙。这是我的代码。顺便说一下，我不会使用jquery，因为它不适用于chrome。

    if(x<=1200&&x>=600){
    var n=true;
    };
    if(x<=1200&&x>=600&&n==true){
    document.getElementById('a').onclick = function(){
    audio.play();
    n=false;    
        }
    }
    else{n=false}

Answer 1

你的代码所做的是它在该元素上添加了一个click事件监听器，然后点击处理程序将触发，无论你的x值如何，因为你没有任何检查里面点击处理程序

解决方案是只创建一次点击侦听器，并检查其中的x值。像这样：

document.getElementById('a').onclick = function(){
  if(x <= 1200 && x >= 600 && n == true) {
    audio.play();
    n = false;    
  }
}

看到这个（我用div突出显示取代了音频播放，但原理相同）：

var r = document.getElementById('r');
var n = true;
var x = 1000;
document.getElementById('a').onclick = function(){
  if(x <= 1200 && x >= 600 && n == true) {
    r.className = 'playing';
    n = false;
    printN();
    setTimeout(function(){
      r.className = '';
    }, 2000);
  }
}

function toggleN(){n = !n;printN()}
function printN(){document.getElementById('n').textContent = 'n is set to ' + n;}
function randomizeX(){x = Math.floor(Math.random() * 1200);printX()}
function printX(){document.getElementById('x').textContent = 'x equals ' + x;}

#r {display: inline-block; width: 50px; height: 50px; background: #ccc; transition: background 1s linear;}
#r.playing {background: green}

<button id="a">Hit me</button><br><br>
<div id="r"></div>
<p id="x">x equals 1000</p>
<p id="n">n is set to true</p>
<button onclick="toggleN()">Toggle n</button>
<button onclick="randomizeX()">Randomize x</button>

Answer 2

我不太确定你要做什么，但是请客人：

if(x<=1200&&x>=600){
    var n=true;
    var clicked = false;
    };
    if(x<=1200&&x>=600&&n==true || clicked==true){
    document.getElementById('a').onclick = function(){
    audio.play();
    n=false;
    clicked = true;
        }
    }
    else{
        n=false;
        clicked = false;
   }

Answer 3

如果我理解正确的话，这应该做你想要的。

没有理由多次检查x +检查n，因为如果x在你的范围之间，则n仅为真。

var ab =  document.getElementById('a');
var n = false;

if( x <= 1200 && x >= 600 ){
  n = true; //If x is within range.
} else {
  n = false; //Reset when x goes out of range.
}

ab.onclick = function(){
  if(n){
    audio.play();
  }
}

注意：如果用户多次点击该按钮，音频播放了好几次。这可以通过添加另一个变量来修复，如果用户已经点击过一次，由于我不知道你的设置，即用户是否能够连续几次点击播放音频（当它完成播放一次）时，我无法为你提供解决方案。

getelementbyid（）。点击不工作

3 个答案: