Как я могу использовать логическое значение для переключения видимости изображений?

ProgramBox

Как я могу использовать логическое значение для переключения видимости изображений?

Post author:admin
Запись опубликована:17 мая, 2023
Post category:Вопросы по программированию

#javascript

Вопрос:

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

 function myStats(){ 
counter = true;
    if(counter == true){	
        document.getElementById('stat').style.display = 'block';
    }
	if(counter == false){
	    document.getElementById('stat').style.display = 'none';
 	}
}

 <!DOCTYPE html>
<html>
<head>
<style> 
body{background-color: #A9A9A9;}
</style> 
</head>
<body>
<p> Dallas Fuel </p>

<center><img id="stat" src="Images/buttonLA.png" style="display:none;"/></center>
<button onclick="myStats()">Player 1</button>
<h3 id="var"></h3>
</body>
</html>

Я понимаю, что это, очевидно, не сработает, потому что я не переключаю логическое значение, но это то, с чем я ищу помощи.

1. вы сбрасываете счетчик при каждом вызове myStats .

2. Прочитайте код вслух. Щелкните, выполните myStats. В myStats он устанавливает счетчик в значение true, а затем я проверяю, имеет ли значение counter значение true.

Ответ №1:

Создайте класс css с именем hidden , затем используйте classList.toggle(). При нажатии кнопки переключите класс на изображении.

Это можно сделать следующим образом:

 document.querySelector('button').addEventListener('click', myStats)

function myStats() {
  document.getElementById('stat').classList.toggle('hidden')
}

 .hidden { display: none; }

 <center><button>Player 1</button></center>
<center><img id="stat" src="https://via.placeholder.com/150" class="hidden"></center>

1. Большое вам спасибо!

2. Что бы я изменил, если бы хотел, чтобы это происходило только при нажатии определенной кнопки?

3. вы бы переключились querySelector('button') на определенную кнопку, такую querySelector('button.my-class') как или querySelector('button#my-id')

Ответ №2:

Я отредактировал ваш фрагмент, чтобы включить там переключатель, и сделал так, чтобы функция myStats() не устанавливалась counter = true при каждом нажатии на нее. Кажется, работает нормально. Я также поднял объявление переменной counter над объявлением этой функции, поскольку именно там должен быть ваш переключатель, представленный counter = !counter .

 let counter = true;
function myStats(){ 
counter = !counter;

    if(counter == true){	
        document.getElementById('stat').style.display = 'block';
    }
	if(counter == false){
	    document.getElementById('stat').style.display = 'none';
 	}
}

 <!DOCTYPE html>
<html>
<head>
<style> 
body{background-color: #A9A9A9;}
</style> 
</head>
<body>
<p> Dallas Fuel </p>

<center><img id="stat" src="Images/buttonLA.png" style="display:none;"/></center>
<button onclick="myStats()">Player 1</button>
<h3 id="var"></h3>
</body>
</html>

Ответ №3:

Логическая переменная должна находиться вне функции, чтобы ее значение не сбрасывалось при каждом вызове функции. Также вы должны переключить значение этой логической переменной с true на false и наоборот. Ознакомьтесь с моим решением. Надеюсь, это поможет!

 var isImageShouldBeVisible = true;

function toggleImageVisibility() {
  isImageShouldBeVisible = !isImageShouldBeVisible;
  
  if (isImageShouldBeVisible) {	 
    document.getElementById('stat').style.display = 'block';
  } else {
    document.getElementById('stat').style.display = 'none';
  }
}

 <!DOCTYPE html>
<html>
<head>
<style> 
body{background-color: #A9A9A9;}
</style> 
</head>
<body>
<p> Dallas Fuel </p>

<center><img id="stat" src="Images/buttonLA.png" style="display:block;"/></center>
<button onclick="toggleImageVisibility()">Player 1</button>
<h3 id="var"></h3>
</body>
</html>

Ответ №4:

Это потому, что counter остается неизменным на протяжении всего кода. Вам нужно добавить counter = !counter в конце вашей функции.
Я бы сделал это с помощью троичных операторов. Необходимо Boolean просто проверить style.display

 let elm = document.getElementById('stat');
function myStats(){ 
  let {display} = elm.style;
  elm.style.display = display === 'none' ? 'block' : 'none';
}

 body{background-color: #A9A9A9;}

 <p> Dallas Fuel </p>

<center><img id="stat" src="Images/buttonLA.png" style="display:none;"/></center>
<button onclick="myStats()">Player 1</button>
<h3 id="var"></h3>