Problème InnerHtml

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
escorp3
Messages : 6
Enregistré le : 25 sept. 2022, 19:39

Problème InnerHtml

Message par escorp3 » 26 sept. 2022, 18:34

Bonjour

Je viens de commencer quelques tutos et exercices sur JavaScript.

J'ai lancé via VSCode Live Server le site, les fichiers HTML, CSS et JavaScript sont exactement pareils que ceux utilisés par la personne faisant le tuto.

Problème, erreur innerHtml 😥

Je devrais voir apparaître 6 coeurs (vies) capturelien ci-dessous et j'ai uniquement les fichiers coeur vide et plein (capture jointe également)

Dans inspecter ça m'affiche l'erreur ci-jointe avec innerHtml

Alors que lorsque je lance via codepen.io le code utilisé par la personne faisant le tuto cela fonctionne parfaitement.

Lien en ligne avec les éléments HTML CSS JavaScript qui fonctionne :

codepen.io/wikode/Pen/rNOYaPE

J'ai même fait un copier coller de ce code et j'arrive au même problème, j'avoue bloquer complètement sur cette erreur...

Dans le .JS l'erreur est sur :

LIGNE 87
divVies.innerHTML = "";

Et l'erreur affichée dans inspecter quand je le lance via LiveServer :

Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')

C'est mon premier post sur ce forum, car je débute, désolé si je ne suis pas assez clair 🙌😄

Si quelqu'un peut m'aider ? Un grand merci 🙏🔥🙏
Fichiers joints
capture2js.png
capture2js.png (147.72 Kio) Vu 874 fois

Avatar du membre
webmaster
Administrateur du site
Messages : 483
Enregistré le : 28 févr. 2017, 15:19

Re: Problème InnerHtml

Message par webmaster » 26 sept. 2022, 19:03

Bonjour,

Le codepen renvoie une erreur 404

L'erreur JS indique que divVies n'est pas connu.
Il doit donc sans doute être mal initialisé
Mais sans le code complet, c'est difficile d'en dire plus
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

escorp3
Messages : 6
Enregistré le : 25 sept. 2022, 19:39

Re: Problème InnerHtml

Message par escorp3 » 26 sept. 2022, 19:05

Merci, je post ca immediatement :)

escorp3
Messages : 6
Enregistré le : 25 sept. 2022, 19:39

Re: Problème InnerHtml

Message par escorp3 » 26 sept. 2022, 19:06

// Elements du DOM
const divVies = document.querySelector(".vies");
const message = document.getElementById("message");
const formulaire = document.getElementById("inputBox");
const input = document.getElementById("number");
const essayerBtn = document.getElementById("essayerBtn");
const rejouerBtn = document.getElementById("rejouer");
const body = document.getElementsByTagName("body")[0];

// Modèle de coeurs
const coeurVide = '<ion-icon name="heart-outline"></ion-icon>';
const coeurPlein = '<ion-icon name="heart"></ion-icon>';

// Fond
const bgFroid = "linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%)";
const bgTiede = "linear-gradient(120deg, #f6d365 0%, #fda085 100%)";
const bgChaud = "linear-gradient(-60deg, #ff5858 0%, #f09819 100%)";
const bgBrulant = "linear-gradient(to top, #ff0844 0%, #ffb199 100%)";

const bgWin =
"linear-gradient(-225deg, #231557 0%, #44107A 29%, #FF1361 67%, #FFF800 100%)";
const bgLoose = "linear-gradient(60deg, #29323c 0%, #485563 100%)";

// PLAY :
const play = () => {
// nombre aléatoire
const randomNumber = Math.floor(Math.random() * 101); // 3
const totalVies = 6;
let vies = totalVies;
console.log(randomNumber);

// Actualisation à chaque essai - TOUTE LA LOGIQUE
formulaire.addEventListener("submit", (e) => {
e.preventDefault();
const valeurInput = parseInt(input.value);

if (valeurInput < 0 || valeurInput > 100) return;

if (valeurInput === randomNumber) {
body.style.backgroundImage = bgWin;
message.textContent = `BRAVO !!! Le nombre était bien ${randomNumber}`;
rejouerBtn.style.display = "block";
essayerBtn.setAttribute("disabled", "");
}

if (valeurInput !== randomNumber) {
if (randomNumber < valeurInput + 3 && randomNumber > valeurInput - 3) {
body.style.backgroundImage = bgBrulant;
message.textContent = "C'est Brûlant !!! 🔥🔥🔥 ";
} else if (
randomNumber < valeurInput + 6 &&
randomNumber > valeurInput - 6
) {
body.style.backgroundImage = bgChaud;
message.textContent = "C'est Chaud ! 🔥 ";
} else if (
randomNumber < valeurInput + 11 &&
randomNumber > valeurInput - 11
) {
body.style.backgroundImage = bgTiede;
message.textContent = "C'est Tiède 😐 ";
} else {
body.style.backgroundImage = bgFroid;
message.textContent = "C'est Froid ❄️ ";
}
vies--;
verifyLoose();
}

actualiseCoeurs(vies);
});

const verifyLoose = () => {
if (vies === 0) {
body.style.backgroundImage = bgLoose;
body.style.color = "#990000";
essayerBtn.setAttribute("disabled", "");
message.textContent = `Vous avez perdu. La réponse était ${randomNumber}`;
rejouerBtn.style.display = "block";
}
};

const actualiseCoeurs = (vies) => {
// total : 6; vies : 4
divVies.innerHTML = "";
let tableauDeVies = [];
for (let i = 0; i < vies; i++) {
tableauDeVies.push(coeurPlein);
}
for (let i = 0; i < totalVies - vies; i++) {
tableauDeVies.push(coeurVide);
}
tableauDeVies.forEach((coeur) => {
divVies.innerHTML += coeur;
});
};
actualiseCoeurs(vies);

rejouerBtn.addEventListener("click", () => {
message.style.display = "none";
document.location.reload(true);
});
};



