L'idée pour l'instant est d'afficher simplement "bonjour le monde!" pour vérifier si la fonction est correctement appelée par le bouton. J'ai essayé de copier-coller du code précédent qui fonctionnait, vérifié les parenthèses, les crochets, tout ce qui pouvait perturber l'appel de fonction. Alors que rien après le "bonjour le monde!" est nécessaire pour répondre à la question, j'apprécierais beaucoup si vous donniez des suggestions pour le reste du code ci-dessous. L'idée est de prendre les entrées de l'utilisateur et de donner des résultats différents en fonction de la longueur de la chaîne.
<!DOCTYPE html> <html> <title>Number Personality Calculator</title> <head> <meta name="description" content="Input your name, and predict your personality type" /> <meta name="keywords" content="JavaScript, JS, numerology, personality" /> <meta name="author" content="[REDACTED], 18/02/2018" /> <meta charset="UTF-8"> </head> <body> <h1>PERSONALITY TYPE CHECKER</h1> <p id="results">""</p> <input type="text" id="input" placeholder="Juan Dela Cruz"><br> <button onclick="persona()">Get your personality</button> </body> </html>
body {
background-color: #a89b28;
color: #f0f1f6;
font-family: impact;
text-align: center;
}
function persona() {
document.write("hello world!");
var name, inputstr, sum = 0;
name = document.getElementById("input").value;
inputstr = name.length;
while (inputstr / 10 >= 1) {
if (inputstr = 11 || inputstr = 22) {
break;
}
sum += inputstr % 10;
inputstr = Math.floor(inputstr / 10);
if (inputstr = 11 || inputstr = 22) {
break;
}
}
switch (inputstr) {
case 1:
document.getElementById("results").innerHTML = "...";
break;;
case 2:
document.getElementById("results").innerHTML = "...";
break;;
case 3:
document.getElementById("results").innerHTML = "...";
break;;
case 4:
document.getElementById("results").innerHTML = "...";
break;;
case 5:
document.getElementById("results").innerHTML = "...";
break;;
case 6:
document.getElementById("results").innerHTML = "...";
break;;
case 7:
document.getElementById("results").innerHTML = "...";
break;;
case 8:
document.getElementById("results").innerHTML = "...";
break;;
case 9:
document.getElementById("results").innerHTML = "...";
break;;
case 11:
document.getElementById("results").innerHTML = "...";
break;;
case 22:
document.getElementById("results").innerHTML = "...";
break;;
}
}
3 Réponses :
Je ne sais pas à quoi ressemble votre balisage HTML pour moi, pour console.log ou alert () , "Hello World" s'est avéré être un un moyen plus simple de tester si une fonction fonctionne.
Peut-être essayez-le juste au cas où la fonction serait effectivement appelée, mais il y a une autre chose qui ne fonctionne pas avec le reste du code ...
Aux lignes 8 et 14 (dans mon extrait de code), vous aviez un seul égal dans une instruction if. C'est une erreur très simple qui pourrait rejeter tout votre code.
Le débogage est un outil très précieux. Toujours lors du débogage, utilisez alert () ou console.log () et non document.write () . Personnellement, la façon dont je débogue est en supprimant lentement les lignes une par une pour voir laquelle cause l'erreur. Cette manière est lente et fastidieuse, mais infaillible. J'ai attrapé votre erreur en un rien de temps.
= est destiné à attribuer une valeur à une variable. == est destiné à comparer 2 valeurs. Si vous essayez d'utiliser = dans une instruction if, cela cassera complètement votre code (vous ne devriez rien assigner à l'intérieur d'une instruction if. Seulement comparer).
<!DOCTYPE html> <html> <title>Number Personality Calculator</title> <head> <meta name="description" content="Input your name, and predict your personality type" /> <meta name="keywords" content="JavaScript, JS, numerology, personality" /> <meta name="author" content="[REDACTED], 18/02/2018" /> <meta charset="UTF-8"> </head> <body> <h1>PERSONALITY TYPE CHECKER</h1> <p id="results">""</p> <input type="text" id="input" placeholder="Juan Dela Cruz"><br> <button onclick="persona()">Get your personality</button> </body> </html>
body {
background-color: #a89b28;
color: #f0f1f6;
font-family: impact;
text-align: center;
}
function persona() {
alert("hello world!");
var name, inputstr, sum = 0;
name = document.getElementById("input").value;
inputstr = name.length;
while (inputstr / 10 >= 1) {
//You had single equals below. Should be double
if (inputstr == 11 || inputstr == 22) {
break;
}
sum += inputstr % 10;
inputstr = Math.floor(inputstr / 10);
//You had single equals below. Should be double
if (inputstr == 11 || inputstr == 22) {
break;
}
}
switch (inputstr) {
case 1:
document.getElementById("results").innerHTML = "...";
break;;
case 2:
document.getElementById("results").innerHTML = "...";
break;;
case 3:
document.getElementById("results").innerHTML = "...";
break;;
case 4:
document.getElementById("results").innerHTML = "...";
break;;
case 5:
document.getElementById("results").innerHTML = "...";
break;;
case 6:
document.getElementById("results").innerHTML = "...";
break;;
case 7:
document.getElementById("results").innerHTML = "...";
break;;
case 8:
document.getElementById("results").innerHTML = "...";
break;;
case 9:
document.getElementById("results").innerHTML = "...";
break;;
case 11:
document.getElementById("results").innerHTML = "...";
break;;
case 22:
document.getElementById("results").innerHTML = "...";
break;;
}
}
Si vous essayez simplement de corriger l'erreur avec votre code, c'est parce que vous utilisez des opérateurs d'affectation dans vos instructions if au lieu d'opérateurs de comparaison.
Remplacez inputstr = x par inputstr == x
<!DOCTYPE html>
<html>
<title>Number Personality Calculator</title>
<head>
<meta name="description" content="Input your name, and predict your personality type" />
<meta name="keywords" content="JavaScript, JS, numerology, personality" />
<meta name="author" content="[REDACTED], 18/02/2018" />
<meta charset="UTF-8">
<style>
body {
background-color: #a89b28;
color: #f0f1f6;
font-family: impact;
text-align: center;
}
</style>
</head>
<body>
<h1>PERSONALITY TYPE CHECKER</h1>
<p id="results">""</p>
<input type="text" id="input" placeholder="Juan Dela Cruz"></br>
<button onclick="persona()">Get your personality</button>
<script>
function persona() {
document.write("hello world!");
var name, inputstr, sum = 0;
name = document.getElementById("input").value;
inputstr = name.length;
while (inputstr / 10 >= 1) {
if (inputstr == 11 || inputstr == 22) {
break;
}
sum += inputstr % 10;
inputstr = Math.floor(inputstr / 10);
if (inputstr == 11 || inputstr == 22) {
break;
}
}
switch (inputstr) {
case 1:
document.getElementById("results").innerHTML = "...";
break;;
case 2:
document.getElementById("results").innerHTML = "...";
break;;
case 3:
document.getElementById("results").innerHTML = "...";
break;;
case 4:
document.getElementById("results").innerHTML = "...";
break;;
case 5:
document.getElementById("results").innerHTML = "...";
break;;
case 6:
document.getElementById("results").innerHTML = "...";
break;;
case 7:
document.getElementById("results").innerHTML = "...";
break;;
case 8:
document.getElementById("results").innerHTML = "...";
break;;
case 9:
document.getElementById("results").innerHTML = "...";
break;;
case 11:
document.getElementById("results").innerHTML = "...";
break;;
case 22:
document.getElementById("results").innerHTML = "...";
break;;
}
}
</script>
</body>
</html>
Vous ne devriez pas utiliser
document.writeaprès que la page a été analysée (ou peut-être pas du tout).dwefface la page et crée un nouveau document.Vous ne devez pas non plus utiliser d'attributs pour affecter des gestionnaires d'événements. Utilisez
element.addEventListener.Si vous voulez vérifier si une fonction fonctionne, je vous suggère d'utiliser plutôt
alert ()Au lieu de document.write, vous souhaitez sélectionner l'élément de résultats et modifier son attribut
innerHTML. Vous pouvez faire ceci comme:let resultsElement = document.getElementById ("results"); resultsElement.innerHTML = "Bonjour tout le monde.";