Question

我的问题：

document.getElementById("values").innerHTML没有写任何东西。如果我尝试document.getElementById("values").innerHTML = "stuff";（仅使用字符串） - 没有任何反应。

我在这里做错了什么？

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

Answer 1

这确实有用！

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

Answer 2

每次你做

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

你将用ID'值'替换div中的html 因此，使用不同的值多次调用它是没有意义的。

您可以调用一次并立即设置整个innerHTML，就像这样

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

如果您按顺序调用innerHTML，您可以按照以下方式执行此操作（这只是如何在javascript中附加任何字符串），但在下面的评论中我刚刚了解到这应该不能这样做：

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

Answer 3

innherHTML是一个属性，因此每次编写document.getElementById('id').innerHTML = '...'时，实际上都会将innerHTML的值更改为该内容，而不是将其连接起来。

因此，写document.getElementById("values").innerHTML = "<table><th>Kilometers</th><th>Tanked</th>"'会将innerHTML的值更改为"<table><th>Kilometers</th><th>Tanked</th>"'，之后，您将此值替换为<tr>，然后替换为<td>...</td>等等上...

你显然想要创建一个表。因此，您应该使用+=连接字符串，如下所示：

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没有写任何东西..？

我的问题：

HTML：

的JavaScript：

3 个答案: