J'essaie de rafraîchir mon JS et je veux l'avoir pour que l'utilisateur puisse entrer son prénom et son nom et deux chiffres. Quand ils cliquent sur le bouton, je veux que le texte devienne "Bonjour Nom ! Votre somme est nombre !"
Mon code ne fonctionne pas, est-ce que quelqu'un être en mesure de me dire où est mon problème?
<html>
<head>
<meta charset="UTF-8">
<title>JS Review</title>
<style>
body{background: #8ADFB6; font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";}
#container{background: white; padding: 30px; width: 760px; margin: 0 auto;}
#output{
padding: 10px; margin: 10px;
}
</style>
</head>
<body>
<div id="container">
<h1>Using Form Elements with Javascript</h1>
<p>We can utilize user input to create feedback</p>
First Name: <input id="first">
Last Name: <input id="last">
<p></p>
Number 1: <input id="num1">
Number 2: <input id="num2">
<p></p>
<button onClick="Respond()">Respond</button>
<div id="output"></div>
</div>
<script>
function myFunction(){
var a = document.getElementById("first").value;
var b = document.getElementById("last").value;
var c = document.getElementById("num1").value;
var d = document.getElementById("num2").value;
var n= document.getElementById("sum").value;
var n= c + d;
document.getElementById("Respond").innerHTML="Respond";
}
document.getElementById("Respond").innerHTML = "Hello! Your sum is !";
</script>
</body>
</html>
3 Réponses :
document.getElementById ("num1"). value; renvoie une chaîne.
Vous devez le changer en nombre si vous voulez faire des maths.
parseFloat(document.getElementById("num1").value);
Si quelqu'un saisit un non-nombre, cela échouera toujours car vous devez valider vos entrées dans le cadre du processus.
Votre gestionnaire de clics de bouton fait référence à une fonction appelée Respond () mais la fonction réelle à laquelle vous voulez faire référence est appelée myFunction () (ou vice- versa).
Les valeurs d'entrée de Numéro 1 et Numéro 2 que vous avez récupérées sont des chaînes. Vous devez analyser les valeurs d'entrée des éléments d'entrée Numéro 1 et Numéro 2 (convertir les chaînes en nombres entiers) pour pouvoir effectuer des calculs mathématiques avec eux.
Vous devez définir le innerHTML de #output , et non #Respond au résultat. Vous pouvez soit utiliser Littéraux de modèle avec Interpolation de chaîne ou concaténation de base pour combiner votre résultat, prénom, nom et le "Bonjour! Votre somme est! " string.
--
L'approche de la concaténation ressemblerait à ceci:
<!-- HTML --> First Name: <input id="first"> Last Name: <input id="last"> <p></p> Number 1: <input id="num1"> Number 2: <input id="num2"> <p></p> <button>Respond</button> <div id="output"></div>
Les littéraux de modèle L'approche strong> et interpolation de chaîne ressemblerait à ceci:
/* JavaScript */
function myFunction(){
var a = document.getElementById("first").value;
var b = document.getElementById("last").value;
var c = document.getElementById("num1").value;
var d = document.getElementById("num2").value;
var n= parseInt(c) + parseInt(d);
document.getElementById("output").innerHTML = `Hello ${a} ${b}! Your sum is ${n}!`;
}
document.querySelector("button").addEventListener("click", myFunction); -
Vérifiez et exécutez le extrait de code suivant où j'ai analysé les valeurs et utilisé une interpolation de chaîne pour afficher la phrase avec le résultat lorsque vous cliquez sur le bouton:
`a ${someVariableName} is a fruit that has vitamin ${someOtherVariable}`
"a " + someVariableName + " is a fruit that has vitamin " + someOtherVariable
@ newgirl456 Heureux de pouvoir vous aider :) Marquez ceci comme la bonne réponse et votez pour si cela vous a aidé à résoudre votre problème. À votre santé!!
Vous rencontrez plusieurs problèmes.
Tout d'abord, vous essayez de faire des mathématiques, mais vous utilisez des valeurs de chaîne. Vous ne pouvez pas faire cela sinon ils vont concaténer et faire 3 + 1 = 31 au lieu de 4. Vous pouvez résoudre ce problème en analysant le flottant, maintenant une chose que je recommanderais est de confirmer qu'il s'agit de nombres pour que vous ne soyez pas invalide analyse.
<html>
<head>
<meta charset="UTF-8">
<title>JS Review</title>
<style>
body{background: #8ADFB6; font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";}
#container{background: white; padding: 30px; width: 760px; margin: 0 auto;}
#output{
padding: 10px; margin: 10px;
}
</style>
</head>
<body>
<div id="container">
<h1>Using Form Elements with Javascript</h1>
<p>We can utilize user input to create feedback</p>
First Name: <input id="first">
Last Name: <input id="last">
<p></p>
Number 1: <input id="num1">
Number 2: <input id="num2">
<p></p>
<button onClick="myFunction()">Respond</button>
<div id="output"></div>
</div>
<script>
function myFunction(){
var a = document.getElementById("first").value;
var b = document.getElementById("last").value;
var c = document.getElementById("num1").value;
var d = document.getElementById("num2").value;
if(isNaN(c) || isNaN(d)) {
alert('Invalid Input');
}else{
var n= parseFloat(c) + parseFloat(d);
document.getElementById("output").innerHTML = "Hello! Your sum is " + n;
}
}
</script>
</body>
</html>
Ensuite, vous appelez la fonction respond mais cette fonction n'existe pas. Ce qui existe, c'est myFunction, vous avez donc quelques options.
Mettez à jour cette ligne dans votre JS pour utiliser Respond comme nom de fonction:
var n= document.getElementById("sum").value;
devrait être:
document.getElementById("output").innerHTML = "Hello! Your sum is " + n + "!";
Je ne vois pas de fonction appelée
Response ()developer.google.com/web/tools/chrome-devtools/console
@epascarello Console est bae <3