如何在点击时返回按钮的值？答案

【问题标题】：How to return button's value on click?如何在点击时返回按钮的值？
【发布时间】：2020-07-27 20:05:50
【问题描述】：

我希望使用按钮的值更新文本块，但我不确定如何从函数中获取值以供使用。

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>

【问题讨论】：

这能回答你的问题吗？ HTML/Javascript change div content

标签： javascript function button

【解决方案1】：

按钮没有value，但有textContent。用它来更新文本框。也不要命名或从函数返回，没有意义。

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>

【讨论】：

【解决方案2】：

你可以这样做

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

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

小心它有 2 个 id 的输入

【讨论】：

【解决方案3】：

这应该让你开始

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>

【讨论】：

【解决方案4】：

使用myTextInput.value 更改text input field 的值还有你的

您的文本输入也有 2 个 id，您需要获取文本输入的 DOM 对象并更改其 .value，这应该可以工作

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

}

【讨论】：