Вот так будет меняться еще и атрибут... 
<style>
.btn {
margin-bottom: 10px;
}
.btn button + button {
margin-left: 10px;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', _ => {
document.querySelectorAll('.btn').forEach(_ => {
const ot = _.parentNode.querySelector('.total')
_.addEventListener('click', _ => {
const o = _.target
if (o.tagName !== 'BUTTON') return
const val = +ot.value + +o.value
ot.value = val
ot.setAttribute('value', val)
})
})
})
</script>
<div class='container'>
<div class='btn'>
<button value='1'>1</button>
<button value='2'>2</button>
<button value='5'>5</button>
<button value='10'>10</button>
</div>
<label>
Сумма
<input type='text' class='total' />
</label>
</div>
|