Mastermind

laulomoi
Javascript

Bonjour,
Voila je rencontre un petit problème avec mon code.
<html>
<head>
<title>Master-mind</title>
<meta charset="UTF-8"/>
</head>
<body>
<input type="button" id="start" value="Go" style="margin-bottom:10px" onclick="aleatoire()";/>
<input type="button" id="restart" value="Recommencer" style="margin-bottom:10px" onclick="Recommencer()";/>
<input type="button" id="verifier" value ="Verifier" style="margin-bottom:10px";/>
<script>
var c = 1; //compteur case
var r = 10 ; // compteur de rang
var placement = ("l"+r+"c"+c);
function start() // lance le roulement des couleurs grace à la fonction aleatoire
{
setTimeout("clearInterval(ref);",5000);
setTimeout("cacher();",4700);
ref = setInterval("aleatoire();",200);
}
function cacher(){
document.getElementById("s").style.visibility = "hidden";
}
document.getElementById("start").onclick=start;
function aleatoire(){
var n1= Math.random()*5;
n1=Math.floor(n1);
n1="rond/"+n1+".png"; 

        do{

        var n2= Math.random()*5;
        n2=Math.floor(n2);
        n2="rond/"+n2+".png";
        }while(n2==n1);

        do{
        var n3= Math.random()*5;
        n3=Math.floor(n3);
        n3="rond/"+n3+".png";
        }
        while(n3==n1 || n3==n2);

        do{
        var n4= Math.random()*5;
        n4=Math.floor(n4);
        n4="rond/"+n4+".png";
        }
        while(n4==n1 || n4==n2 || n4==n3);
        document.getElementById("solution1").src=n1;
        document.getElementById("solution2").src=n2;
        document.getElementById("solution3").src=n3;
        document.getElementById("solution4").src=n4;
        }

    function rondbleu(){
        document.getElementById(placement).src="1.png";
        c+=1;
        placement = ("l"+r+"c"+c);  
    }
    **document.getElementById("rdbleu").onclick=rondbleu;**

    function rondrouge(){
        document.getElementById(placement).src="0.png";
        c+=1;
        placement = ("l"+r+"c"+c);  
    }
    **document.getElementById("rdrouge").onclick=rondrouge;**

    function rondvert(){
        document.getElementById(placement).src="2.png";
        c+=1;
        placement = ("l"+r+"c"+c);  
    }
    **document.getElementById("rdvert").onclick=rondvert;**

    function rondjaune(){
        document.getElementById(placement).src="3.png";
        c+=1;
        placement = ("l"+r+"c"+c);  
    }
    **document.getElementById("rdjaune").onclick=rondjaune;**

    function rondviolet(){
        document.getElementById(placement).src="4.png";
        c+=1;
        placement = ("l"+r+"c"+c);  
    }
    **document.getElementById("rdviolet").onclick=rondviolet;**
</script>
<div class="solution" id="s">
    <img src="rond/rond vide.png" id="solution1"/>
    <img src="rond/rond vide.png" id="solution2"/>
    <img src="rond/rond vide.png" id="solution3"/>
    <img src="rond/rond vide.png" id="solution4"/>
</div>

