querySelectorAll javascript [дубликат]

282
15 ноября 2017, 02:57

На данный вопрос уже ответили:

  • Как выбрать все элементы в DOM и сделать их кликабельными 2 ответа

Добрый день! Имеется такой код:

<article>
<div id="input">
  <p>
    <input id="input" />
    <button id="uah" class="active" onclick="currency='uah'; selectCurrency()">UAH</button>
    <button id="usd" class="inactive" onclick="currency='usd'; selectCurrency()">USD</button>
    <button id="eur" class="inactive" onclick="currency='eur'; selectCurrency()">EUR</button>
    <button id="rub" class="inactive" onclick="currency='rub'; selectCurrency()">RUB</button>
  </p>
</div>
</article>

JavaScript для него:

<script>
function selectCurrency() {
  console.log("Selected currency: " + currency);
  document.querySelectorAll("article div#input p button").classList.add("inactive");
  document.querySelectorAll("article div#input p button").classList.remove("active");
  document.querySelector("article div#input p button#" + currency).classList.remove("inactive");
  document.querySelector("article div#input p button#" + currency).classList.add("active");
}

При нажатии на USD вываливается ошибка.

Uncaught TypeError: Cannot read property 'add' of undefined

Не могу понять, что не так?

Answer 1

querySelectorAll возвращает коллекцию элементов очень похожую на массив, чтобы добавить или удалить класс, надо по ней пройтись и каждому элементу добавить. А вы пытаетесь коллекции добавить. Должно быть так

function selectCurrency() { 
  console.log("Selected currency: " + currency); 
  var buttons = document.querySelectorAll("article div#input p button"); 
  for (var i = 0; i < buttons.length; i++) { 
    var el = buttons.item(i); 
    if (el.id !== currency) { 
      el.classList.add("inactive"); 
      el.classList.remove("active"); 
    } else { 
      el.classList.add("active"); 
      el.classList.remove("inactive"); 
    } 
  } 
}
.inactive { 
  background-color: gray; 
} 
 
.active { 
  background-color: green; 
}
<article> 
<div id="input"> 
  <p> 
    <input id="input" /> 
    <button id="uah" class="active" onclick="currency='uah'; selectCurrency()">UAH</button> 
    <button id="usd" class="inactive" onclick="currency='usd'; selectCurrency()">USD</button> 
    <button id="eur" class="inactive" onclick="currency='eur'; selectCurrency()">EUR</button> 
    <button id="rub" class="inactive" onclick="currency='rub'; selectCurrency()">RUB</button> 
  </p> 
</div> 
</article>

ПОСЛЕДНИЕ ВОПРОСЫ
Все вопросы
Подробнее о сайте site-vizitka-kiev.org.ua
ТОП-10
READ ALSO
Получить ячейку таблицы по индексам
javascript

Получить ячейку таблицы по индексам

Скажите, пожалуйста, как можно получить элемент ячейки таблицы (HTMLTableDataCellElement), если я знаю индексы строки и столбца, на пересечении которых...

 337
Ajax форма reset
javascript

Ajax форма reset

Насколько я понимаю, trigger("reset") должен очищать поля формы, после отправкиПочему этого не происходит ?

 288
Как привести к дате строку /Date(-62135575200000)/?
javascript

Как привести к дате строку /Date(-62135575200000)/?

Получаю от сервера данные в таком виде /Date(-62135575200000)/, что это за формат времени? Как из него получить читаемую дату используя javascript?

 282
селекторы js как лучше реализовать
javascript

селекторы js как лучше реализовать

есть селектор

 316