为什么我的“this.innerHTML=prompt('Enter a number')”

Question

我创建了一个<div>s 的 4x4 网格，您可以在其中单击单元格，浏览器会提示您输入数字。如果输入文本，文本将显示在您刚刚单击的网格中。我让它与以下代码一起工作：<div onclick="this.innerHTML=prompt('Enter a number')"></div>但是，当我尝试将此功能实现为以上述代码为模型的函数时，我无法从提示中获取要放入 innerHTML 属性中的输入。这是我试过的：function setText() {  this.innerHTML=prompt('Enter a number');}似乎有问题this.innerHTML。有谁知道如何this在函数中工作？我想this引用<div>触发 onclick 事件的，但它似乎没有这样做。这是我写的 HTML、CSS 和 Javascript：function setText() {  this.innerHTML=prompt('Enter a number');}* {  margin: 0;  padding: 0;}section {  display: flex;  height: 100vh;  justify-content: center;  align-items: center;  background-color: lightblue;}.grid {  display: grid;  gap: 2px;  grid-template-columns: repeat(4, 12vw);  grid-template-rows: repeat(4, 12vw);  font-size: 8vw;}.grid div {  background-color: green;  display: flex;  justify-content: center;  align-items: center;  color: white;}<section>  <div class="grid">    <div onclick="setText();"></div>    <div onclick="this.innerHTML=prompt('Enter a number')"></div>    <div onclick="this.innerHTML=prompt('Enter a number')"></div>    <div onclick="this.innerHTML=prompt('Enter a number')"></div>    <div onclick="this.innerHTML=prompt('Enter a number')"></div>    <div onclick="this.innerHTML=prompt('Enter a number')"></div>    <div onclick="this.innerHTML=prompt('Enter a number')"></div>    <div onclick="this.innerHTML=prompt('Enter a number')"></div>    <div onclick="this.innerHTML=prompt('Enter a number')"></div>    <div onclick="this.innerHTML=prompt('Enter a number')"></div>    <div onclick="this.innerHTML=prompt('Enter a number')"></div>    <div onclick="this.innerHTML=prompt('Enter a number')"></div>    <div onclick="this.innerHTML=prompt('Enter a number')"></div>    <div onclick="this.innerHTML=prompt('Enter a number')"></div>    <div onclick="this.innerHTML=prompt('Enter a number')"></div>    <div onclick="this.innerHTML=prompt('Enter a number')"></div>  </div><section>任何帮助将不胜感激。

Answer 1

你需要传递this给函数。

<div onclick="setText(this)"></div>

然后在函数中使用参数变量。

function setText(div) {
  div.innerHTML=prompt('Enter a number');
}

有关详细信息，请参阅“this”关键字如何工作？

Answer 2

this如果您使用 JavaScript 添加该值，则仅为事件处理程序设置该值，例如使用addEventListener.

document.querySelector('div').addEventListener('click', function(e){
   this.innerHTML=prompt('Enter a number') 
   });

<div>Click me</div>