Backticks and class elemnt comby not working

[jimandy]

Working on a snippet that just doesn't work. Backticks used to write html textareas while in the JS script.
May sound weird but I would really like to know where I've gone wrong after hours of work. Alert should show the result.

<script>
    var item="red"; // (for testing)

function doit(){
    var elements=document.getElementsByClassName(item).value;
    var found=elements[0];
    
alert(found); // text in left box (red);
}
document.write(`<textarea class ="${item}">red</textarea>`);
document.write(`<textarea class ="${item}">blue</textarea>`);
document.write('<button onclick ="doit()">CLICK</button>');
</script>

 

[VBService]

In your case first you need a get reference to an element with class name "red" and then take the value.

<script>
  var item = "red"; // (for testing)

  function doit() {
    var elements = document.getElementsByClassName(item);
    var found = elements[0].value;

    alert(found); // text in left box (red);
  }

  document.write(`<textarea class="${item}">red</textarea>`);
  document.write(`<textarea class="${item}">blue</textarea>`);
  document.write('<button onclick="doit()">CLICK</button>');
</script>

or

<script>
  var item = "red"; // (for testing)

  function doit() {
    var elements = document.getElementsByClassName(item);
    if (elements[0]) {
      var found = elements[0].value;
      alert(found); // text in left box (red);
    }
  }

  document.write(`<textarea class="${item}">red</textarea>`);
  document.write(`<textarea class="${item}">blue</textarea>`);
  document.write('<button onclick="doit()">CLICK</button>');
</script>

or

<script>
  var item = "red"; // (for testing)

  function doit() {
    var found = document.getElementsByClassName(item)[0].value.trim();
    if (found === item) {
      alert(found); // text in left box (red);
    }
  }

  document.write(`<textarea class="${item}">red</textarea>`);
  document.write(`<textarea class="${item}">blue</textarea>`);
  document.write('<button onclick="doit()">CLICK</button>');
</script>

BTW,

<script>
  const item = 'red'; // (for testing)

  function doit() {
    const found = document.querySelector(`.${item}`).value.trim();
    if (found === item) {
      alert(found); // text in left box (red);
    }
  }

  const body = `
    <textarea class="${item}">red</textarea>
    <textarea class="${item}">blue</textarea>
    <button onclick="doit()">CLICK</button>
  `;
  document.body.innerHTML = body;
</script>