sjaserds
@sjaserds
Студент

Как получить значения кнопки при клике?

Всем привет, помогите новичку!
Написал небольшой скрипт при нажатии на любую из кнопок в блоке все кнопки меняются. Но вторая функция которая должна отвечать за вывод значения кнопки в консоль почему-то не вызывается. В чем проблема?

window.onload = function() {
  function strPad() {
    console.log(this.value);
  }

	var bt = document.getElementsByClassName("btn");
	for (var i = 0; i < bt.length; i++) {
		bt[i].onclick = strPad;
	}
}

window.onload = function() {
	function strPad2() {
		$(".block").empty();
		$(".block").append(`<div class="block__row">
					<div class="block__colum">
						<input class="btn" type="button" value="2">
					</div>
					<div class="block__colum">
						<input class="btn" type="button" value="567">
					</div>
					<div class="block__colum">
						<input class="btn" type="button" value="Т333">
					</div>
					<div class="block__colum">
						<input class="btn" type="button" value="csdf">
					</div>
					<div class="block__colum">
						<input class="btn" type="button" value="sdfdsggg">
					</div>
					<div class="block__colum">
						<input class="btn" type="button" value="ertretret">
					</div>
				</div>`);
		
  	}

	var bt2 = document.getElementsByClassName("btn");
	for (var i = 0; i < bt2.length; i++) {
		bt2[i].onclick = strPad2;
	}
}


<div class="block">
				<div class="block__row">
					<div class="block__colum">
						<input class="btn" type="button" value="1">
					</div>
					<div class="block__colum">
						<input class="btn" type="button" value="2">
					</div>
					<div class="block__colum">
						<input class="btn" type="button" value="3">
					</div>
					<div class="block__colum">
						<input class="btn" type="button" value="4">
					</div>
					<div class="block__colum">
						<input class="btn" type="button" value="5">
					</div>
					<div class="block__colum">
						<input class="btn" type="button" value="6">
					</div>
				</div>
			</div>
  • Вопрос задан
  • 163 просмотра
Решения вопроса 1
Пригласить эксперта
Ответы на вопрос 2
Bavashi
@Bavashi
Наверное, вы хотите что-то вроде этого:
window.onload = function() {

  function strPad2() {
    $(".block").empty();
    $(".block").append(`<div class="block__row">
          <div class="block__colum">
            <input class="btn" type="button" value="2">
          </div>
          <div class="block__colum">
            <input class="btn" type="button" value="567">
          </div>
          <div class="block__colum">
            <input class="btn" type="button" value="Т333">
          </div>
          <div class="block__colum">
            <input class="btn" type="button" value="csdf">
          </div>
          <div class="block__colum">
            <input class="btn" type="button" value="sdfdsggg">
          </div>
          <div class="block__colum">
            <input class="btn" type="button" value="ertretret">
          </div>
        </div>`);
    console.log(this.value);
  }

  var bt2 = document.getElementsByClassName("btn");
  for (var i = 0; i < bt2.length; i++) {
    bt2[i].onclick = strPad2;
  }
}
Ответ написан
@dennis_d
стремлюсь к junior front-end developer
Попробуй этот код, думаю он будет оптимальней твоего
window.addEventListener('DOMContentLoaded', () => {
    
    const buttons = document.querySelectorAll('.btn')
    let newValues = ['2', '567', 'Т333', 'csdf', 'sdfdsggg', 'ertretret']

    for (let i =0; i < buttons.length; i++) {
        buttons[i].addEventListener('click', () => {
            buttons.forEach((item, i) => {
                item.setAttribute('value', newValues[i])
            })
            console.log(buttons[i].getAttribute('value'))
        })
    }
})


Второй, более оптимальный вариант
window.addEventListener('DOMContentLoaded', () => {
    const buttons = document.querySelectorAll('.btn')
    const rowSelector = document.querySelector('.block__row')
    let newValues = ['2', '567', 'Т333', 'csdf', 'sdfdsggg', 'ertretret']

    function changeValue(btn, newArr) {
        for (let i = 0; i < btn.length; i++) {
            btn[i].setAttribute('value', newArr[i])
        }
    }

    function consoleOutput(parentSelector) {
        parentSelector.addEventListener('click', (e) => {
            if (!e.target.matches('input')) return
            changeValue(buttons, newValues)
            console.log(e.target.getAttribute('value'))
        })
    }
    consoleOutput(rowSelector)
})
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы