Grab the innerHTML and insert to input value using many similar class selector

Question

I have a single input as in follows:

<input type='text' class='txtwarna' name='txtwarna' value=''/>

And, this is HTML with many similar elements, say, cls, as:

<div class="ct-a">
    <ul class='wr'>
        <li class='cls color1'>Kuning</li>
        <li class='cls color2'>Putih</li>
        <li class='cls color3'>Hijau</li>
        <li class='cls color4'>Biru</li>                          
    </ul>
</div>
<div class="ct-b">
    <ul class='wr'>
        <li class='cls color1'>Biru</li>
        <li class='cls color2'>Hitam</li>
        <li class='cls color3'>Putih</li>
        <li class='cls color4'>Merah</li>
        <li class='cls color5'>Coklat</li>
        <li class='cls color6'>Abu-abu</li>                         
    </ul>
</div>

What I tried - not working:

var strHtml = document.getElementsByClassName("cls");
var valInput = document.getElementsByClassName("txtwarna");
for (var i = 0; i  < strHtml.length; i++) {
    strHtml[i].addEventListener('click', function() {
        valInput.value = strHtml.innerHTML; 
});
}

Question: How to get each of the innerHTML string, say, biru, putih, kuning, etc when user clicks on it and insert the innerHTML string into single input value?

The value will be changed based on user's click.

It looks like you actually want a [`select`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select) — pilchard, Apr 11 '23 at 11:29
Wait, I try to write the code using `select` and show it here — Andrea Saturnus, Apr 11 '23 at 11:41
valInput is an array : Add `[0]` to get the input element like this: `document.getElementsByClassName("txtwarna")[0];` — protob, Apr 11 '23 at 11:58
using `document.getElementsByClassName("txtwarna")[0];` and `textContent` give me result: `undefined` as input value :) fiddle: http://jsfiddle.net/PaijoPapua/120egnuz/16/ — Andrea Saturnus, Apr 11 '23 at 12:02
`valInput.value = strHtml.innerHTML` - `strHtml` is the result of `getElementsByClassName`, a HTMLCollection. That does not have an `innerHTML`. — CBroe, Apr 11 '23 at 12:06
Change `strHtml.innerHTML` to `this.innerHTML` in your click handler in jsfiddle — protob, Apr 11 '23 at 12:11

pilchard · Answer 1 · 2023-04-11T12:22:18.333

You can certainly do what you are asking by simply adding a click listener to the document and setting the input.value to match the clicked element's textContent. Here using Element.matches() to delegate clicks to the li elements with a 'cls' class.

const input = document.querySelector('.txtwarna');

document.addEventListener('click', (event) => {
  if (event.target.matches('li.cls')) {
    input.value = event.target.textContent;
  }
});

ul.wr {
  cursor: pointer;
}

<input type='text' class='txtwarna' name='txtwarna' value=''/> 

<div class="ct-a">
    <ul class='wr'>
        <li class='cls color1'>Kuning</li>
        <li class='cls color2'>Putih</li>
        <li class='cls color3'>Hijau</li>
        <li class='cls color4'>Biru</li>                          
    </ul>
</div>
<div class="ct-b">
    <ul class='wr'>
        <li class='cls color1'>Biru</li>
        <li class='cls color2'>Hitam</li>
        <li class='cls color3'>Putih</li>
        <li class='cls color4'>Merah</li>
        <li class='cls color5'>Coklat</li>
        <li class='cls color6'>Abu-abu</li>                         
    </ul>
</div>

However, it seems like you are actually wanting the functionality of a select element.

<div class="ct-a">
  <select class='wr'>
    <optgroup label="ct-a">
      <option class='cls color1' value='Kuning'>Kuning</option>
      <option class='cls color2' value='Putih'>Putih</option>
      <option class='cls color3' value='Hijau'>Hijau</option>
      <option class='cls color4' value='Biru'>Biru</option>
    </optgroup>
    <optgroup label="ct-b">
      <option class='cls color1' value="Biru">Biru</option>
      <option class='cls color2' value="Hitam">Hitam</option>
      <option class='cls color3' value="Putih">Putih</option>
      <option class='cls color4' value="Merah">Merah</option>
      <option class='cls color5' value="Coklat">Coklat</option>
      <option class='cls color6' value="Abuabu">Abuabu</option>
    </optgroup>
  </select>
</div>

actually, I must ignore the `ul` and other class selectors for other `calling function`. okay. nice. — Andrea Saturnus, Apr 11 '23 at 12:12

score 1 · Accepted Answer · answered Apr 11 '23 at 12:03

You should set value of the valInput to overwrite the value.

The clicked element is available through e.target.innerHTML

var strHtml = document.getElementsByClassName("cls");
var valInput = document.getElementsByClassName("txtwarna")[0];
var allLi = document.getElementsByTagName("li");

const onLiClick = (e) => {
  valInput.value = e.target.innerHTML;
}

Array.from(allLi).forEach(e => e.addEventListener('click', onLiClick));

<input type='text' class='txtwarna' name='txtwarna' value=''/> 

<div class="ct-a">
    <ul class='wr'>
        <li class='cls color1'>Kuning</li>
        <li class='cls color2'>Putih</li>
        <li class='cls color3'>Hijau</li>
        <li class='cls color4'>Biru</li>                          
    </ul>
</div>
<div class="ct-b">
    <ul class='wr'>
        <li class='cls color1'>Biru</li>
        <li class='cls color2'>Hitam</li>
        <li class='cls color3'>Putih</li>
        <li class='cls color4'>Merah</li>
        <li class='cls color5'>Coklat</li>
        <li class='cls color6'>Abu-abu</li>                         
    </ul>
</div>

this also works as I wish. so, there are two answers work here (below answer) as I wish . I want to vote up but not enough reputation. okay, noted/saved your answer. — Andrea Saturnus, Apr 11 '23 at 12:08
Well if there are no `li`, there is no evntListener added and `onLiClick` will never be triggered. The input will stay empty. — 0stone0, Apr 11 '23 at 12:15

score 1 · Answer 3 · answered Apr 11 '23 at 12:35

var strHtml = document.getElementsByClassName('cls');
var valInput = document.getElementsByClassName('txtwarna');
for (var i = 0; i < strHtml.length; i++) {
  strHtml[i].addEventListener('click', function (event) {
    valInput[0]['value'] = event.currentTarget['innerHTML'];
  });
}

Grab the innerHTML and insert to input value using many similar class selector

3 Answers3