Javascript元素数组innerHTML返回未定义答案

【问题标题】：Javascript element array innerHTML returning undefinedJavascript元素数组innerHTML返回未定义
【发布时间】：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

标签： javascript arrays for-loop innerhtml

【解决方案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;

【讨论】：