Problème pour imbriquer 2 codes de javascript
RésoluBonjour a tous
De nouveau je dois encore solliciter de l'aide après avoir essaye plusieurs combinaisons pour essayer d'imbriquer 2 codes en javascript
j'ai donc un premier code pour retourner un input et un autre code pour connaître la valeur d'un bouton radio indépendant ils fonctionnent a merveille mais imbriquer l'un dans l'autre je parviens pas a afficher le
document.getElementById('print').innerHTML=name.toUpperCase();
Mon idée est la suivante
Si on coche sur le premier bouton radio je souhaite afficher un texte visible par l'utilisateur via la forme document.getElementById
idem pour le deuxième bouton mais avec un message diffèrent
Mais en plus pour chaque bouton je souhaite pouvoir récupérer
document.getElementById('print').innerHTML=name.toUpperCase();
aussi mais malheureusement je n'y arrive pas
voici le code pour retourner le input
var form = document.getElementById("forms");
form.onclick = function(e){
e.preventDefault();
var name = document.getElementById("name").value;
console.log(name);
document.getElementById('print').innerHTML=name.toUpperCase();
}
<form name="form" id="forms"> Enter name: <input type="text" id="name"> <input type="button" value=" Click Up"> </form>
ensuite pour connaître la valeur d'un bouton radio ans cliquer sur un sublimt
je n'ai trouve que ce code
document.querySelectorAll("input").forEach(item => {
item.addEventListener("change", () => {
console.log(item.id)
})
})
<form> <label><input type="radio" name="styleColor" id="black" checked="checked"/>Black</label> <div class="dropdown-divider"></div> <label><input type="radio" name="styleColor" id="red">Red</label> <div class="dropdown-divider"></div> <label><input type="radio" name="styleColor" id="green">Green</label> <div class="dropdown-divider"></div> <label><input type="radio" name="styleColor" id="blue">Blue</label> </form>
j'ai essaye pas mal de choses mais a chaque fois impossible d'e retourner
document.getElementById('print').innerHTML=name.toUpperCase();
voici une de mes dernières tentatives
//debut pour afficher le name via le input
var form = document.getElementById("forms");
form.onclick = function(e){
e.preventDefault();
var name = document.getElementById("name").value;
//console.log(name);
//document.getElementById('print').innerHTML=name.toUpperCase();
// debut fonction recuperation valeur boutton
function styleChange() {
if (document.getElementById("black").checked) {
console.log("Color selected: Black")
document.getElementById('print').innerHTML=name.toUpperCase();
console.log(name);
}
else if (document.getElementById("red").checked) {
console.log("Color selected: Red")
document.getElementById('print').innerHTML=name.toUpperCase();
}
}// fin fonction recuperation valeur boutton
}//fin pour afficher le name via le input
Mais rien ne s'affiche même plus dans les consoles de couleurs
3 réponses
-
Contributeur
bonjour,
Je pense que le plus simple, c'est de commencer par ajouter onclick=boutoncouleurclique("unecouleur") dans la définition du bouton, puis de définir la fonction boutoncouleurclique() dans le code javascript.
-
bonjour yg_be
Merci pour ton aide
je me suis un peu emmêlé les pinceaux lorsque j'ai présenté mon dernier essai
Mon idée était d'insérer
la recherche du bouton radio sélectionné dans l'autre code
de cette manière en déplaçant juste une accolade
//debut pour afficher le name via le input var form = document.getElementById("forms"); form.onclick = function(e) { e.preventDefault(); var name = document.getElementById("name").value; //console.log(name); document.getElementById('print').innerHTML = name.toUpperCase(); //debut pour savoir quel bouton a ete coche document.querySelectorAll("input").forEach(item => { item.addEventListener("change", () => { console.log(item.id) if (item.id == "black") { console.log(item.id) document.getElementById('print').innerHTML = name.toUpperCase(); } else if (item.id == "red") { console.log(item.id) document.getElementById('print').innerHTML = name.toUpperCase(); } else { console.log(item.id) document.getElementById('print').innerHTML = name.toUpperCase(); } }) }) }mais bien évidement ni les console item.id et ni les
document.getElementById('print').innerHTML=name.toUpperCase();n'affichent quoi que ce soit
donc si je comprends bien je devrais ajouter une fonction a mon code ainsi qu'un onclick
lorsque je choisis un bouton radio j'ai ce message
ReferenceError: boutoncouleurclique is not defined
//debut pour afficher le name via le input var form = document.getElementById("forms"); form.onclick = function(e) { e.preventDefault(); var name = document.getElementById("name").value; //console.log(name); document.getElementById('print').innerHTML = name.toUpperCase(); //debut pour savoir quel bouton a ete coche function boutoncouleurclique() { document.querySelectorAll("input").forEach(item => { item.addEventListener("change", () => { console.log(item.id) if (item.id == "black") { console.log(item.id) document.getElementById('print').innerHTML = name.toUpperCase(); } else if (item.id == "red") { console.log(item.id) document.getElementById('print').innerHTML = name.toUpperCase(); } else { console.log(item.id) document.getElementById('print').innerHTML = name.toUpperCase(); } }) }) } }voici un mes input modifié
<label><input type="radio" name="promotion" id="black" data-target="10" value="10" onclick='boutoncouleurclique("black");'/>j'ai un code promo</label>-
Contributeur
La nouvelle fonction doit être déclarée hors de toute autre fonction.
Donc, par exemple, tout à la fin du fichier.
Le point de départ de la réflexion, c'est "quand" l'action doit être exécutée. Décris d'abord "quand" chaque action doit être exécutée, avant de penser à comment modifier le programme.
Avant de toucher au programme, écris ce qu'il doit faire, et quand. Tu es en train de faire exactement les mêmes erreurs que dans la discussion précédente: tu essaies de déclarer des fonctions à l'intérieur d'autres fonctions, et tu confonds le "quand" avec la position dans le programme.
Avant de toucher au programme, écris ce que tu penses réaliser, comment. Inutile de modifier le programme avant que cela soit clair.
Exemple:
- quand l'utilisateur clique ceci, telle fonction fera cela, en lisant telle partie de la page html, et écrira dans telle partie de la page
- évite de montrer des instructions, cela te sert juste comme paravent pour cacher ton incompréhension de ce à quoi elles servent
-
-
Merci pour l'aide et la reponse
en fait tu as tout a fais raison
Pendant que j'étais occupé a répondre
Sans trop me casser la tête avec les codes
J'ai compris que je pouvais faire autrement
je demande juste dans le code du bouton radio de dire que si la couleur est noire
cela signifie que pas de ristourne
Donc de donner les instructions sans remise au client
et ensuite je prends le code avec le input name et je construis mes deux conditions restante
encore une fois je suis allé chercher des complications la ou il ne devait pas y en avoir
Manque de concentration
encore merci pour cette pédagogie
