无法获取“div”元素的值

Question

我需要用 vanilla JS 构建一个计算器。

但是当我尝试获取 div 元素的值时遇到问题。有人可以帮我吗？

    <div id="num_keyboard">
        <div class="btn-opt" value="1">1</div>
        <div class="btn-opt" value="2">2</div>
        <div class="btn-opt" value="3">3</div>
        <div class="btn-opt" value="4">4</div>
        <div class="btn-opt" value="5">5</div>
        <div class="btn-opt" value="6">6</div>
        <div class="btn-opt" value="7">7</div>
        <div class="btn-opt" value="8">8</div>
        <div class="btn-opt" value="9">9</div>
        <div class="btn-opt" value="0">0</div>
  </div>

<script>
    const num_keyboard = document.querySelectorAll(".btn-opt");
    let numArray = Array.from(num_keyboard);

    console.log(numArray);

    for(let c = 0; c <= numArray.length; c++) {
      numArray[c].addEventListener("click", () => {
        alert(`Foi: ${numArray[c].value}`);
      })
    };
</script>

Answer 1

只需获取 innerHTML 或按照建议使用 textContent

const num_keyboard = document.querySelectorAll(".btn-opt");
    let numArray = Array.from(num_keyboard);

   
    for(let c = 0; c < numArray.length; c++) {
      numArray[c].addEventListener("click", () => {
        alert(`Foi: ${numArray[c].textContent}`);
      })
    };

<div id="num_keyboard">
        <div class="btn-opt" >1</div>
        <div class="btn-opt" >2</div>
        <div class="btn-opt" >3</div>
        <div class="btn-opt" >4</div>
        <div class="btn-opt" >5</div>
        <div class="btn-opt" >6</div>
        <div class="btn-opt" >7</div>
        <div class="btn-opt" >8</div>
        <div class="btn-opt" >9</div>
        <div class="btn-opt" >0</div>
  </div>

Answer 2

您无法使用 .value 访问按钮的 value。您需要使用 .attributes["value"]

但是，returns 是一个 HTML 属性，因此您需要获取 textContent。例如，numArray[c].attributes["value"].textContent

这个returns数字作为一个字符串。从那里你可以把它变成一个整数。

编辑：查看代码和您的个人资料，我可以看出这是您的第一个 javascript，因此我想就如何改进它提供更完整的答案。

首先，正如其他人所建议的，您应该使用按钮。这就是所谓的 semantic markup，它只是一种奇特的说法，表示您为工作使用了正确的元素。你点击它来做一件事，所以右边的元素是一个按钮。语义标记帮助用户、浏览器和任何辅助工具了解发生了什么。

接下来，支持使用自定义属性，但是you need to add a data- to the beginning。这是因为 HTML 是一个活的规范，它正在获得新的属性。为了防止您的代码干扰添加的任何新属性，您应该添加 data- 或者，如果我没记错的话，基本上任何带有 -.

的属性名称

然而，当您将 input 与 type="button" 一起使用时，这一点实际上并不重要，因为 value 是一个既定的原生属性。所以，不用 div 和 data-，试试这个：

    <div id="num_keyboard">
        <input type="button" class="btn-opt" value="0"/>
        <input type="button" class="btn-opt" value="1"/>
        <input type="button" class="btn-opt" value="2"/>
        <input type="button" class="btn-opt" value="3"/>
        <input type="button" class="btn-opt" value="4"/>
        <input type="button" class="btn-opt" value="5"/>
        <input type="button" class="btn-opt" value="6"/>
        <input type="button" class="btn-opt" value="7"/>
        <input type="button" class="btn-opt" value="8"/>
        <input type="button" class="btn-opt" value="9"/>
    </div>

Answer 3

Imvain 的评论和 iota 的回答重新使用数据属性是一个好的开始。

考虑到您正在构建的是一个计算器，为计算器上的每个按钮使用 BUTTON 标签实际上会更好（即在语义上更正确）。

按钮支持属性“值”。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

Answer 4

由于 div 元素没有值属性，您可以改用数据属性。

const num_keyboard = document.querySelectorAll(".btn-opt");
let numArray = Array.from(num_keyboard);

