Problème CodePen : erreur 404 et code JavaScript jeu du juste prix

Question

Bonsoir Louis, j'ai un problème avec CodePen, message d'erreur, ça vient de quoi ?
// Etape 1 - Sélectionner nos éléments
let input = document.querySelector('#prix');
let error = document.querySelector('small');
let formlaire = document.querySelector('formulaire');
// Etape 2 - Cacher l'erreur
error.style.display = "none";
// Etape 3 - Générer un nombre aléatoire
let nombreAleatoire = Math.floor(Math.random() * 1001);
// Etape 4 - Vérifier que l'utilisateur donne bien un nombre
input.addEventListener('keyup', () => {
if(isNaN(input.value)){
error.style.display = "inline";
}else{
error.style.display = "none";
}
}
L'erreur :
404
Page Not Found
Unable to render Embed Preview. It's likely that the preview expired, so try refreshing or re-running.

Louis-Nicolas Leuillet · Accepted Answer

J'ai compris ton problème !
En fait ton formulaire s'enverra dès que tu l'utiliseras car tu n'as pas bloqué l'envoi.
Il faut ajouter ceci :
formlaire.addEventListener("submit", function (e) {
e.preventDefault();
});
Avec e.preventDefault() tu empêches ton formulaire d'envoyer les données et donc d'aller sur une nouvelle page, ce que te disait l'erreur sur CodePen.

Louis-Nicolas Leuillet · Answer

Bonsoir Patrick,
Alors, l'erreur 404 de CodePen n'a rien à voir avec ton code JavaScript, c'est juste un souci d'affichage de leur prévisualisation. Essaie de rafraîchir la page ou de relancer le pen, ça devrait passer.
Par contre, j'ai repéré deux petits problèmes dans ton code. D'abord, tu as écrit formulaire comme sélecteur, mais il te faut un # ou un . devant selon que c'est un id ou une classe. Ensuite, il te manque la parenthèse fermante de ton addEventListener :
input.addEventListener('keyup', () => {
if(isNaN(input.value)){
error.style.display = "inline";
}else{
error.style.display = "none";
}
}); // <- ici ;)
Corrige ces deux points et dis-moi si ça fonctionne !

Patrick Rasteil · Answer

// Étape 1 - Sélectionner nos éléments
let input = document.querySelector('#prix');
let error = document.querySelector('small');
let formlaire = document.querySelector('#formulaire');
// Étape 2 - Cacher l'erreur
error.style.display = "none";
// Étape 3 - Générer un nombre aléatoire
let nombreAleatoire = Math.floor(Math.random() * 1001);
// Étape 4 - Vérifier que l'utilisateur donne bien un nombre
input.addEventListener('keyup', () => {
if (isNaN(input.value)) {
error.style.display = "inline";
} else {
error.style.display = "none";
}
});
Toujours le même message d'erreur.
PS : j'ai voulu installer DeepSeek R1 sur mon PC en suivant ta vidéo "https://www.youtube.com/watch?v=eab6GWO3oHw", mais j'ai un problème. Je t'ai laissé un message ; si tu pouvais jeter un œil. Merci.

Louis-Nicolas Leuillet · Answer

Peux-tu me partager ton code sur CodePen pour que je vois aussi ton code HTML ?
Pour la vidéo sur DeepSeek : merci ! J'irai voir ça demain :)

Patrick Rasteil · Answer

Pas de problème Louis
https://codepen.io/pat1009/pen/xbOPgEe
merci

Patrick Rasteil · Answer

Effectivement, je n'ai plus de message d'erreur, mais du coup, je ne peux pas contrôler si le code que j'ai écrit est correct par rapport au nombre que j'écris. Pourtant, je fais exactement comme toi dans la vidéo. Comment tu fais pour vérifier sans cliquer sur le bouton ?

Louis-Nicolas Leuillet · Answer

Oui, actuellement tu n’as rien qui s’affiche, car ta fonction qui détecte l’envoi du formulaire ne fait rien de spécial. Il y a juste preventDefault qui empêche le formulaire de s’envoyer, mais c’est tout. Tu ne fais rien d’autre.
Par exemple, si tu ajoutes un console.log tu verras dans la console le chiffre qui a été rentré.
Mais c’est tout. Il faut que tu continues les prochaines étapes. :-)

Patrick Rasteil · Answer

Oui, mais pourquoi, toi, dans ta vidéo, cela fonctionne ?
PS : pour mon problème d’installation DeepSeek, dont je t’ai parlé hier, je te mets le message d’erreur en dessous.
Bonjour Louis, je ne sais pas si cela vient de l’installation de pip , mais pour moi, non, vu que j’ai un message de succès à la fin de l’installation. Quand je tape la commande open-webui --help , j’ai le message d’erreur suivant :
PS C:\Users\patri> open-webui --help
open-webui : Le terme « open-webui » n'est pas reconnu comme nom d'applet de commande, fonction, fichier de script ou programme exécutable. Vérifiez l'orthographe du nom, ou si un chemin d'accès existe, vérifiez que le chemin d'accès est correct et réessayez.
Au caractère Ligne:1 : 1
+ open-webui --help
+ ~~~~~~~~~~
+ CategoryInfo : ObjectNotFound: (open-webui:String) [], CommandNotFoundException
+ FullyQualifiedErrorId : CommandNotFoundException
Peux-tu me donner une solution, s’il te plaît ? Merci.

Louis-Nicolas Leuillet · Answer

Dans ma vidéo, ça fonctionne parce que j'ai déjà ajouté toute la logique de vérification dans les étapes suivantes. Toi, tu es à l'étape 4 qui vérifie juste si c'est un nombre ou non. Le message d'erreur small s'affiche uniquement quand tu tapes autre chose qu'un chiffre. Essaie de taper des lettres dans ton input, tu verras le message apparaître.
Pour tester que ton code fonctionne bien, ouvre la console de ton navigateur (F12 puis onglet Console) et ajoute un console.log dans ton événement :
input.addEventListener('keyup', () => {
console.log("Valeur tapée :", input.value);
if (isNaN(input.value)) {
error.style.display = "inline";
} else {
error.style.display = "none";
}
});
Tu verras chaque caractère tapé s'afficher dans la console. Continue les prochaines étapes et tout prendra son sens !
Pour ton souci avec Open WebUI, c'est un problème de PATH. Après l'installation avec pip, Windows ne sait pas où trouver la commande. Essaie de fermer et rouvrir PowerShell, puis relance la commande. Si ça ne marche toujours pas, lance-le avec python -m open_webui à la place.
C'est pas vraiment dédié à la formation JavaScript et ça crée de la confusion ici donc je préfère qu'on en parle vraiment que par mail ou sur YouTube (je n'ai pas vu ton commentaire je pense que YouTube l'a supprimé car tu mets du code : il doit penser que c'est du spam)

Problème CodePen : erreur 404 et code JavaScript jeu du juste prix

Formation JavaScript (legacy)