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

Question

[Сергей Явин]

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

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>

Comments

[Сергей Явин]

Bavashi, что вам нужно для того чтобы стало яснее?

[Павел Корнилов]

Код совершенно жутко-страшный:
1. Идёт перезапись метода window.onload
2. Страшная смесь нативного кода с jQuery. Если вы уже используете эту либу, то конструкции наподобие document.getElementsByClassName("btn") уже совершенно не уместны.
3. Совершенно непрозрачная логика.

Answer 1

[Павел Корнилов]

Answer 2

[Dennis]

Попробуй этот код, думаю он будет оптимальней твоего

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)
})

Comments

[Пашенька]

Плохо. Вы уже перебираете в цикле кнопки, зачем вы ещё один вложенный цикл написали для перебора тех же кнопок? Это раз. Второе: вешать лисэнер на каждую кнопочку – это плохая практика. Гораздо более эффективно вешать один лисэнер на их общего предка.

[Павел Корнилов]

Пашенька, +1

[Dennis]

Ну или так

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)
})