Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Вывести кнопки button в отдельный div (https://javascript.ru/forum/misc/63760-vyvesti-knopki-button-v-otdelnyjj-div.html)

Sokoljr 27.06.2016 15:21
Вывести кнопки button в отдельный div
 
Помогите пожалуйста, есть кнопки button от 0 до 9, при нажатии на любую из них, значение кнопки должно переходить в div, если нажимать подряд разные button, то в div сумма постоянно должна суммироваться

вот html

<body>

<form>
<button type="button">0</button>
<button type="button">1</button>
<button type="button">2</button>
<button type="button">3</button>
<button type="button">4</button>
<button type="button">5</button>
<button type="button">6</button>
<button type="button">7</button>
<button type="button">8</button>
<button type="button">9</button>
</form>

<div></div>

<script src="js/script.js" type="text/javascript"></script>
</body>

рони 27.06.2016 15:38
Sokoljr,
а ваши попытки сделать где?

Rasy 27.06.2016 15:39 
<body>
<script>
window.addEventListener('DOMContentLoaded', init);

function init() {
  var 
    a = document.querySelectorAll('button[type="button"]'),
    b = document.getElementById('result'),
    i;
 
  for (i = 0; i < a.length; i++) {
    a[i].addEventListener('click', function() {
      b.innerText = +this.innerText + +b.innerText;
    });
  }
}
</script>
  <form>
    <button type="button">0</button>
    <button type="button">1</button>
    <button type="button">2</button>
    <button type="button">3</button>
    <button type="button">4</button>
    <button type="button">5</button>
    <button type="button">6</button>
    <button type="button">7</button>
    <button type="button">8</button>
    <button type="button">9</button>
  </form>
  <div id="result"></div>
</body>

Sokoljr 27.06.2016 15:41
попытки заканчивались на выводе все кнопок, и повесить обработчик на одну из кнопок и все

рони 27.06.2016 15:44
Sokoljr,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">

</head>

<body>
<form>
 <button type="button">0</button>
 <button type="button">1</button>
 <button type="button">2</button>
 <button type="button">3</button>
 <button type="button">4</button>
 <button type="button">5</button>
 <button type="button">6</button>
 <button type="button">7</button>
 <button type="button">8</button>
 <button type="button">9</button>
 </form>

 <div></div>

<script>
window.addEventListener('DOMContentLoaded', function() {
var sum = 0;
 [].forEach.call(document.querySelectorAll('button'), function(item,i) {
         item.addEventListener('click', function() {
             document.querySelector('div').innerHTML = sum += i;
         });
     });
});
</script>
</body>
</html>

Sokoljr 27.06.2016 15:45
спасибо, буду разбирать!


Часовой пояс GMT +3, время: 21:39.