如何解决无法获取`div` 元素的值
我需要用 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>
解决方法
您无法使用 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>
,
谢谢你们的帮助,你们救了我!
,只需获取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>
Imvain 的评论和 iota 对使用数据属性的回答是一个好的开始。
考虑到您正在构建的是一个计算器,为计算器上的每个按钮使用 BUTTON 标签实际上会更好(即在语义上更正确)。
按钮确实支持属性,“值”。
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
,由于 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>
您可以将按下的键推入和弹出到堆栈(数组)中。这样您就可以使用清晰的输入功能。
注意: <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>
将 <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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。