Возьмите innerHTML и вставьте его во входное значение, используя множество похожих селекторов классов
У меня есть сингл input , как показано ниже:
<input type='text' class='txtwarna' name='txtwarna' value=''/>
И это HTML со многими похожими элементами, скажем, cls, такими как:
<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() {
valInput.value = strHtml.innerHTML;
});
}
Вопрос: Как получить каждую строку innerHTML, скажем, biru, putih, kuning и т. д., когда пользователь нажимает на нее, и вставлять строку innerHTML в одно входное значение?
Значение будет изменено в зависимости от клика пользователя.
Подождите, я попробую написать код с помощью select и показать его здесь
нет, не использую select
valInput — это массив: добавьте [0], чтобы получить элемент ввода следующим образом: document.getElementsByClassName("txtwarna")[0];
также не устанавливайте его на innerHTML, но textContent
используя document.getElementsByClassName("txtwarna")[0]; и textContent, дайте мне результат: undefined в качестве входного значения :) рабочий пример: jsfiddle.net/PaijoPapua/120egnuz/16
valInput.value = strHtml.innerHTML - strHtml является результатом getElementsByClassName, HTMLCollection. Это не имеет innerHTML.
Измените strHtml.innerHTML на this.innerHTML в обработчике кликов в jsfiddle.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Вы, безусловно, можете сделать то, что вы просите, просто добавив прослушиватель click в документ и установив input.value в соответствии с textContent элемента, на который нажали. Здесь с помощью Element.matches() для делегата клики на li элементы с классом 'cls'.
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>Однако, похоже, вам действительно нужна функциональность элемента select.
<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>не используйте select, пожалуйста. но ваш код выше работает.
на самом деле, я должен игнорировать ul и другие селекторы классов для других calling function. хорошо. хороший.
Отредактировано, чтобы делегировать только li.cls элементам
Вы должны установить value из valInput, чтобы перезаписать значение.
Выбранный элемент доступен через 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>это также работает, как я хочу. Итак, здесь работают два ответа (ниже ответа), как я и хотел. Я хочу проголосовать, но недостаточно репутации. хорошо, отметил/сохранил ваш ответ.
так что без li оно превращается в undefined верно?
Ну, если нет li, то evntListener не добавлен и onLiClick никогда не будет запущен. Вход останется пустым.
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'];
});
}
Похоже, вы действительно хотите выбрать