getelementbyid(). Не работает

Question

Я создаю сайт, который, когда я нажимаю и x равен диапазону чисел, воспроизводит аудио, но после того, как я нажимаю один раз, когда x находится между этими числами, я также буду играть, если x не находится в диапазоне. Пожалуйста помоги. Вот мой код. кстати, я не буду использовать jquery, потому что он не работает на хроме.

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

Что делает ваш код является то, что он добавляет слушатель событий щелчка на этом элементе, а затем обработчик нажмите будет вызывать независимо от й значения, потому что у вас нет каких-либо проверок внутри обработчика щелчка.

Решение состоит в том, чтобы создать прослушиватель кликов только один раз и проверить значение 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, так как n истинно, только если x находится между вашими диапазонами.

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

Примечания: Если пользователь нажимает кнопку несколько раз, аудио воспроизводятся несколько раз. Это можно устранить, добавив еще одну переменную, проверяющую, если пользователь уже нажал один раз, Так как я не знаю вашу настройку, то есть должны ли пользователи иметь возможность щелкать, чтобы воспроизводить звук несколько раз подряд (когда он заканчивается один раз подряд) , я не могу предоставить вам решение для этого, не зная.