0

I'm looking to update a text block with the value of a button, but I'm not sure how to get the value from the function for use.

var allButtons = document.querySelectorAll('div[class^=digits]');

for (var i = 0; i < allButtons.length; i++) {
  allButtons[i].addEventListener('click', function current() {
    let current = this.innerText;
    console.log(current);
    return current;
  });

}
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
      integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" href="styles.css">
    <title>Document</title>
  </head>

  <body>
    <div class='container'>
      <div class='calculator'>
        <div class='window'>
          <input type="text" class="window" name="display" id="display" id='window'>
        </div>
        <div class='digits'><button>7</button></div>
        <div class='digits'><button>8</button></div>
        <div class='digits'><button>9</button></div>
        <div class='digits'><button>4</button></div>
        <div class='digits'><button>5</button></div>
        <div class='digits'><button>6</button></div>
        <div class='digits'><button>1</button></div>
        <div class='digits'><button>2</button></div>
        <div class='digits'><button>3</button></div>
      </div>
    </div>

    <script src="script.js"></script>
  </body>

</html>
GirkovArpa
  • 4,427
  • 4
  • 14
  • 43
timoflegend
  • 1
  • Does this answer your question? [HTML/Javascript change div content](https://stackoverflow.com/questions/2554149/html-javascript-change-div-content) – lux Jul 27 '20 at 20:11

4 Answers4

0

The buttons don't have a value, but they do have textContent. Update the textbox with that instead. Also don't name or return from the function, there's no point.

var allButtons = document.querySelectorAll('div[class^=digits]');

for (var i = 0; i < allButtons.length; i++) {
  allButtons[i].addEventListener('click', function () {
    document.querySelector('input').value = this.textContent;
  });
}
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
      integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" href="styles.css">
    <title>Document</title>
  </head>

  <body>
    <div class='container'>
      <div class='calculator'>
        <div class='window'>
          <input type="text" class="window" name="display" id="display" id='window'>
        </div>
        <div class='digits'><button>7</button></div>
        <div class='digits'><button>8</button></div>
        <div class='digits'><button>9</button></div>
        <div class='digits'><button>4</button></div>
        <div class='digits'><button>5</button></div>
        <div class='digits'><button>6</button></div>
        <div class='digits'><button>1</button></div>
        <div class='digits'><button>2</button></div>
        <div class='digits'><button>3</button></div>
      </div>
    </div>
  </body>

</html>
GirkovArpa
  • 4,427
  • 4
  • 14
  • 43
0

You can do like that

<div class="digits">
  <button onclick="setValue(7)">7</button>
</div>

function setValue(value) {
  let input = document.querySelector("input");
  input.value = value;
}

Be careful with the input it has 2 ids

Alcides A
  • 21
  • 5
0

this should get you started

var allButtons = document.querySelectorAll('div[class^=digits]');

for (var i = 0; i < allButtons.length; i++) {
    allButtons[i].addEventListener('click', function () {
       var display= document.getElementById('display');
       console.log(this.getElementsByTagName('button')[0].innerHTML);
       display.value = this.getElementsByTagName('button')[0].innerHTML;
         
        
    });
    
  }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" href="styles.css">
    <title>Document</title>
</head>
<body>
<div class='container'>
    <div class='calculator'>
        <div class='window'>
            <input type="text" class="window" name="display" id="display" id='window'>
        </div>
        <div class='digits'><button>7</button></div>
        <div class='digits'><button>8</button></div>
        <div class='digits'><button>9</button></div>        
        <div class='digits'><button>4</button></div>
        <div class='digits'><button>5</button></div>
        <div class='digits'><button>6</button></div>
        <div class='digits'><button>1</button></div>
        <div class='digits'><button>2</button></div>
        <div class='digits'><button>3</button></div>
    </div>
</div>

    <script src="script.js"></script>
</body>
</html>
DCR
  • 14,737
  • 12
  • 52
  • 115
0

Use myTextInput.value to change the value of a text input field Also your

Also your text input has 2 ids, you need to get the DOM object of your text input and change its .value, this should work

var allButtons = document.querySelectorAll('div[class^=digits]');
let textField = document.getElementById("display"); // Get Text Input Field from HTML

for (var i = 0; i < allButtons.length; i++) {
  allButtons[i].addEventListener('click', function current() {
    let current = this.innerText;
    textField.value = current; // Change TextInput Value
    console.log(current);
    return current;
  });

}
spacing
  • 730
  • 2
  • 10
  • 41