getelementbyid（）。click not working

Question

我正在制作一个网站，只要我点击并且x等于一个数字范围，它就会播放音频，但是当我在这些数字之间点击一次后，我还会播放if 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;  
    } 
} 

---

看到这个（我已经更换了音频与格高亮玩，但它的原理相同）：

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(); 
    } 
} 

注：如果用户点击该按钮几次， 音频播放几次。 这可以通过添加另一个变量来检查，如果用户已经点击过一次， 因为我不知道你的设置，即用户能够点击连续多次播放音频（当它完成播放一次） ，我无法为您提供解决方案，而无需知道。