无法获取“div”元素的值答案

【问题标题】：unable to get value of `div` elements无法获取“div”元素的值
【发布时间】：2021-01-04 18:53:56
【问题描述】：

我需要用 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>

【问题讨论】：

<div> 元素没有值。
将 numArray[c].value 更改为 numArray[c].getAttribute("data-value") 并在 div 中在 value 之前添加 data-，因为 div 不获取值。
正如 imvain2 提到的，使用数据属性。另外，在事件回调中使用事件目标： numArray[c].addEventListener("click", (event) => { alert(Foi: ${event.target.getAttribute("data-value")}); })
使用按钮....

标签： javascript html calculator

【解决方案1】：

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

然而，这会返回一个 HTML 属性，因此您需要获取 textContent。例如numArray[c].attributes["value"].textContent

这会将数字作为字符串返回。从那里你可以把它变成一个 int。

编辑：查看代码和您的个人资料，我可以看出这是您的第一个 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>

【讨论】：

另外，需要明确的是，我同意其他评论者的观点，即还有其他更好的方法来处理这个问题。这对我来说似乎也超级hack-y。这确实回答了这个问题，但是
很好解释。很高兴你花时间把它写下来。重要的是，新的 HTML 开发人员从正确的角度开始，并意识到有大量不同的标签具有明确的目的（语义上），并且在技术中成长，而不是“过度分割”一切。感谢您花时间帮助他。干杯。

【解决方案2】：

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

【讨论】：

【解决方案3】：

由于div 元素没有 value 属性，您可以使用 data-attributes 代替。

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>

【讨论】：

【解决方案4】：

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

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

按钮确实支持属性“值”。

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

【讨论】：

【解决方案5】：

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

注意：<div> 元素不存在 value 属性。我会将其更改为数据属性，即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>

【讨论】：

【解决方案6】：

将<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>

【讨论】：

【解决方案7】：

只需获取 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>

【讨论】：

相当老套的方法 - cmets 建议使用 data- 属性更符合用户的需求。
无论如何，在 DIV 中使用“值”在语义上很奇怪。 IMO 应更改标记以更好地表达语义。
解决方案已更新以从 div 中删除值
textContent 的值会更合适。