Задать вопрос
@chatterbox777
javascript

Необходимо определить какой из input'ов был нажат и вывести в span?

почему не работает, весь день бьюсь над задачей.... 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="main.css">
    <title>Document</title>
</head>
<body>
    <div>
        <input id="1" type="button" value="button1">
        <input id="2" type="button" value="button2">
        <input id="3" type="button" value="button3">

        <div class="box">
            <span class = "box_text">
                Результат:
            </span>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>


const showBtn = (eventObj) => {
let btn = eventObj.target;
return btn;

};

const clickBtn = () => {
let btns = document.getElementsByTagName('input'); // выбрали все кнопки
let answerArea = document.querySelector('.box_text');
for (let i = 0; i < btns.length; i++) {
    btns[i].onclick = showBtn;
}

 answerArea.innerHTML = btn.value;
 return answerArea
};
  • Вопрос задан
  • 167 просмотров
2 комментария
Подписаться 1 Простой 2 комментария
Решения вопроса 2
sfrancisco
@sfrancisco 
let inps = document.querySelectorAll('input'),
		txt = document.querySelector('.box_text');

inps.forEach((item) => {
	item.addEventListener('click', targetItem)
})

function targetItem(event) {
	let target = event.target;
	txt.innerHTML = 'Результат: ' + target.value;
}
Ответ написан
2 комментария
2 комментария
@alekssamos
Программист любитель
Потому что это нужно делать в одной функции клик.
const showBtn = (eventObj) => {
	let btn = eventObj.target;
	let answerArea = document.querySelector('.box_text');
	answerArea.innerHTML = btn.value;
};

const clickBtn = () => {
	let btns = document.getElementsByTagName('input'); // выбрали все кнопки
	for (let i = 0; i < btns.length; i++) {
		btns[i].onclick = showBtn;
	}

};

window.onload = clickBtn;
Ответ написан
3 комментария
3 комментария
Пригласить эксперта
Ответы на вопрос 1
ThunderCat
@ThunderCat Куратор тега JavaScript
{PHP, MySql, HTML, JS, CSS} developer
Пардон за мой жквериевский прононс...
$(function(){
    $('input').on('click',function(e){
        $('.box_text').html(e.target);
    })
})
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработать бэкэнд на Node.js
25 нояб. 2024, в 18:39
30000 руб./за проект
Разработать бэкэнд на Django
25 нояб. 2024, в 18:35
30000 руб./за проект
Перенести сайт на CMS Wordpress c Tilda
25 нояб. 2024, в 18:33
10000 руб./за проект
Ещё заказы