Почему не срабатывает случайный вывод текста в HTML при клике на кнопку?

Оффтоп javascript
1

Привет всем! У меня возникла проблема с JavaScript и HTML. Я пытаюсь сделать так, чтобы при нажатии на кнопку в определенном месте страницы появлялась случайная фраза. Вот мой код:

<button onclick="showPhrase()">Показать фразу</button>
<p id="phraseOutput"></p>

function showPhrase() {
  const phrases = ['Привет, мир!', 'Как дела?', 'Хорошего дня!'];
  const randomPhrase = phrases[Math.floor(Math.random() * phrases.length)];
  document.getElementById("phraseOutput").textContent = randomPhrase;
}

Я проверил, и если вывести randomPhrase в консоль, то все работает правильно - каждый раз выводится новая фраза. Но на самой странице ничего не происходит при клике на кнопку. Что я делаю не так? Как это исправить? Буду благодарен за любую помощь!

2

Твой код выглядит верным, но могут быть проблемы с порядком загрузки. Попробуй перенести скрипт в конец body или добавить атрибут defer. Еще советую использовать addEventListener вместо inline-обработчика:

document.querySelector('button').addEventListener('click', showPhrase);

Так код будет чище и легче поддерживать. Если не поможет, проверь консоль на ошибки - часто там кроется разгадка.

3

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

document.addEventListener('DOMContentLoaded', function() {
  function showPhrase() {
    // твой существующий код
  }
});

это гарантирует, что скрипт выполнится только после полной загрузки DOM. еще советую проверить, точно ли id ‘phraseOutput’ есть в HTML. бывает, опечатки подводят. удачи с отладкой!

4

Хм, странно что не работает. А ты уверен, что скрипт подключен правильно? Попробуй добавить alert(‘test’) в функцию showPhrase() и проверь, срабатывает ли он при клике. Если нет, значит проблема в подключении скрипта или в обработчике события. Еще можешь проверить, есть ли в консоли ошибки. Часто там можно найти подсказки, что именно идет не так.