为什么我的“ this.innerHTML = prompt'输入数字'”是内联的，但是当我将其实现为函数的一部分时却不能起作用？

问题描述

我创建了一个{x {1}}的4x4网格，您可以在其中单击单元格，然后浏览器会提示您输入数字。如果输入文本，则文本将显示在您刚刚单击的网格中。

我可以使用以下代码：

<div>

但是，当我尝试将此功能实现为以上述代码为模型的功能时，我无法从提示中获取输入内容以放入innerHTML属性。这是我尝试过的：

<div onclick="this.innerHTML=prompt('Enter a number')"></div>

function setText() { this.innerHTML=prompt('Enter a number'); } 似乎有问题。有谁知道如何使this.innerHTML在函数中起作用？我希望this引用触发onclick事件的this，但似乎不这样做。

这是我编写的HTML，CSS和Javascript：

<div>

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;
}

任何帮助将不胜感激。

解决方法

您需要将this传递给函数。

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

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

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

有关更多信息，请参见How does the "this" keyword work?

,

this值仅在使用JavaScript（例如，JavaScript）添加时为事件处理程序设置。使用addEventListener。

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

<div>Click me</div>