CODEWITHSUNDEEP
javascripthtml
php
php

Reputation: 25

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

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();

Upvotes: 0

Views: 856

Answers (3)

vrijdenker
vrijdenker

Reputation: 1431

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>";

Upvotes: 0

ldavid
ldavid

Reputation: 2552

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();

Upvotes: 0

php
php

Reputation: 25

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;
    }

Upvotes: 1

Related Questions