Uncaught TypeError : Cannot set property 'innerHTML' of null

pytanie zadane 14 listopada 2019 w JavaScript przez Gabo Nowicjusz (120 p.)
zamknięte 14 listopada 2019 przez Gabo

Witam, miałem zrobić quiz na zadanie do szkoły i napotkałem problem ze skryptem, który miał wypisać mi czy odpowiedź jest dobra czy zła.Kiedy próbuję sprawdzić czy działa wyskakuje mi błąd: Uncaught TypeError : Cannot set property 'innerHTML' of null w przedostatniej linijce skryptu. Kod w HTML prezentuje się tak :

<!DOCTYPE html>
<html lang="en pl">
    <head>
        <meta charset="UTF-8">
        <title>Quiz</title>
        <link rel="Stylesheet" href="style.css">
    </head>
    <body>
        <h3>Quiz</h3>
        <div id="#d1"></div>
        <div id="#d2"></div>
        <script src="script.js"></script>
    </body>
</html>

natomiast skrypt w JS tak:

let par1 = document.querySelector("#d1");
let par2 = document.querySelector("#d2");
let counter = 0;
let str = "";


const q1= prompt("Klawiatura to urządzenie:","wpisz tu wejścia, wyjścia lub wejścia i wyjścia").trim().toLowerCase()

const q2= prompt("Darmowe opragramowanie to:").trim().toLowerCase()

const q3= prompt("Podstawowy program do grafiki rastrowej to:").trim().toLowerCase()

const q4= prompt("Nazwa darmowego programu do grafiki od Linuxa").trim().toLowerCase()

const q5= prompt("Co to MacIntosh").trim().toLowerCase()

const q6= prompt("Licencja wolnego i otwartego oprogramowania to:").trim().toLowerCase()

const q7= prompt("Najpopularniejszy format plików muzycznych to:").trim().toLowerCase()

const q8= prompt("Jak nazywa się przeglądarka od Google?").trim().toLowerCase()

const q9= prompt("Jak inaczej nmówi się na procesor?").trim().toLowerCase()

const q10= prompt("Do otwierania stron www służy:").trim().toLowerCase()


if(q1 === "wejścia"){
    str += "Pytanie 1 - <span style=color:green>dobra odpowiedź</span> "
    counter++
}else{
    str += "Pytanie 1 - <span style=color:red>zła odpowiedź</span> - dobra odpowiedź to: wejścia"
}
if(q2 === "freeware"){
    str += "Pytanie 2 - <span style=color:green>dobra odpowiedź</span>"
    counter++
}else{
    str += "Pytanie 2 - <span style=color:red>zła odpowiedź</span> - dobra odpowiedź to: freeware"
}
if(q3 === "paint"){
    str += "Pytanie 3 - <span style=color:green>dobra odpowiedź</span> "
    counter++
}else{
    str += "Pytanie 3 - <span style=color:red>zła odpowiedź</span> - dobra odpowiedź to: paint"
}
if(q4 === "gimp"){
    str += "Pytanie 4 - <span style=color:green>dobra odpowiedź</span> "
    counter++
}else{
    str += "Pytanie 4 - <span style=color:red>zła odpowiedź</span> - dobra odpowiedź to: gimp"
}
if(q5 === "systemoperacyjny"){
    str += "Pytanie 5 - <span style=color:green>dobra odpowiedź</span> "
    counter++
}else{
    str += "Pytanie 5 - <span style=color:red>zła odpowiedź</span> - dobra odpowiedź to: system operacyjny"
}
if(q6 === "gnugpl"){
    str += "Pytanie 6 - <span style=color:green>dobra odpowiedź</span> " 
    counter++
}else{
    str += "Pytanie 6 - <span style=color:red>zła odpowiedź</span> - dobra odpowiedź to: GNU GPL"
}
if(q7 === "mp3"){
    str += "Pytanie 7 - <span style=color:green>dobra odpowiedź</span> "
    counter++
}else{
    str += "Pytanie 7 - <span style=color:red>zła odpowiedź</span> - dobra odpowiedź to:  MP3"
}
if(q8 === "chrome"){
    str += "Pytanie 8 - <span style=color:green>dobra odpowiedź</span> " 
    counter++
}else{
    str += "Pytanie 8 - <span style=color:red>zła odpowiedź</span> - dobra odpowiedź to: Chrome"
}
if(q9 === "cpu"){
    str += "Pytanie 9 - <span style=color:green>dobra odpowiedź</span> " 
    counter++
}else{
    str += "Pytanie 9 - <span style=color:red>zła odpowiedź</span> - dobra odpowiedź to: CPU"
}
if(q10 === "hiperłącze"){
    str += "Pytanie 10 - <span style=color:green>dobra odpowiedź</span> " 
    counter++
}else{
    str += "Pytanie 10 - <span style=color:red>zła odpowiedź</span> - dobra odpowiedź to: hiperłącze"
} 

par1.innerHTML = str;
par2.innerHTML = counter;

komentarz zamknięcia: Uzyskałem odpowiedź

1 odpowiedź

odpowiedź 14 listopada 2019 przez creend Gaduła (4,700 p.)

Dodanie kodu JavaScript musi być w znaczniku <head> a nie w body

<head>
        <meta charset="UTF-8">
        <title>Quiz</title>
        <link rel="Stylesheet" href="style.css">
        <script>src="script.js"</script>
    </head>