Javascript 元素数组 innerHTML 返回未定义

Question

所以我试图简单地显示每个 'num' div 中写的 numbers/signs。哪些应该可以通过 innerHTML 正确访问？所以我有一个 for 循环遍历我的所有 'num' divs，带有点击监听器，尽管点击返回未定义，而不是每个元素的 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>

Answer 1

我认为将 id 添加到按钮会更容易，然后使用“e.target.id”获取元素 id，然后使用 innerhtml

Answer 2

简单做

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>

Answer 3

concat screen innerHTML 时忘记使用 number[i]:

screen.innerHTML += number.innerHTML;
// correct:
screen.innerHTML += number[i].innerHTML;

您可以使用事件获取目标：

screen.innerHTML += e.target.innerHTML;

Javascript 元素数组 innerHTML 返回未定义

Javascript element array innerHTML returning undefined

javascript

arrays

for-loop

innerhtml