Problème pour imbriquer 2 codes de javascript

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>

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