Javascript textContent returns undefined

Question

I am creating a custom select box with HTML, CSS, and JavaScript:

var selectField = document.getElementById("selectField");
var selectText = document.getElementById("selectText");
var list = document.getElementById("list");
var options = document.getElementsByClassName("options");
var arrow = document.getElementById("arrow");


selectField.onclick = () => {
  list.classList.toggle("hide");
  arrow.classList.toggle("rotate");
}

for (option of options) {
  option.onclick = () => {
    selectText.innerHTML = this.textContent;
    list.classList.toggle("hide");
    arrow.classList.toggle("rotate");
  }
}

<div id="selectField" class="select">
  <p id="selectText">Select a platform</p>
  <i id="arrow" class="fa-solid fa-caret-down"></i>
</div>
<ul id="list" class="hide">
  <li class="options">
    <i class="fa-brands fa-facebook"></i>
    <p>Facebook</p>
  </li>
  <li class="options">
    <i class="fa-brands fa-linkedin"></i>
    <p>Linkedin</p>
  </li>
  <li class="options">
    <i class="fa-brands fa-twitter"></i>
    <p>Twitter</p>
  </li>
  <li class="options">
    <i class="fa-brands fa-discord"></i>
    <p>Discord</p>
  </li>
  <li class="options">
    <i class="fa-brands fa-stack-overflow"></i>
    <p>Stack-overflow</p>
  </li>
</ul>

but whenever I click on the list item it returns undefined and instead of writing .textContent if I write .innerText then it only returns the last list item.

score 2 · Answer 1 · answered Jan 01 '23 at 09:14

Instead of using this get event click target and read it's text content, see:

var selectField = document.getElementById("selectField");
var selectText = document.getElementById("selectText");
var list = document.getElementById("list");
var options = document.getElementsByClassName("options");
var arrow = document.getElementById("arrow");


selectField.onclick = () => {
  list.classList.toggle("hide");
  arrow.classList.toggle("rotate");
}

for (option of options) {
  option.onclick = (e) => {
    selectText.innerHTML = e.target.textContent;
    list.classList.toggle("hide");
    arrow.classList.toggle("rotate");
  }
}

<div id="selectField" class="select">
  <p id="selectText">Select a platform</p>
  <i id="arrow" class="fa-solid fa-caret-down"></i>
</div>
<ul id="list" class="hide">
  <li class="options">
    <i class="fa-brands fa-facebook"></i>
    <p>Facebook</p>
  </li>
  <li class="options">
    <i class="fa-brands fa-linkedin"></i>
    <p>Linkedin</p>
  </li>
  <li class="options">
    <i class="fa-brands fa-twitter"></i>
    <p>Twitter</p>
  </li>
  <li class="options">
    <i class="fa-brands fa-discord"></i>
    <p>Discord</p>
  </li>
  <li class="options">
    <i class="fa-brands fa-stack-overflow"></i>
    <p>Stack-overflow</p>
  </li>
</ul>

Javascript textContent returns undefined

1 Answers1