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

PaijoPapuastoros
April 11, 2023
276 views
3 votes
3 Answers

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.

Tags: html javascript

Answers

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>

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>

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'];
  });
}

Please signup or login to give your own answer.

Click here to cancel reply.