Про JavaScript основы [дубликат]

107
15 декабря 2021, 01:40
На этот вопрос уже даны ответы здесь:
Почему не работает innerHtml? (2 ответа)
Закрыт 2 года назад.

Прошу помогите, почему не работает код (всегда выдает только false). И еще прошу совет - как правильнее найти button в такой ситуации, по тегу думаю не очень, но по классу не получилось. 

<div class="container">
    <span class="question">
        Футбольный клуб из этого города:
    </span>
    <h1 class="city">
        Мадрид
    </h1>
    <div class="btns">
        <button class="btn" onclick="btn()">Ювентус</button>
        <button class="btn" onclick="btn()">Челси</button>
        <button class="btn" onclick="btn()">Реал</button>
        <button class="btn" onclick="btn()">Бавария</button>
    </div>
</div>
<script>
    function btn() {
        let city = document.getElementsByTagName("Button").innerText;
        if (city === "Реал"){
            alert(true);
        }else{
            alert(false);
        }
    }
</script>
Answer 1

советую прочитать про делегирование, краткая запись if

так же старайтесь не писать обработчики функций прямо в HTML документе

const btns = document.querySelector('.btns'); // выбираем родителя 
 
btns.addEventListener('click', function(e) { // добавляем родителю событие клика 
  const btn = e.target.closest('.btn'); // след. 2 строки проверяют, кликнули ли мы на кнопку (.btn), если нет, то ничего не делаем 
 
  if (!btn) return; 
 
  btn.textContent.toLowerCase() === 'реал' ? alert(true) : alert(false); // брать текст лучше через textContent, переводим его в нижний регист, если он совпадает с 'реал' выводим соответсвующий ответ, some ? true : false - краткая запись if 
});
<div class="container"> 
  <span class="question"> 
        Футбольный клуб из этого города: 
    </span> 
  <h1 class="city"> 
    Мадрид 
  </h1> 
  <div class="btns"> 
    <button class="btn">Ювентус</button> 
    <button class="btn">Челси</button> 
    <button class="btn">Реал</button> 
    <button class="btn">Бавария</button> 
  </div> 
</div>

READ ALSO
vue.js рендерит компонент
javascript

vue.js рендерит компонент

Возникает проблема с рендерингом

 110
Построить список из масива
javascript

Построить список из масива

Не могу совладать с задачей, прошу Вашей помощи!

 206
Как правильно переопределить метод
javascript

Как правильно переопределить метод

У меня есть класс Point в котором существует метод showPoints() для вывода информации о точке с координатами и установкой координаты x и yСоздать...

 191
Как правильно &#39;перехватить&#39; событие?
javascript

Как правильно 'перехватить' событие?

У меня есть div, в котором распологаются img и aНужно вызвать событие при клике по любой области этого элемента: и по пустой, и по тем, где расположены...

 129