</br>
<div class="joueur" id="solution">
<!--Ligne 1-->
<img src="rond/rond vide.png" id="l1c1"/>
<img src="rond/rond vide.png" id="l1c2"/>
<img src="rond/rond vide.png" id="l1c3"/>
<img src="rond/rond vide.png" id="l1c4"/>
<span>
<img src="rond/petit rond.png" id="r1ca1">
<img src="rond/petit rond.png" id="r1ca2">
<img src="rond/petit rond.png" id="r1ca3">
<img src="rond/petit rond.png" id="r1ca4">
</span>
</br>
<!--Ligen 2-->
<img src="rond/rond vide.png" id="l2c1"/>
<img src="rond/rond vide.png" id="l2c2"/>
<img src="rond/rond vide.png" id="l2c3"/>
<img src="rond/rond vide.png" id="l2c4"/>
<span>
<img src="rond/petit rond.png" id="r2ca1">
<img src="rond/petit rond.png" id="r2ca2">
<img src="rond/petit rond.png" id="r2ca3">
<img src="rond/petit rond.png" id="r2ca4">
</span>
</br>
<!--Ligne 3-->
<img src="rond/rond vide.png" id="l3c1"/>
<img src="rond/rond vide.png" id="l3c2"/>
<img src="rond/rond vide.png" id="l3c3"/>
<img src="rond/rond vide.png" id="l3c4"/>
<span>
<img src="rond/petit rond.png" id="r3ca1">
<img src="rond/petit rond.png" id="r3ca2">
<img src="rond/petit rond.png" id="r3ca3">
<img src="rond/petit rond.png" id="r3ca4">
</span>
</br>
<!--Ligne 4-->
<img src="rond/rond vide.png" id="l4c1"/>
<img src="rond/rond vide.png" id="l4c2"/>
<img src="rond/rond vide.png" id="l4c3"/>
<img src="rond/rond vide.png" id="l4c4"/>
<span>
<img src="rond/petit rond.png" id="r4ca1">
<img src="rond/petit rond.png" id="r4ca2">
<img src="rond/petit rond.png" id="r4ca3">
<img src="rond/petit rond.png" id="r4ca4">
</span>
</br>
<!--Ligne 4-->
<img src="rond/rond vide.png" id="l5c1"/>
<img src="rond/rond vide.png" id="l5c2"/>
<img src="rond/rond vide.png" id="l5c3"/>
<img src="rond/rond vide.png" id="l5c4"/>
<span>
<img src="rond/petit rond.png" id="r5ca1">
<img src="rond/petit rond.png" id="r5ca2">
<img src="rond/petit rond.png" id="r5ca3">
<img src="rond/petit rond.png" id="r5ca4">
</span>
</br>
<!--Ligne 6-->
<img src="rond/rond vide.png" id="l6c1"/>
<img src="rond/rond vide.png" id="l6c2"/>
<img src="rond/rond vide.png" id="l6c3"/>
<img src="rond/rond vide.png" id="l6c4"/>
<span>
<img src="rond/petit rond.png" id="r6ca1">
<img src="rond/petit rond.png" id="r6ca2">
<img src="rond/petit rond.png" id="r6ca3">
<img src="rond/petit rond.png" id="r6ca4">
</span>
</br>
<!--Ligne7-->
<img src="rond/rond vide.png" id="l7c1"/>
<img src="rond/rond vide.png" id="l7c2"/>
<img src="rond/rond vide.png" id="l7c3"/>
<img src="rond/rond vide.png" id="l7c4"/>
<span>
<img src="rond/petit rond.png" id="r7ca1">
<img src="rond/petit rond.png" id="r7ca2">
<img src="rond/petit rond.png" id="r7ca3">
<img src="rond/petit rond.png" id="r7ca4">
</span>
</br>
<!--Ligne8-->
<img src="rond/rond vide.png" id="l8c1"/>
<img src="rond/rond vide.png" id="l8c2"/>
<img src="rond/rond vide.png" id="l8c3"/>
<img src="rond/rond vide.png" id="l8c4"/>
<span>
<img src="rond/petit rond.png" id="r8ca1">
<img src="rond/petit rond.png" id="r8ca2">
<img src="rond/petit rond.png" id="r8ca3">
<img src="rond/petit rond.png" id="r8ca4">
</span>
</br>
<!--Ligne9-->
<img src="rond/rond vide.png" id="l9c1"/>
<img src="rond/rond vide.png" id="l9c2"/>
<img src="rond/rond vide.png" id="l9c3"/>
<img src="rond/rond vide.png" id="l9c4"/>
<span>
<img src="rond/petit rond.png" id="r9ca1">
<img src="rond/petit rond.png" id="r9ca2">
<img src="rond/petit rond.png" id="r9ca3">
<img src="rond/petit rond.png" id="r9ca4">
</span>
</br>
<!--Ligne10-->
<img src="rond/rond vide.png" id="l10c1"/>
<img src="rond/rond vide.png" id="l10c2"/>
<img src="rond/rond vide.png" id="l10c3"/>
<img src="rond/rond vide.png" id="l10c4"/>
<span>
<img src="rond/petit rond.png" id="r10ca1">
<img src="rond/petit rond.png" id="r10ca2">
<img src="rond/petit rond.png" id="r10ca3">
<img src="rond/petit rond.png" id="r10ca4">
</span>
</br>
<div>
<img src="rond/0.png" id="rdrouge"/>
<img src="rond/2.png" id="rdvert"/>
<img src="rond/1.png" id="rdbleu"/>
<img src="rond/3.png" id="rdjaune"/>
<img src="rond/4.png" id="rdviolet"/>
</div>
</body>
</html>

Le but de celui-ci est de créer le jeu Mastermind. Lorsque je lance mon code, j'obtient ma page. La solution se lance aléatoirement et se cache aubout d'un moment jusque là aucune problème. Lorsque je veux cliquer sur un des ronds de couleurs situé en bas pour la placer dans la grille de jeu cela ne marche pas et je ne comprends pas pourquoi.
J'ai l'impression que le probleme provient des phrases misent en gras (ou avec 2 "**" )mais je n'arrive pas à voir ma faute. Est-ce que je pourrais avoir de l'aide svp.
Merci

3 réponses

Lartak
Réponse acceptée

Dans ce cas marques le sujet comme tel, pour se faire, il te suffit de cliquer sur le bouton à droite de ta réponse.

Lartak

Bonjour.
Pour commencer, tu devrais éditer ton sujet et placer le code dans la balise prévue à cet effet.
Ensuite, que fais du code HTML en plein dans ton code JavaScript, soit <br> ?

laulomoi
Auteur

Bonjour,
Merci de ta réponse, je ne connais pas ce site donc je n'ai pas su m'en servir. De plus j'ai réussi à trouver le problème il manquait juste les appels de fonctions. merci