Why does my "this.innerHTML=prompt('Enter a number')" work inline but not when I implement it as part of a function?

Question

I've created a 4x4 grid of <div>s where you can click on the cells and be prompted by the browser to enter a number. If you enter text, the text is displayed in the grid you just clicked on.

I have it working with the following code:

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

But when I try to implement this feature as a function that is modelled on the above code, I cannot get the input from the prompt to be put into the innerHTML property. This is what I have tried:

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

There seems to be an issue with the this.innerHTML. Does anyone know how to make this work in a function? I want the this to refer to the <div> that triggers the onclick event but it doesn't seem to do that.

Here is the HTML, CSS and Javascript I wrote:

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>

Any help would be greatly appreciated.

score 2 · Answer 1 · answered Aug 14 '20 at 00:33

you need to pass this to the function.

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

and then use a parameter variable in the function.

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

For more information see How does the "this" keyword work?

score 0 · Accepted Answer · answered Aug 14 '20 at 00:36

0

The this value is only set for the event handler if you add it using JavaScript, e.g. using addEventListener.

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

<div>Click me</div>

answered Aug 14 '20 at 00:36

Unmitigated

76,500
11
62
80

Why does my "this.innerHTML=prompt('Enter a number')" work inline but not when I implement it as part of a function?

2 Answers2