Как написать аналог JQuery-кода на чистом JS onclick?

Рейтинг: 0Ответов: 1Опубликовано: 25.10.2014

Всем доброго времени суток, пожалуйста, помогите написать на чистом js аналог: 

$('div#but input').click(function() {                                           
    $('.textbox').val($('.textbox').val() + this.value.toString());
})

html:

    <input class="textbox" type="text" size="30" value="">
    <div id="but">
            <input type="submit" id="button" value="1">
            <input type="submit" id="button" value="2">
            <input type="submit" id="button" value="3">         
            <input type="submit" id="button" value="4">
            <input type="submit" id="button" value="5">
            <input type="submit" id="button" value="6">
            <input type="submit" id="button" value="7">
            <input type="submit" id="button" value="8">
            <input type="submit" id="button" value="9">
            <input type="submit" id="button" value="0">
            <input type="submit" id="button" value=".">
    </div>

Код ориентирован на последние версии хрома, только хрома.

javascript jquery
Источник: Stack Overflow на русском

Ответы

▲ 1

Проверяем тут

var d = document,
    inp = d.querySelector('div#but input');
inp.addEventListener('click', function(){
    var txtBox = d.querySelectorAll('.textbox');
    for(var i = 0; i < txtBox.length; i++){
        txtBox[i].value += this.value.toString();
    }
}, false);

P.S. Если у вас несколько элементов input в элементе с id = but, то так:

var d = document,
    inp = d.querySelectorAll('div#but input');

function concatVal(){
    var txtBox = d.querySelectorAll('.textbox');
    for(var i = 0; i < txtBox.length; i++){
        txtBox[i].value += this.value.toString();
    }
}
for(var i = 0; i < inp.length; i++){
    inp[i].addEventListener('click', concatVal, false);
}