for (let c = 0; c < numArray.length; c++) {
  numArray[c].addEventListener("click", () => {
    alert(`Foi: ${numArray[c].dataset.value}`);
  })
};

<div id="num_keyboard">
  <div class="btn-opt" data-value="1">1</div>
  <div class="btn-opt" data-value="2">2</div>
  <div class="btn-opt" data-value="3">3</div>
  <div class="btn-opt" data-value="4">4</div>
  <div class="btn-opt" data-value="5">5</div>
  <div class="btn-opt" data-value="6">6</div>
  <div class="btn-opt" data-value="7">7</div>
  <div class="btn-opt" data-value="8">8</div>
  <div class="btn-opt" data-value="9">9</div>
  <div class="btn-opt" data-value="0">0</div>
</div>

Answer 5

您可以将按下的键压入和弹出到堆栈（数组）中。这样您就可以使用清晰的输入功能。

注意： <div> 元素不存在值属性。我会将其更改为数据属性，即 data-value 并通过 element.dataset.value.

访问它

const history = [];

const refresh = () => {
  document.querySelector('.output').textContent = history.join('');
};

const  handleClearEntry  =    ()   => history.pop();
const handleClearHistory =    ()   => history.splice(0, history.length);
const    handleInput     = (value) => history.push(value);

const handleClick = (e) => {  
  switch (e.target.dataset.value) {
    case 'CE':
      handleClearEntry();
      break;
    case 'C':
      handleClearHistory();
      break;
    default:
      handleInput(e.target.dataset.value);
      break;
  }
  refresh();
};

[...document.querySelectorAll('.btn-opt')].forEach(btn =>
  btn.addEventListener('click', handleClick));

body {
  background: #111;
  color: #EEE;
}

.calculator {
  display: flex;
  flex-direction: column;
}

.output {
  min-height: 1.25em;
  padding: 0.5em;
  border: thin solid #333;
  margin-bottom: 0.5em;
  font-family: monospace;
}

.keyboard {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-row-gap: 0.25em;
  grid-column-gap: 0.25em;
  flex: 1;
}

.btn-opt {
  height: 2em;
  line-height: 2em;
  text-align: center;
  border: thin solid #222;
  background: #333;
  color: #EEE;
}

.btn-opt:hover {
  cursor: pointer;
  background: #444;
}

<div class="calculator">
  <div class="output"></div>
  <div class="keyboard">
    <div class="btn-opt" data-value="1">1</div>
    <div class="btn-opt" data-value="2">2</div>
    <div class="btn-opt" data-value="3">3</div>
    <div class="btn-opt" data-value="4">4</div>
    <div class="btn-opt" data-value="5">5</div>
    <div class="btn-opt" data-value="6">6</div>
    <div class="btn-opt" data-value="7">7</div>
    <div class="btn-opt" data-value="8">8</div>
    <div class="btn-opt" data-value="9">9</div>
    <div class="btn-opt" data-value="0">0</div>
    <div class="btn-opt" data-value="CE">CE</div>
    <div class="btn-opt" data-value="C">C</div>
  </div>
</div>

Answer 6

谢谢大家的帮助，你们救了我！

Answer 7

将 <div> 更改为 <button> :

    <div id="num_keyboard">
        <button class="btn-opt" value="1">1</button >
        <button class="btn-opt" value="2">2</button >
        <button class="btn-opt" value="3">3</button >
        <button class="btn-opt" value="4">4</button >
        <button class="btn-opt" value="5">5</button >
        <button class="btn-opt" value="6">6</button >
        <button class="btn-opt" value="7">7</button >
        <button class="btn-opt" value="8">8</button >
        <button class="btn-opt" value="9">9</button >
        <button class="btn-opt" value="0">0</button >
  </div>

<script>
    const num_keyboard = document.querySelectorAll(".btn-opt");
    let numArray = Array.from(num_keyboard);

    console.log(numArray);

    for(let c = 0; c <= numArray.length; c++) {
      numArray[c].addEventListener("click", () => {
        alert(`Foi: ${numArray[c].value}`);
      })
    };

  </script>

无法获取“div”元素的值

unable to get value of `div` elements

html

javascript

calculator