-------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">

</style>
<title>Trouve le bon </title>
</head>
<body>
<div class="container">
<h1>Trouve le bon nombre !</h1>
<p>Trouve le bon nombre entre 0 et 100 ! Tu as 5 essais ! </p>

<div class="vie">
<ion-icon name="heart-outline"></ion-icon>
<ion-icon name="heart"></ion-icon>

</div>

<form id="inputBox">

<label for="number">Entrez un nombre :</label>
<input type="number" id="number" min="0" max="100" required>
<button type="submit" id="essayerBtn">Essayer</button>

<p id="message">Lorem ipsum dolor sit amet.
</p>
<button id="rejouer">Rejouer</button>

<p id="details">* Brulant = &plusmn; 2; Chaud = &plusmn; 5 ; Tiède = &plusmn; 10 ; Brulant = &plusmn; + de 10 ;</p>

</form>






</div>


<script src="./app.js"></script>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/i ... "></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/i ... "></script>
</body>
</html>


------------------------------------------------------------------------------------------


@import url('https://fonts.googleapis.com/css2?famil ... splay=swap');


:root{
--title: #f8c27a;
--textShadow: 0 2px 2px rgba(0,0,0,.7);
--boxShadow: 0 0px 10px rgba(0,0,0,.2);
}

*{
padding: 0;
margin: 0;
box-sizing: border-box;
}

body{
font-size: 14px;
width: 100vw;
overflow: hidden;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: sans-serif;
background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
}

.container{
background-color: rgba(255,255,255,.2);
padding: 20px;
border-radius: 5px;
text-align: center;
box-shadow: var(--boxShadow);

}

h1{
font-family: 'Luckiest Guy', cursive;
margin-bottom: 15px;
color: #ffc31d;
text-shadow: var(--textShadow);
display: inline-block ;
}

-vies{
margin: 10px;
}

ion-icon{
font-size: 50px;
fill: rgb(255, 0, 0);
}

#inputBox{
background-color: green;
padding: 15px;
border-radius: 5px;
}

#inputBox > label{
display: block;
margin-bottom: 8px;

}

input,
button{
outline: none;
border: none;
padding: 3px 20px;
border-radius: 5px;
}

button{
background-color: teal;
color: #ffffff;
cursor: pointer;
transition: all 0.2s;
}

button:hover{
transform: translate(-2px);
background-color: rgb(0, 184,184);
}

p#message{
margin: 20px auto 0 auto;
}

#rejouer{
display: none;
margin: 5px auto 0 auto;
}

#details{
font-weight: bold;
font-size: 6px;
margin-top: 5px;

}

escorp3
Messages : 6
Enregistré le : 25 sept. 2022, 19:39

Re: Problème InnerHtml

Message par escorp3 » 26 sept. 2022, 19:18

https://codepen.io/wikode/pen/rNOYaPE

Lien exact du résultat du tuto que j'ai suivi

Avatar du membre
webmaster
Administrateur du site
Messages : 483
Enregistré le : 28 févr. 2017, 15:19

Re: Problème InnerHtml

Message par webmaster » 26 sept. 2022, 19:50

En effet, cela fonctionne bien sur le codepen de demo

Pour que divVies soit bien intialisé, il faut que le DOM soit déjà construit
Donc il faut bien appelé le JS a la fin du document et pas dans le HEAD
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

escorp3
Messages : 6
Enregistré le : 25 sept. 2022, 19:39

Re: Problème InnerHtml

Message par escorp3 » 26 sept. 2022, 20:06

Mon css est dans le head

Mais j'appelle bien app.ps en fin de document dans le body
<script src="./app.js"></script>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/i ... "></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/i ... "></script>
</body>
</html>

escorp3
Messages : 6
Enregistré le : 25 sept. 2022, 19:39

Re: Problème InnerHtml

Message par escorp3 » 26 sept. 2022, 20:08

Et les codes Html Css et Javascript du codepen sont exactement les même, j'ai fait un copier coller pour voir si je n'avais pas fait d'erreur.

Donc quelque chose m'échappe ... : /

Avatar du membre
webmaster
Administrateur du site
Messages : 483
Enregistré le : 28 févr. 2017, 15:19

Re: Problème InnerHtml

Message par webmaster » 27 sept. 2022, 07:36

Ha oui. Alors je n'ai pas d'autre idée
Il faudrait mettre l'ensemble du script en ligne ou en faire un zip et le poster ici
C'est peut etre le serveur virtuel qui pose probleme...
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Répondre