How to change a tag's internal value?

Question

I am trying to make it so when you click on one of the <td>s in the table, the SVG will appear in it. This is a version of my code with four slots instead of 64, but the functions are the same:

function addPiece() {
  document.getElementsByName("square").innerHTML = document.write("<svg width='100' height='100'> <circle cx='50' cy='50', r='40' stroke='black' stroke-width='4' fill='white' /> </svg>");
}

.square {
  background-color: #459f60;
  width: 100px;
  height: 100px;
}

<table style="border: 2px solid #808080">
  <tr>
    <td class="square" name="square" id="0-0" onclick="addPiece()"></td>
    <td class="square" name="square" id="0-1" onclick="addPiece()"></td>
  </tr>
  <tr>
    <td class="square" name="square" id="1-0" onclick="addPiece()"></td>
    <td class="square" name="square" id="1-1" onclick="addPiece()"></td>
  </tr>
</table>

The problem with this code is that it just replaces the whole thing with the SVG instead of inputting it inside the <td> that was clicked. It will be very appreciated to get some help here as I'm really low level in js and html.

You don't need that `document.write` at all. Just set the `innerHTML` to the string that you want. — Aioros, Jan 13 '20 at 18:12
On top of @Aioros comment, you can take a look at how you can create an ` — norbitrial, Jan 13 '20 at 18:15

score 3 · Accepted Answer · edited Jan 14 '20 at 18:57

The problem is using document.write. This will override your whole document HTML. Use .innerHTML attribute instead to override the HTML inside your selected element.

Notice that in my code snippet I added id for the elements and I passed it to the function call.

function addPiece(id) {
  document.getElementById(id).innerHTML = "<svg width='100' height='100'> <circle cx='50' cy='50', r='40' stroke='black' stroke-width='4' fill='white' /> </svg>"
}

.square {
  background-color: #459f60;
  width: 100px;
  height: 100px;
}

<table style="border: 2px solid #808080">
  <tr>
    <td class="square" id="square1" name="square" id="0-0" onclick="addPiece(this.id)"></td>
    <td class="square" id="square2" name="square" id="0-1" onclick="addPiece(this.id)"></td>
  </tr>
  <tr>
    <td class="square" id="square3" name="square" id="1-0" onclick="addPiece(this.id)"></td>
    <td class="square" id="square4" name="square" id="1-1" onclick="addPiece(this.id)"></td>
  </tr>
</table>

Thank you very much, this solves my problem perfectly! – Samuel Robinson Jan 13 '20 at 19:53 — Samuel Robinson, Jan 13 '20 at 19:53

score 1 · Answer 2 · answered Jan 13 '20 at 18:56

HTML attributes does not support single qoutes as you're using in javascript.

<table style="border: 2px solid #808080" id="table">
  <tr>
      <td class="square" id="square1" name="square">d</td>
      <td class="square" id="square2" name="square">s</td>
  </tr>
  <tr>
      <td class="square" id="square3" name="square">dd</td>
      <td class="square" id="square4" name="square">eee</td>
  </tr>
</table>

Here is it's Jquery code to show

$(document).ready(function(){
  $('#table td').click(function(){
    var addhtml='<svg width="100" height="100"> <circle cx="50" cy="50", r="40" stroke="black" stroke-width="4" fill="white" /> </svg>';
    $(this).html(addhtml);
  })
});

When using jquery No need to add function in very element. You can call them simply using this class.

DamienVassart · Answer 3 · 2020-01-13T18:38:41.980

0

I think the document.write() is useless here. You should instead try like this:

document.getElementsByName("square").innerHTML = "<svg width='100' height='100'> <circle cx='50' cy='50', r='40' stroke='black' stroke-width='4' fill='white' /> </svg>";

edited Jan 13 '20 at 18:38

answered Jan 13 '20 at 18:19

DamienVassart

171
3

score 0 · Answer 4 · answered Jan 13 '20 at 18:55

Dont use document.write to set content into html DOM. As its name, document.write set content to whole document (overwrite whole html). Just pass the content with innerHTML directly.

function addPiece() {
  document.getElementsByName("square").innerHTML = "<svg width='100' height='100'> <circle cx='50' cy='50', r='40' stroke='black' stroke-width='4' fill='white' /> </svg>";
}

.square {
  background-color: #459f60;
  width: 100px;
  height: 100px;
}

<table style="border: 2px solid #808080">
  <tr>
    <td class="square" name="square" id="0-0" onclick="addPiece()"></td>
    <td class="square" name="square" id="0-1" onclick="addPiece()"></td>
  </tr>
  <tr>
    <td class="square" name="square" id="1-0" onclick="addPiece()"></td>
    <td class="square" name="square" id="1-1" onclick="addPiece()"></td>
  </tr>
</table>

How to change a tag's internal value?

4 Answers4