为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

九州编程 2023-01-06 15:47:12

我创建了一个<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>

任何帮助将不胜感激。



查看完整描述

2 回答

?
湖上湖

TA贡献1742条经验 获得超2个赞

你需要传递this给函数。

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

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

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

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


查看完整回答
反对 回复 2023-01-06
?
qq_遁去的一_1

TA贡献1468条经验 获得超7个赞

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


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


查看完整回答
反对 回复 2023-01-06
  • 2 回答
  • 0 关注
  • 9 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信