Attempting to concatenate a variable into an img source, but it ignores the variable

Question

var tmp = "";

function putItem()
{
    this.innerHTML = "<img src = 'image/"+tmp+".png'>";
}

---

I also have a td that calls this

<img src = 'images/wood.png' onclick = 'tmp = "wood";'>
<td onclick = "grid1 = tmp; checkEmpty(); putItem(this);">

---

I tested it by making the "<img src = 'image/"+tmp+".png'>"; a variable and when I returned what the variable was when tmp wasnt an empty string it came out as "<img src = 'image/.png'>" ie it ignored the tmp.

Any help?

I'm trying to make the "Minecraft (c) Crafting Table" for a web dev project

Answer 1

Question changed. Now it seems that the only issue is that you need to use .call to set the this value in putItem.

<img src = 'images/wood.png' onclick = 'tmp = "wood";'>
<td onclick = "grid1 = tmp; checkEmpty(); putItem.call(this);">

---

---

Original answer

I assume instead of this...

              <!--   v---- assign empty string to global grid1 variable -->
<td onclick = "grid1 = tmp; checkEmpty(); putItem(this);">

You want this...

          <!--     v---- assign "grid1" string to global tmp variable -->
<td onclick = "tmp = 'grid1'; checkEmpty(); putItem.call(this);">
          <!-- set the value of "this" in "putItem"---^  -->

So now you're assigning the "grid1" string to the tmp variable, and when you call putItem(), you're using .call to set its this value.

---

That said, instead of using a global variable, why not just pass the string?

function putItem( str ) {
    this.innerHTML = "<img src = 'image/" + str + ".png'>";
}

---

<td onclick = "checkEmpty(); putItem.call(this, 'grid1');">