（vanilla javascript 计算器）我如何从这个 nodeList 中获取 nodeValue？
[英](vanilla javascript calculator) How do I get the nodeValue from this nodeList?
问题描述
What I'm trying to do is grab the node that was clicked and add it to the innerHTML of the screen I have set up.
我想要做的是抓取被点击的节点并将其添加到我设置的屏幕的innerHTML中。 However, it seems as though my for loop is completing before I can get that value.但是，似乎我的 for 循环在获得该值之前就已完成。 In my case, keys[3] doesn't exist, so it is returning an error, but I would like to have the loop stop on the 'clicked' element and grab that value.在我的情况下，keys[3] 不存在，所以它返回一个错误，但我想让循环停止在 'clicked' 元素上并获取该值。
5 个解决方案
解决方案1
1 2016-09-11 00:15:29
What you need to do is use textContent instead of nodeValue to get 1, 2, or 3. Next, use this instead of keys[i] .您需要做的是使用textContent而不是nodeValue来获取 1、2 或 3。接下来，使用this而不是keys[i] 。
var screen = document.getElementById("screen"); var keys = document.querySelectorAll('.keys'); for (var i = 0; i < keys.length; i++) { keys[i].addEventListener('click', function() { screen.innerHTML += this.textContent; }); }
#calculator { width: 500px; height: 600px; border: 1px solid black; } #screen { width: 100%; height: 100px; border: 1px solid black; } .keys { width: 24%; display: inline-block; border: 1px solid black; height: 50px; cursor: pointer; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div id="calculator"> <div id="screen"> </div> <div class="keys">1</div> <div class="keys">2</div> <div class="keys">3</div> </div> </body> </html>
Now this should be working properly as it gets the text content, and instead of keys[i] , it uses this as i doesn't exist outside the loop.现在这应该可以正常工作，因为它获取文本内容，而不是keys[i] ，它使用this因为i在循环之外不存在。 this references the current element. this引用当前元素。 You could always define the anonymous function outside, and use a for-each loop.您始终可以在外部定义匿名函数，并使用 for-each 循环。
解决方案2
0 2016-09-11 00:03:07
I would use let not var.我会使用 let not var。 This works:这有效：
for (let i = 0; i < keys.length; i++) {
keys[i].addEventListener('click', function() {
screen.innerHTML += keys[i].firstChild.nodeValue;
});
Ok: Edit:好的： 编辑：
var screen = document.getElementById("screen");
var keys = document.querySelectorAll('.keys');
var val = 0;
screen.innerHTML = 0;
for (let i = 0; i < keys.length; i++) {
keys[i].addEventListener('click', function() {
val += parseInt(keys[i].firstChild.nodeValue);
screen.innerHTML = val;
});
}
And to clarify: I would (allways) use let i = 0 in a loop because it also works with async operations in a loop because it is a block scope.并澄清：我会（总是）在循环中使用 let i = 0 因为它也适用于循环中的异步操作，因为它是一个块作用域。
Not applying to this particular case but try this:不适用于这种特殊情况，但试试这个：
var x = [1,2,3,4];
for(var i = 0; i<x.length; i++){
window.setTimeout(function(){
console.log(i);
},Math.random())
}
//console.log returns: 4 4 4 4
for(let i = 0; i<x.length; i++){
window.setTimeout(function(){
console.log(i);
},Math.random())
}
//console.log returns 0 1 2 3
See the difference?看到不同？
解决方案3
0 2016-09-11 00:15:15
The i variable exists only in the loop, it does not exist in the click event. i变量只存在于循环中，它不存在于click事件中。
Try changing this:尝试改变这个：
screen.innerHTML += keys[i].firstChild.nodeValue;
To this:对此：
screen.innerHTML += this.outerHTML;
解决方案4
0 2016-09-11 00:17:43
for (var i = 0; i < keys.length; i++) {
keys[i].addEventListener('click', function(e) {
console.log(e, e.target)
screen.innerHTML += e.target.innerHTML;
});
i would use e.target to get anything out of div.我会使用 e.target 从 div 中获取任何东西。 this feels more clean.这样感觉更干净。 That is if you goal is to get any text that is in a container.也就是说，如果您的目标是获取容器中的任何文本。 Although this would not be the most effective way to make a calculator.虽然这不是制作计算器的最有效方法。
http://jsbin.com/rifekejivi/1/edit?html,css,js,console,output http://jsbin.com/rifekejivi/1/edit?html,css,js,console,output
解决方案5
0 2016-09-11 00:23:30
just add a click event to the body, and check if the targets class name equals key, then add the textContent of the target to screen只需在正文中添加一个点击事件，并检查目标类名是否等于键，然后将目标的 textContent 添加到屏幕
"use strict"
var screen = document.getElementById("screen");
var keys = document.querySelectorAll('.keys');
// for (var i = 0; i < keys.length; i++) {
// keys[i].addEventListener('click', function() {
// screen.innerHTML += this.textContent;
// });
// }
document.body.addEventListener('click', function(e) {
let target = e.target;
switch(target.className) {
case "keys":
screen.innerHTML += target.textContent;
break;
default:
}
})
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.