Sujet Précédent Sujet Suivant

Problème pour imbriquer 2 codes de javascript

Résolu/Fermé
flexi2202 Messages postés 3801 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 octobre 2024 - Modifié le 14 août 2022 à 11:48
flexi2202 Messages postés 3801 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 octobre 2024 - 14 août 2022 à 21:46

Bonjour 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

A voir également:

3 réponses

Réponse 1 / 3
yg_be Messages postés 23342 Date d'inscription lundi 9 juin 2008 Statut Contributeur Dernière intervention 21 novembre 2024 Ambassadeur 1 551
14 août 2022 à 13:02

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.
1
Réponse 2 / 3
flexi2202 Messages postés 3801 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 octobre 2024 187
Modifié le 14 août 2022 à 17:33

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>
0
yg_be Messages postés 23342 Date d'inscription lundi 9 juin 2008 Statut Contributeur Dernière intervention 21 novembre 2024 1 551
14 août 2022 à 18:07

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
1
Réponse 3 / 3
flexi2202 Messages postés 3801 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 octobre 2024 187
14 août 2022 à 21:46

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
0

Discussions similaires

Great Teacher Onizuka SAISON 2
remi1912 -
Sorrow -

35 réponses
Je tiens combien de temps avec 2Go d'internet ?
champi100 -
dadout -

7 réponses
IPTV CODE BLOQUÉ
Balcoleo -
bazfile -

1 réponse