Get text content from nested list item class javascript

Question

My shopify store has currency pop out menu that can be opened via an icon button ($).

It would be ideal to display the currency that is selected to the right hand side of the icon button.

The menu is an unordered list and the selected list item is assigned the class "active". The actual text content is wrapped inside a nested "a href:"

I added a <p> with the id "currName" to the right hand side of the icon button and have attempted to show the selected list item in this spot.

HTML:

<div class="tt-desctop-parent-multi tt-parent-box">
  <div class="tt-multi-obj tt-dropdown-obj">
    <div class="row">
    <button class="tt-dropdown-toggle"
            data-tooltip="{{ 'general.tooltip_texts.header_settings' | t }}"
            data-tposition="bottom">
  
      <i class="icon-e-49"></i><p id="currName"> </p> </button></div>
    <div class="tt-dropdown-menu">
      <div class="tt-mobile-add">
        <button class="tt-close">Close</button>
      </div>

<div class="tt-dropdown-menu" style="display: block;">
      <div class="tt-dropdown-inner">
<ul class="menu_language_holder">
</ul>

<form method="post" action="/cart/update" id="currency_form" accept-charset="UTF-8" class="currency-selector small--hide MultiFile-intercepted" enctype="multipart/form-data"><input type="hidden" name="form_type" value="currency"><input type="hidden" name="utf8" value="✓"><input type="hidden" name="return_to" value="/collections/carriers/products/piang-gouer-soft-cat-carrier-plain-print"><input name="currency" hidden="">
<ul class="currency-selector" data-currency-selector=""><li data-currency="AUD">
    <a href="#">
      $  Australian Dollar
    </a>
  </li><li data-currency="USD" class="active">
    <a href="#">
      $ United States Dollar
    </a>
  </li></ul></form></div>
    </div><br><br>

My code:

<script>
    let selectedCurrency = document.querySelectorAll("li, .currency-selector, .active, a[href^='#']").innerHTML;  
    document.getElementById('currName').innerHTML = selectedCurrency;
</script>

The result is undefined no matter which method I try.

Thanks :)

`querySelectorAll` returns a list of items, you have to find the one that you want. — Kokodoko, Oct 31 '21 at 10:18
Does this answer your question? [What do querySelectorAll and getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return) — Robin Zigmond, Oct 31 '21 at 10:23
@RobinZigmond There is only one list item that has the class "active". document.querySelectorAll("li, .currency-selector, .active, a[href^='#']").innerHTML; Here I am expecting a match with: 1. li 2. .currency-selector class (held by parent) 3. .active class (held by the li) 4. a href (which holds the text i'm trying to extract) — LLKC., Oct 31 '21 at 10:30
@LLKC. I understand all that, the issue is that `querySelectorAll` returns a collection of HTML elements, rather than a single one - such a collection has no innerHTML property, and that is why you are getting undefined. — Robin Zigmond, Oct 31 '21 at 10:54

score 0 · Answer 1 · answered Oct 31 '21 at 10:33

You should use the select tag instead of a list.

Example:

const currencySelector = document.getElementById("currency-selector");
currencySelector.addEventListener("change", (e) => {
    console.log(e.target.value)
})

<select name="currency" id="currency-selector">
    <option value="USD">Dollar</option>
    <option value="EUR">Euro</option>
</select>

score 0 · Accepted Answer · answered Oct 31 '21 at 10:36

You need to simply replace document.querySelectorAll with document.querySelector

This will give you an output like this:

https://jsfiddle.net/hdro85k1/

The code will look like this then:

    let selectedCurrency = document.querySelector("li, .currency-selector, .active, a[href^='#']").innerHTML;  
    document.getElementById('currName').innerHTML = selectedCurrency;

<div class="tt-desctop-parent-multi tt-parent-box">
  <div class="tt-multi-obj tt-dropdown-obj">
    <div class="row">
    <button class="tt-dropdown-toggle"
            data-tooltip="{{ 'general.tooltip_texts.header_settings' | t }}"
            data-tposition="bottom">
  
      <i class="icon-e-49"></i><p id="currName"> </p> </button></div>
    <div class="tt-dropdown-menu">
      <div class="tt-mobile-add">
        <button class="tt-close">Close</button>
      </div>

<div class="tt-dropdown-menu" style="display: block;">
      <div class="tt-dropdown-inner">
<ul class="menu_language_holder">
</ul>

<form method="post" action="/cart/update" id="currency_form" accept-charset="UTF-8" class="currency-selector small--hide MultiFile-intercepted" enctype="multipart/form-data"><input type="hidden" name="form_type" value="currency"><input type="hidden" name="utf8" value="✓"><input type="hidden" name="return_to" value="/collections/carriers/products/piang-gouer-soft-cat-carrier-plain-print"><input name="currency" hidden="">
<ul class="currency-selector" data-currency-selector=""><li data-currency="AUD">
    <a href="#">
      $  Australian Dollar
    </a>
  </li><li data-currency="USD" class="active">
    <a href="#">
      $ United States Dollar
    </a>
  </li></ul></form></div>
    </div><br><br>

Get text content from nested list item class javascript

2 Answers2