Не могу вывести в поле значение выбранного пункта из списка
200
08 мая 2019, 22:10
По нажатию на любой из списка элемент, хочу чтоб значение нажатого элемента списка отображалось в блоке, в моем случае отображает underfiend, хочу спросить почему так происходит, укажите на мою ошибку пожалуйста
function func() {
var sound = document.getElementsByTagName('li');
var a = [];
for (i = 0; i < sound.length; i++) {
a[i] += +sound[i].innerHTML;
}
document.getElementById('show_sound').innerHTML = a[i];
}.list-item {
cursor: pointer;
}<div class="list">
<ol class="list-item">
<li onclick="func()">элемент списка 1</li>
<li onclick="func()">элемент списка 2</li>
<li onclick="func()">элемент списка 3</li>
<li onclick="func()">элемент списка 4</li>
<li onclick="func()">элемент списка 5</li>
<li onclick="func()">элемент списка 6</li>
<li onclick="func()">элемент списка 7</li>
</ol>
</div>
<div id="show_sound" class="sound">
</div>Answer 1
Ещё один вариант - делегирование:
document.querySelector('.list-item').addEventListener('click', function(e) {
if (e.target.tagName == 'LI') { document.querySelector('.sound').innerHTML = e.target.innerHTML; }
}).list-item li:hover { cursor: pointer; color: red; }<div class="list">
<ol class="list-item">
<li>элемент списка 1</li>
<li>элемент списка 2</li>
<li>элемент списка 3</li>
<li>элемент списка 4</li>
<li>элемент списка 5</li>
<li>элемент списка 6</li>
<li>элемент списка 7</li>
</ol>
</div>
<div id="show_sound" class="sound"></div>Answer 2
Я бы так реализовал
[...sound = document.getElementsByTagName('li')].forEach(s => {
s.addEventListener('click', () => {
document.getElementById('show_sound').innerHTML += s.innerHTML
})
}).list-item {
cursor: pointer;
}<div class="list">
<ol class="list-item">
<li>элемент списка 1</li>
<li>элемент списка 2</li>
<li>элемент списка 3</li>
<li>элемент списка 4</li>
<li>элемент списка 5</li>
<li>элемент списка 6</li>
<li>элемент списка 7</li>
</ol>
</div>
<div id="show_sound" class="sound">
</div>Вариант два
let a = [];
[...sound = document.getElementsByTagName('li')].forEach(s => {
s.addEventListener('click', () => {
a.push(s.innerHTML);
document.getElementById('show_sound').innerHTML = a
})
}).list-item {
cursor: pointer;
}<div class="list">
<ol class="list-item">
<li>элемент списка 1</li>
<li>элемент списка 2</li>
<li>элемент списка 3</li>
<li>элемент списка 4</li>
<li>элемент списка 5</li>
<li>элемент списка 6</li>
<li>элемент списка 7</li>
</ol>
</div>
<div id="show_sound" class="sound">
</div>Answer 3
var a = [];
function func(i) {
var sound = document.getElementsByTagName('li');
a = sound[i].innerHTML;
document.getElementById('show_sound').innerHTML = a;
}.list-item {
cursor: pointer;
}<div class="list">
<ol class="list-item">
<li onclick="func(0)">элемент списка 1</li>
<li onclick="func(1)">элемент списка 2</li>
<li onclick="func(2)">элемент списка 3</li>
<li onclick="func(3)">элемент списка 4</li>
<li onclick="func(4)">элемент списка 5</li>
<li onclick="func(5)">элемент списка 6</li>
<li onclick="func(6)">элемент списка 7</li>
</ol>
</div>
<div id="show_sound" class="sound">У вас много лишнего кода и куча ошибок +sound[i].innerHTML- плюс в начале переобразовывает к числу зачем вам массив a[]? если нужно выводить одно значение? и в конце у вас выходит i = 7, а массив идет до a[6]
-
06:53
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
-
20:42
-
09:21
Основные этапы разработки сайта для стоматологической клиники
-
12:26
-
10:30
-
18:43
Продвижение своими сайтами как стратегия роста и независимости
-
22:46
-
06:18
-
12:23
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 50288 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 31936 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 26265 visits
- Как через css изменить цвет png изображения? 11758 visits
- Blob video url download 11303 visits
- Php curl запрос через прокси с авторизацией 10714 visits
- Работа с captcha vk api 9511 visits
![Какому свойству в js , равно .width() в jquery? [закрыт]](https://hostciti.net/images/nophoto.png "Какому свойству в js , равно .width() в jquery? [закрыт]")
© "hostciti.net" 14.3.2026 | 18:03