Question

我遇到了“无法将属性'innerHTML'设置为null”的问题。有人可以看一下我的代码并告诉我哪里出了问题吗？我伤了脑筋，但是什么也解决不了我的问题。

此script.js设置在本节末尾。我包括我的HTML和JS代码。您能给我一些建议如何解决吗？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Przelicznik walut</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <section class="logo">
        <p id="titleWeb">Mini Przelicznik Walut</p>
    </section>
<section id="mainKantor">
    <div id="tablicaWalut">

        <label id="loginName">Login:</label>
        <input type="text" placeholder="a" id="login">

        <label id="passwordName">Hasło:</label>
        <input type="text" placeholder="b" id="password">

        <input id="submit" name="submit" type="submit" value="Send">
        <div id="pokaz"></div>
    </div>
    <div id="kursWalut">
        <p>Aktualny kurs:</p>
    </div>
    <div style="clear: both;"></div>
</section>
<script src="script.js"></script>
</body>
</html>

const USDRate = 3.79;
const EuroRate = 4.29;

function showValue() {
    const loginInput = document.getElementById("login");
    const passwordInput = document.getElementById("password");
    const loginValue = loginInput.value;
    const passwordValue = passwordInput.value;
    const correctLogin = "a";
    const correctPassword = "b";

    if (correctLogin === loginValue && correctPassword === passwordValue) {
        document.getElementById('loginName').remove();
        document.getElementById('login').remove();
        document.getElementById('passwordName').remove();
        document.getElementById('password').remove();
        document.getElementById('submit').remove();
        document.getElementById('tablicaWalut').innerHTML = "<input type='button' value='Odśwież stronę' id='odswiez' onclick='location.reload()'>";

        function tablica() {
            document.getElementById('pokaz').innerHTML = "<div id='kwotyPierwsze'>b</div>";
            document.getElementById('pokaz').innerHTML = "<div id='kwotyDrugie'>b</div>";
            document.getElementById('kwotyPierwsze').innerHTML = "<input type='text' placeholder='kwota' id='walutaPn1'>";
            document.getElementById('kwotyPierwsze').innerHTML = "<input type='button' value='przeslij' id='przeslijPl1'>";
            document.getElementById('kwotyDrugie').innerHTML = "<input type='text' placeholder='Ile PLN chcesz zamienić?' id='walutaPn2'>";
            document.getElementById('kwotyDrugie').innerHTML = "<input type='button' value='transferUSD' id='przeslijPl2'>";
            document.getElementById('kwotyDrugie').innerHTML = "<input type='button' value='transferEUR' id='przeslijPl3'>";
        }
        tablica();
} else alert("Błąd! Źle podany login lub hasło. Twój login to: ab, a haslo: cd.");
}

document.getElementById('submit').addEventListener('click', showValue);

Answer 1

调用element.innerHTML = "something"时，您会覆盖该元素中当前的值。观看此演示：

document.getElementById("foo").addEventListener("click", function() {
  document.getElementById("text").innerHTML = "foo";
});

document.getElementById("bar").addEventListener("click", function() {
  document.getElementById("text").innerHTML = "bar";
});

<div id="text">This will be completely overwritten</div>
<button id="foo">Make Foo</button>
<button id="bar">Make Foo</button>

所以当你这样做

document.getElementById('pokaz').innerHTML = "<div id='kwotyPierwsze'>b</div>";
document.getElementById('pokaz').innerHTML = "<div id='kwotyDrugie'>b</div>";

首先创建ID为kwotyPierwsze的元素，然后用ID为kwotyDrugie的元素覆盖。第一行不见了，所以下一行

document.getElementById('kwotyPierwsze').innerHTML = "<input type='text' placeholder='kwota' id='walutaPn1'>";

fails to find ID kwotyPierwsze and it fails。

您需要添加元素而不覆盖它们-通过将它们添加到不同的容器中或通过将它们添加而不仅仅是一个一个地添加

例如，您可以执行此操作

document.getElementById('pokaz').innerHTML = "<div id='kwotyPierwsze'>b</div>" +
                                             "<div id='kwotyDrugie'>b</div>";

您不需要+，但这只是增加了可读性，因为其中有两个元素。

将属性“ innerHTML”设置为null

1 个答案: