Set property "innerHTML" of null

Question

I've problem "Cannot set property 'innerHTML' of null". Can someone look on my code and tell me what is wrong? I'm breaking my brain but nothing solve my problem.

This script.js is set in the end of section. I include my HTML and JS code. Can you give me some advice how to solve it?

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

One of your element `kwotyDrugie /kwotyPierwsze/pokaz /tablicaWalut ` cannot be selected.check whether they exist in the `document` and are named correctly — jenil christo, Mar 24 '19 at 06:26
Do all elements with IDs `tablicaWalut`, `pokaz`, `kwotyPierwsze`, and `kwotyDrugie` exist? We need your HTML and how you're calling this because right now anything we can say would be guesswork. — VLAZ, Mar 24 '19 at 06:27
Wait, you call `document.getElementById('pokaz').innerHTML` *twice*. The second call overwrites what you set in the first one. And the first call is creating `
b
`, so that element doesn't exist. Therefore `document.getElementById('kwotyPierwsze').innerHTML` fails to find that element — VLAZ, Mar 24 '19 at 06:29

score 1 · Answer 1 · answered Mar 24 '19 at 06:37

When you call element.innerHTML = "something", you overwrite the value currently in that element. See this demonstration:

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>

So when you do

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

you first create an element with ID kwotyPierwsze then you overwrite it with an element with ID kwotyDrugie. The first is gone, so the next line

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

fails to find ID kwotyPierwsze and it fails.

You need to add your elements without overwriting them - either by adding them to different containers or by adding both, not just one by one

For example you can just do this

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

You don't need the + but it's just making it a bit more readable that there are two elements there.

Set property "innerHTML" of null

1 Answers1