Найти необходимый блок на странице по атрибуту, а после вывести содержимое одного из его атрибутов

Question

Задача такая:
При обновлении страницы необходимо находить элемент option с атрибутом selected и выводить содержимое его атрибута data-symbol
При этом, надо учитывать, что есть 2 списка и надо работать с элементами option лишь из списка с id="select_currency_from"

HTML:

<select id="select_currency_from" class="hidden">
<option selected="" value="btc" data-symbol="BTC" data-sub="">Bitcoin</option>
<option value="eth" data-symbol="ETH" data-sub="">Ethereum</option>
<option value="usdt" data-symbol="USDT" data-sub="ERC20">Tether (ERC20)</option>
<option value="ltc" data-symbol="LTC" data-sub="">Litecoin</option>
<option value="xmr" data-symbol="XMR" data-sub="">Monero</option>
</select>

JavaScript:

<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  let currFrom = document.querySelectorAll('#select_currency_from option[selected]');
  let currFromDone = currFrom.getAttribute('data-symbol');
  console.log(currFromDone);
});
</script>

В консоль мне выводит "Uncaught TypeError: currFrom.getAttribute is not a function"
Есть вероятность возникновения ошибок из-за того, что я задаю слишком сложный селектор, к примеру, если я захочу найти элемент с id по document.getElementById и после применю на него getAttribute, то подобной ошибки не возникнет

Answer 1

Пример 1

querySelectorAll --> querySelector

let currFrom = document.querySelector('#select_currency_from option[selected]');
let currFromDone = currFrom.getAttribute('data-symbol');
console.log(currFromDone);

<select id="select_currency_from" class="hidden">
  <option selected="" value="btc" data-symbol="BTC" data-sub="">Bitcoin</option>
  <option value="eth" data-symbol="ETH" data-sub="">Ethereum</option>
  <option value="usdt" data-symbol="USDT" data-sub="ERC20">Tether (ERC20)</option>
  <option value="ltc" data-symbol="LTC" data-sub="">Litecoin</option>
  <option value="xmr" data-symbol="XMR" data-sub="">Monero</option>
</select>

Пример 2

let currFrom = document.querySelectorAll('.select-currency option[selected]');
currFrom.forEach(item => {
  let currFromDone = item.getAttribute('data-symbol');
  console.log(currFromDone);
})

<select class="select-currency">
  <option selected="" value="btc" data-symbol="BTC" data-sub="">Bitcoin</option>
  <option value="eth" data-symbol="ETH" data-sub="">Ethereum</option>
  <option value="usdt" data-symbol="USDT" data-sub="ERC20">Tether (ERC20)</option>
  <option value="ltc" data-symbol="LTC" data-sub="">Litecoin</option>
  <option value="xmr" data-symbol="XMR" data-sub="">Monero</option>
</select>

<select class="select-currency">
  <option selected value="eth" data-symbol="ETH" data-sub="">Ethereum</option>
  <option value="usdt" data-symbol="USDT" data-sub="ERC20">Tether (ERC20)</option>
  <option value="ltc" data-symbol="LTC" data-sub="">Litecoin</option>
  <option value="xmr" data-symbol="XMR" data-sub="">Monero</option>
</select>

БЛОГ НА HUSL

Найти необходимый блок на странице по атрибуту, а после вывести содержимое одного из его атрибутов

Ответы (1 шт):