Javascript元素数组innerHTML返回未定义
Posted
技术标签:
【中文标题】Javascript元素数组innerHTML返回未定义【英文标题】：Javascript element array innerHTML returning undefined 【发布时间】：2021-05-24 07:43:10 【问题描述】：所以我试图简单地显示写在每个“num”div 中的数字/符号。哪个应该可以通过正确的 innerhtml 访问？所以我有一个 for 循环遍历我所有的 'num' div，并带有一个点击侦听器，尽管点击返回的是未定义的，而不是每个元素的 innerHTML。
我也尝试过（this.innerHTML 而不是循环中事件侦听器中的 number[i].innerHTML）。无济于事。
我一定遗漏了什么，请帮忙。
const screen = document.querySelector('.screen')
const number = document.querySelectorAll('.num')
const opr = document.querySelector('.opr')
const clr = document.querySelector('.clr')
for (i = 0; i < number.length; i++)
number[i].addEventListener('click', (e) =>
screen.innerHTML += number.innerHTML
console.log(number[i].innerHTML)
console.log('clicked')
)
<head>
<link rel="stylesheet" type="text/css" href="src/style.css">
<title> File Title </title>
<meta charset="UTF-8">
</head>
<body>
<div class="calculator">
<div class="screen">
</div>
<div class="inputs">
<button class="opr add">+</button>
<button class="opr sub">-</button>
<button class="opr div">/</button>
<button class="opr mult">*</button>
<button class="num">1</button>
<button class="num">2</button>
<button class="num">3</button>
<button class="num">4</button>
<button class="num">5</button>
<button class="num">6</button>
<button class="num">7</button>
<button class="num">8</button>
<button class="num">9</button>
<button class="num">0</button>
<button class="opr dot">.</button>
<button class="opr eql">=</button>
<button class="clr">C</button>
</div>
</div>
<script src="src/script.js"></script>
</body>【问题讨论】：
突然想到：document.querySelector('.screen') 可能需要是document.querySelector('.screen')[0]——querySelector 可能正在返回一个数组。此外，将您的变量包装在Number() 中——这些可能会将数字作为字符串获取，而您的连接字符串则放在screen.innerHTML += number.innerHTML
@Coll querySelector 只返回匹配选择器的元素的第一次出现。 querySelectorAll 返回一个可以被索引的HTMLElementCollection。
@HaoWu 是的，谢谢。刚刚查了一下 .querySelector！
我很好奇缺少的 CSS。 （这是使用事件委托的教科书案例）
尝试使用<butttttton 而不是<buttton
【参考方案1】：
简单地做
const
screen = document.querySelector('.screen')
, number = document.querySelectorAll('.num')
, opr = document.querySelector('.opr')
, clr = document.querySelector('.clr')
number.forEach(nElm => nElm.onclick = e => screen.textContent += nElm.textContent )
或使用事件委托
const
screen = document.querySelector('#screen')
, buttons = document.querySelector('#inputs')
buttons.onclick = (target) =>
if (!target.matches('button[data-op]')) return
switch (target.dataset.op)
case 'num':
screen.textContent += target.textContent.trim()
break;
case 'calc':
screen.textContent += target.textContent
break;
case 'clr':
screen.textContent = ''
break;
case 'eql':
screen.textContent = eval(screen.textContent)
break;
#screen
display : block;
width : 200px;
height : 20px;
padding : 10px;
background-color: aquamarine;
text-align: right;
<div id="calculator">
<div id="screen"> </div>
<div id="inputs">
<button data-op="calc" > + </button>
<button data-op="calc" > - </button>
<button data-op="calc" > / </button>
<button data-op="calc" > * </button> <br>
<button data-op="num" > 1 </button>
<button data-op="num" > 2 </button>
<button data-op="num" > 3 </button>
<button data-op="num" > 4 </button> <br>
<button data-op="num" > 5 </button>
<button data-op="num" > 6 </button>
<button data-op="num" > 7 </button>
<button data-op="num" > 8 </button> <br>
<button data-op="num" > 9 </button>
<button data-op="num" > 0 </button>
<button data-op="num" > . </button> <br>
<button data-op="eql" > = </button>
<button data-op="clr" > C </button>
</div>
</div>【讨论】：
非常感谢，事实证明数据属性是完成这项工作的最佳方式。我会认为 innerHTML 是可以访问的。【参考方案2】：我认为将 id 添加到按钮会更容易，然后使用“e.target.id”获取元素 id，然后使用 innerhtml
【讨论】：
我尝试了使用 ids aswel 但它仍然返回未定义。事实证明数据属性有效。虽然我想知道为什么无法检测到 innerHTML。【参考方案3】：concat screen innerHTML 时忘记使用number[i]：
screen.innerHTML += number.innerHTML;
// correct:
screen.innerHTML += number[i].innerHTML;
你可以使用事件来获取目标：
screen.innerHTML += e.target.innerHTML;
【讨论】：
以上是关于Javascript元素数组innerHTML返回未定义的主要内容，如果未能解决你的问题，请参考以下文章
Javascript - 从数组中查找所有类，从类中获取并返回内部文本
Javascript innerHTML.indexOf（）CSS控件
单击按钮类时返回p类的innerhtml自定义javascript谷歌标签管理器
[ jquery 方法 html([val|fn]) ] 此方法操作匹配的元素或元素集中的内容,相当于javascript中的innerHTML