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

注：如果用戶點擊該按鈕幾次， 音頻播放幾次。 這可以通過添加另一個變量來檢查，如果用戶已經點擊過一次， 因爲我不知道你的設置，即用戶能夠點擊連續多次播放音頻（當它完成播放一次） ，我無法爲您提供解決方案，而無需知道。