Как правильно вызвать из массива элемент при нажатии определенной позиции из списка?

Рейтинг: 0Ответов: 1Опубликовано: 25.01.2023

const button = document.querySelector("#btn");
button.addEventListener("click", showTip);

function showTip(e){
    e.preventDefault();
    tip.style.display = "block";
}

const quotes = [
    "Овнов ожидают серьезные перемены.",
    "Для Тельцов год не принесет ничего нового.",
    "Близнецам рекомендуется уделить внимание инвестированию.",
]

const buttons = document.querySelectorAll("button");
buttons.forEach ((btn, index) => {
btn.addEventListener('click', function() {
    par.textContent = quotes[index]
    })
})
<body>
  <div id="top">Гороскоп на 2023 год</div>
  <div id="container">
    <button id="btn">Выберите свой знак зодиака </button> 
    <select id="tip">
      <option disabled>Знак зодиака</option>
      <option>♈ Овен</option>
      <option>♉ Телец</option>
      <option>♊ Близнецы</option>
    </select>
  </div>
  <div>
    <p id="par"></p>
  </div>
  <script src="script.js"> </script>    
</body>

javascript html массивы функции
Источник: Stack Overflow на русском

Ответы

▲ 1

Достаточно сопоставить индекс в select с массивом quotes и взять индекс выбранного option:

const quotes = [
    "",
    "Овнов ожидают серьезные перемены.",
    "Для Тельцов год не принесет ничего нового.",
    "Близнецам рекомендуется уделить внимание инвестированию.",
]

const button = document.querySelector("#tip");
button.addEventListener("change", showTip);

const selectElem = document.getElementById('tip')
function showTip(e){
    e.preventDefault();
    tip.style.display = "block";
    par.textContent = quotes[selectElem.selectedIndex];
}
<body>
  <div id="top">Гороскоп на 2023 год</div>
  <div id="container">
    <button id="btn">Выберите свой знак зодиака </button> 
    <select id="tip">
      <option disabled>Знак зодиака</option>
      <option>♈ Овен</option>
      <option>♉ Телец</option>
      <option>♊ Близнецы</option>
    </select>
  </div>
  <div>
    <p id="par"></p>
  </div>
  <script src="script.js"> </script>    
</body>

Смотрите https://jsfiddle.net/8o1nk3xw/