Javascript Button not working as expected

June 21, 2022

I’m working on to-do list, I can’t get the button to execute the function . What I’m I doing wrong?

function displayEntry() {
  var x = document.getElementsByClassName("entrybox").value;
  document.getElementsByClassName("display").innerHTML = x;
}

<div class="six columns">
  <input class="entrybox" type="text" value="placeholder">
  <p class="display"></p>
  <button onclick="displayEntry()">Click Me</button>
  <input type="button" name="clear" value="clear list">
</div>

>Solution :

Your function is actually running but the selectors are not what you think they are. Couple ways to solve this but the main thing is to get the first element (0 based array of elements) you have by the class using the [0] after the selector.

function displayEntry() {
  let x = document.getElementsByClassName("entrybox")[0].value;
  document.getElementsByClassName("display")[0].innerHTML = x;
}

<div class="six columns">
 <input class="entrybox" type="text" value="placeholder">
  <p class="display"></p>
  <button onclick="displayEntry()" type="button">Click Me</button>
  <input type="button" name="clear" value="clear list">
</div>