为什么我的“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&nbsp;onclick="setText(this)"></div>然后在函数中使用参数变量。function&nbsp;setText(div)&nbsp;{ &nbsp;&nbsp;div.innerHTML=prompt('Enter&nbsp;a&nbsp;number'); }有关详细信息，请参阅“this”关键字如何工作？

Answer 2

this如果您使用 JavaScript 添加该值，则仅为事件处理程序设置该值，例如使用addEventListener.document.querySelector('div').addEventListener('click',&nbsp;function(e){ &nbsp;&nbsp;&nbsp;this.innerHTML=prompt('Enter&nbsp;a&nbsp;number')&nbsp; &nbsp;&nbsp;&nbsp;});<div>Click&nbsp;me</div>