document.getElementById.innerHTML does not write anything ..?

Question

My Problem:

document.getElementById("values").innerHTML does not write anything. If I try to do document.getElementById("values").innerHTML = "stuff"; (just with a String) - nothing happens.

What am I doing wrong here?

HTML:

<form onsubmit="save_entry();return false;">
  <label for="i_km">Kilometer: <input type="text" name="km" id="i_km"></label><br>
  <label for="i_fuel">Sprit: <input type="text" name="fuel" id="i_fuel"></label><br>
  <input type="submit" value="Save" />
</form>
<div id="values"></div>

JavaScript:

function save_entry() {
  var anzahl = localStorage.length/2;
  var nameKeyKm = "k" + anzahl;
  localStorage.setItem(nameKeyKm,document.forms[0]["km"].value);
  var nameKeyF = "F" + anzahl;
  localStorage.setItem(nameKeyF,document.forms[0]["fuel"].value);
  document.write("Entry saved!")
}

function show_entry() {
  document.getElementById("values").innerHTML = "<table><th>Kilometers</th><th>Tanked</th>";
  for (var i = 0; i < localStorage.length/2; i++) {
    alert("d");
    var temp_km = "k"+i;
    var temp_f = "F"+i;
    document.getElementById("values").innerHTML = "<tr>";
    document.getElementById("values").innerHTML = "<td>"+localStorage.getItem(temp_km)+"</td>";
    document.getElementById("values").innerHTML = "<td>"+localStorage.getItem(temp_f)+"</td>";
    document.getElementById("values").innerHTML = "</tr>";
  }
  document.getElementById("values").innerHTML = "</table>";
}
show_entry();

score 1 · Answer 1 · answered Oct 19 '14 at 18:55

This does work!

function show_entry(){
    var content = '';
    content = content + '<table><th>Kilometer</th><th>Getankt</th>';

    for(var i = 0; i < localStorage.length/2; i++)
    {
    var temp_km = "k"+i;
    var temp_f = "F"+i;
    content = content + "<tr>";
    content = content + "<td>"+localStorage.getItem(temp_km)+"</td>";
    content = content + "<td>"+localStorage.getItem(temp_f)+"</td>";
    content = content + "</tr>";
    }
    content = content + "</table>";

    document.getElementById("values").innerHTML = content;
    }

vrijdenker · Answer 2 · 2014-10-19T19:02:31.873

Each time you do

document.getElementById("values").innerHTML = "...";

you will replace the html inside the div with ID 'values' So calling it multiple times with different values doesn't make sense.

You would either call it once and setting the whole innerHTML at once, like this

document.getElementById("values").innerHTML = "<tr><td>....etc...</td></tr>";

If you would call innerHTML sequentially you would do it as follows (which is just how to append any string in javascript), but in the comments below I just learned this should not be done like this:

document.getElementById("values").innerHTML += "<tr>";
document.getElementById("values").innerHTML += "<td>"+localStorage.getItem(temp_km)+"</td>";
document.getElementById("values").innerHTML += "<td>"+localStorage.getItem(temp_f)+"</td>";
document.getElementById("values").innerHTML += "</tr>";

Don't "append" HTML like that. It causes the existing DOM to be serialised to HTML, edited, then a new DOM is generated from the result and assigned back. You *cannot* put partial elements in by appending them to `innerHTML` sequentially. — Quentin, Oct 19 '14 at 18:55

score 0 · Answer 3 · answered Oct 19 '14 at 19:01

innherHTML is an attribute, so everytime you write document.getElementById('id').innerHTML = '...' you are actually changing the value of innerHTML to that thing, not concatenating it.

So writing document.getElementById("values").innerHTML = "<table><th>Kilometers</th><th>Tanked</th>"' changes the value of innerHTML to "<table><th>Kilometers</th><th>Tanked</th>"', and, afterwards, you replaced this value for <tr>, then for <td>...</td> and so on...

You clearly want to create a table. Therefore, you should be concatenating the strings, using +=, like this:

function show_entry() {
    document
        .getElementById("values")
        .innerHTML = "<table><th>Kilometers</th><th>Tanked</th>";

    for(var i = 0; i < localStorage.length/2; i++)
    {
        var temp_km = "k"+i;
        var temp_f = "F"+i;

        document.getElementById("values").innerHTML += "<tr>";
        document.getElementById("values").innerHTML += "<td>"+localStorage.getItem(temp_km)+"</td>";
        document.getElementById("values").innerHTML += "<td>"+localStorage.getItem(temp_f)+"</td>";
        document.getElementById("values").innerHTML += "</tr>";
    }

    document.getElementById("values").innerHTML += "</table>";
}

show_entry();

document.getElementById.innerHTML does not write anything ..?

My Problem:

HTML:

JavaScript:

3 Answers3