Je veux: Lorsque les utilisateurs cliquent sur l'une des couleurs (rouge / jaune / vert), la phrase ci-dessous change différemment. (En utilisant un relevé de commutation et onclick avec des arguments)
Qu'est-ce que j'ai essayé: ONCLICK et ID attribués à chaque couleur sur HTML et écrivent l'état du commutateur sur JS. Mais rien ne réagit aux cas du commutateur et de la valeur par défaut est traité. P>
p>
<p>â—†Traffic Lightâ—†</p> <p onclick="judge(red)" id="red"><font color="red">RED</font></p> <p onclick="judge(yellow)" id="yellow"><font color="yellow">YELLOW</font></p> <p onclick="judge(green)" id="green"><font color="lightgreen">GREEN</font></p> <p>"I'll<span id="action">___</span>because the traffic light is<span id="light">___</span>!"</p>
5 Réponses :
Veuillez changer la définition de la méthode et la liste d'arguments comme ci-dessous.
var elem1 = document.getElementById("action");
var elem2 = document.getElementById("light");
var red = document.getElementById("red");
var yellow = document.getElementById("yellow");
var green = document.getElementById("green");
function judge(color){
var decision = color;
case red:
elem1.innerHTML = " stop ";
elem2.innerHTML = " red ";
break;
case yellow:
elem1.innerHTML = " go with causion ";
elem2.innerHTML = " yellow ";
break;
case green:
elem1.innerHTML = " go ";
elem2.innerHTML = " green ";
break;
default:
console.log("error");
break;
}
}
this.id code> tout en passant comme un argument. LI>
- Pas besoin d'avoir des variables avec des noms de couleur li>
- dans cet extrait, le cas
code> doit être comme chaîne code> li>
p>
<p>â—†Traffic Lightâ—†</p>
<p onclick="judge(this.id)" id="red">
<font color="red">RED</font>
</p>
<p onclick="judge(this.id)" id="yellow">
<font color="yellow">YELLOW</font>
</p>
<p onclick="judge(this.id)" id="green">
<font color="lightgreen">GREEN</font>
</p>
<p>"I'll <span id="action">___</span> because the traffic light is <span id="light">___</span>!"</p>
document.getelementByID ("rouge") ne fournira pas de couleur rouge, il vous donnera un élément
p>
<p>â—†Traffic Lightâ—†</p>
<p onclick="judge('red')" id="red"><font color="red">RED</font></p>
<p onclick="judge('yellow')" id="yellow"><font color="yellow">YELLOW</font></p>
<p onclick="judge('green')" id="green"><font color="lightgreen">GREEN</font></p>
<p>"I'll <span id="action">___</span> because the traffic light is <span id="light">___</span> !"</p> Vous avez eu quelques erreurs dans le code JS, je les ai réparées pour vous dans le code ci-dessous. Vous auriez dû passer le Vous pouvez utiliser J'ai fait un peu de formatage dans le HTML pour rendre la sortie plus attrayante pour l'utilisateur. P> juge () code> paramètre "décision" dans l'instruction de commutation. this.id code> pour transmettre l'ID actuel dans la fonction HTML H1>
var elem1 = document.getElementById("action");
var elem2 = document.getElementById("light");
var red = document.getElementById("red");
var yellow = document.getElementById("yellow");
var green = document.getElementById("green");
var decision = judge;
function judge(decision){
switch(decision){
case "red":
elem1.innerHTML = "stop";
elem2.innerHTML = "red";
break;
case "yellow":
elem1.innerHTML = "go with causion";
elem2.innerHTML = "yellow";
break;
case "green":
elem1.innerHTML = "go";
elem2.innerHTML = "green";
break;
default:
console.log("error");
break;
}
}
Pour améliorer votre système, il serait suggéré d'utiliser un / lien A au lieu d'un P pour vos éléments de clic, car cela aidera tous les navigateurs et les utilisateurs à comprendre qu'il s'agit d'un élément "cliquable" et de la nature d'un / Href item fournissez des indices visuels supplémentaires, un pointeur de la souris doigt et d'autres points forts et aides visuelles pour que les utilisateurs puissent comprendre que l'utilisateur peut cliquer sur l'élément.
Bien que pas absolument nécessaire, je recommande également d'embaucher des éléments de cas internes avec {} mais qui peut être plus d'une préférence personnelle / style.