11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Adapter la fonction .onclick a une condition !

Pages :
Bonjour après avoir cherché sur la plupart des sites internet je n'arrive toujours pas à faire fonctionner ma fonction .onclick avec une condition, voici mon code :

var b;
    
var oui = document.getElementById("Oui");

oui.onclick = function()
{

b=1;
    
}

if (b==1)
{
            
    alert('test');

}


Ce code me semble pourtant bon, mais je suppose que le if s'effectue avant que je ne clique sur le bouton, il me semble donc impossible que cela fonctionne. Avez-vous une solution à ce problème, sachant que je sais faire fonctionner un .onclick sans condition:

var oui = document.getElementById("Oui");

oui.onclick = function()
{

    alert('test');

}


Merci d'avance pour votre aide.
Modifié par Tchikibang (04 Jan 2019 - 18:35)
Modérateur
Bonjour,

Tu veux faire quoi au juste ? (à quel moment tu veux que l'alert() affiche son résultat ?)

Amicalement,
Et bien en réalité mon problème est bien plus compliqué à la base, mon but est de créer un bouton oui ainsi qu'un bouton non qui permet de répondre à une question générée aléatoirement , le problème c'est que je pense être obliger de mettre une condition à mon bouton car me situant dans une boucle le programme beug étant donné que le click n'est pas effectué instantanément... Je ne sais pas si vous comprenez. Mais merci !
Modérateur
Bonjour,

Incompréhensible en effet ! Smiley cligne

Je résume ce que je comprends :

Y a deux boutons en face d'une question.

Si on clique sur le bon bouton, on va dire qu'on affiche une alert disant "bon", sinon on affiche une alert disant "mauvais". Supposons qu'on ait une question et que le bon bouton soit "Oui", voici un exemple de code :
<div>
	<span>Est-ce que blabla ?</span>
	<input value="oui" type="button" onclick="alert('bon');">
	<input value="non" type="button" onclick="alert('mauvais');">
</div>


Pourquoi veux-tu mettre une condition ?

Amicalement,
Oublions la condition pour le moment, simplement que ce code fonctionne en effet, mais le problème est que j'ai plusieurs questions à faire afficher à chaque fois qu'une réponse est donnée avez vous une solution ? J'ai créer ce code pour expliquer plus clairement : 

var oui = document.getElementById("Oui");

var non = document.getElementById("Non");

function random(min, max) 
{
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min +1)) + min;
}

function suppr(Nom) 
{
    if(tableau[tableau.indexOf(Nom)])
    {
        tableau.splice(tableau.indexOf(Nom),1);
    }
}

function supprQuest(Nom) 
{
    
    tableauQuest.splice(tableauQuest.indexOf(Nom),1);
    
}

var tableauQuest = ['Vous sentez vous bien?','Habitez vous en France?'];

var tableau = ['bien','mal','France','dehors de la France'];

while(tableau.length>2)
{
a= random(0,tableau.length-1);
    
    if (tableauQuest[tableauQuest.indexOf('Vous sentez vous bien?')] 
        && a==tableauQuest.indexOf('Vous sentez vous bien?')) 
    {
        
        supprQuest('Vous sentez vous bien?');
        document.write('Vous sentez vous bien?');
        
        
            oui.onclick = function()
            {
            
                suppr('mal');
               

            }
            
            non.onclick = function()
            {
            
                suppr('bien');
                
            
            }
    }

else if(tableauQuest[tableauQuest.indexOf('Habitez vous en France?')] 
            && a==tableauQuest.indexOf('Habitez vous en France?')) 
    {
        
        
        document.write('Habitez vous en France?');
        supprQuest('Habitez vous en France?');
            
            oui.onclick = function()
            {
            
                suppr('dehors de la France');
                
               
            }
            
            non.onclick = function()
            {
            
                suppr('France');
               
                

            
            }
            }
}

alert('vous vous sentez'+ tableau[0] + 'et vous habitez en' + tableau[1]);


Ce n'est qu'un exemple, ce n'est pas les questions que je vais poser, le code était trop long ! Smiley biggrin
Modifié par Tchikibang (04 Jan 2019 - 19:28)
Mon but et en réalité de faire fonctionner ce code mais avec des bouton et non des "alert" :

var confirmation;

var oui = document.getElementById("Oui");

var non = document.getElementById("Non");

function random(min, max) 
{
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min +1)) + min;
}

function suppr(Nom) 
{
    if(tableau[tableau.indexOf(Nom)])
    {
        tableau.splice(tableau.indexOf(Nom),1);
    }
}

function supprQuest(Nom) 
{
    
    tableauQuest.splice(tableauQuest.indexOf(Nom),1);
    
}

var tableauQuest = ['Vous sentez vous bien?','Habitez vous en France?'];

var tableau = ['bien','mal','France','dehors de la France'];

while(tableau.length>2)
{
a= random(0,tableauQuest.length-1);
   
    if (tableauQuest[tableauQuest.indexOf('Vous sentez vous bien?')] 
        && a==tableauQuest.indexOf('Vous sentez vous bien?')) 
    {
        
        supprQuest('Vous sentez vous bien?');
        
        confirmation = confirm('Vous sentez vous bien?');
        
        if (confirmation==true){
        
            suppr('mal');
        
        }
        
        else {
        
                suppr('bien');
            
             }
            
    }

else if(tableauQuest[tableauQuest.indexOf('Habitez vous en France?')] 
            && a==tableauQuest.indexOf('Habitez vous en France?')) 
    {
        
        
        confirmation = confirm('Habitez vous en France?');
        supprQuest('Habitez vous en France?');
            
        if (confirmation==true){
        
            suppr('dehors de la France');
        
        }
        
        else {
        
                suppr('France');
            
             }
            
    }
}

alert('vous vous sentez '+ tableau[0] + ' et vous habitez en ' + tableau[1]);
Modérateur
Bonjour,

Si je comprends bien, tu construis ta page avec du javascript. Puis tu la modifies en fonction des réponses de l'utilisateur.

Il ne faut pas confondre la partie construction de la page initiale et la gestion des réponses de l'utilisateur.

Partie construction initiale de la page : série de document.write (éventuellement dans une boucle si tu veux).

Partie gestion des réponses utilisateurs : fonctions se déclenchant suite à un clic de l'utilisateur sur un bouton, et dans ces fonctions, on utilisera des document.getElementById(id).innerHTML pour modifier les questions.

Exemple de code :
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,user-scalable=yes">
</head>
<body>
<h1>Question et réponse</h1>
<script>
// code à insérer à l'endroit où la question doit apparaitre dans la page
function random(min, max) 
{
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min +1)) + min;
}
var tableauQuest = ['Vous sentez-vous bien en France?','Habitez-vous en France?'];
var a= random(0, tableauQuest.length-1);
document.write("<p>");
document.write("<span id='question'>");
document.write(tableauQuest[a]);
document.write("</span>");
document.write("<input id='oui' type='button' value='oui' onclick='reponse(1)'>");
document.write("<input id='non' type='button' value='non' onclick='reponse(2)'>");
document.write("</p>");
</script>
<p>Blablabla ...</p>
<script>
// code à insérer en fin de page, par exemple juste avant la balise body
// la fonction reponse sera déclenchée suite à une clic sur un des boutons
// quand c'est le bouton "oui", n vaut 1
// quand c'est le bouton "non", n vaut 2
function reponse(n)
{
	if (n==1)
	{
		// mettre ici du code suite à réponse "oui"
		alert("merci pour ce oui");
	}
	else
	{
		// mettre ici un autre code suite à une réponse "non"
		alert("merci pour ce non");
	}
	// code supplémentaire éventuel
	// ici, on se contente de permuter les questions
	if (a==0) a = 1;
	else a = 0;
	document.getElementById('question').innerHTML = tableauQuest[a];
}
</script>
</body>
</html>

Amicalement,
Merci,

Ton code est très intéressent, le problème maintenant est de changer ce que va afficher le oui ou le non en fonction de la question.

Cordialement,
Modérateur
Bonjour,

Y a que toi qui peut le faire.

L'indice de la question est dans la variable a. Ça te permet de savoir à tout moment quelle est la question affichée.

Amicalement,
J'ai réalisé ce code en m'inspirant fortement du tiens, il fonctionne mais il m'est par contre impossible de créer une boucle, j'aurais donc besoin d'un dernier conseil si ce n'est trop demandé Smiley cligne :

function suppr(Nom) 
{
    if(tableau[tableau.indexOf(Nom)])
    {
        tableau.splice(tableau.indexOf(Nom),1);
    }
}


var tableau = ['bien','mal','France','dehors de la France'];


function random(min, max) 
{
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min +1)) + min;
}
var tableauQuest = ['Vous sentez-vous bien en France?','Habitez-vous en France?'];


    
var a= random(0, tableauQuest.length-1);
document.write("<p>");
document.write("<span id='question'>");
document.write(tableauQuest[a]);
document.write("</span>");
document.write("<input id='oui' type='button' value='oui' onclick='reponse(1)'>");
document.write("<input id='non' type='button' value='non' onclick='reponse(2)'>");
document.write("</p>");

    
function reponse(n)
{
	if (n==1 && a==tableauQuest.indexOf('Vous sentez-vous bien en France?'))
	{
		// mettre ici du code suite à réponse "oui"
		suppr('mal');
        console.log(tableau);
	}
	else if (n==2 && a==tableauQuest.indexOf('Vous sentez-vous bien en France?'))
	{
		// mettre ici un autre code suite à une réponse "non"
		suppr('bien');
        console.log(tableau);
	}
	
	
    if (n==1 && a==tableauQuest.indexOf('Habitez-vous en France?'))
	{
		// mettre ici du code suite à réponse "oui"
		suppr('dehors de la France');
        console.log(tableau);
	}
	else if (n==2 && a==tableauQuest.indexOf('Habitez-vous en France?'))
	{
		// mettre ici un autre code suite à une réponse "non"
		suppr('France');
        console.log(tableau);
	}
      if (a==0) a = 1;
	else a = 0;
	document.getElementById('question').innerHTML = tableauQuest[a];
    
}
Et bien justement je ne sais pas trop où la placer, et la boucle serait utile étant donné que je ne vais pas avoir seulement deux questions mais une bonne dizaine, il faudrait alors que le programme recommence à chaque fois que l'utilisateur répond à une question afin de générer une nouvelle question aléatoire.

Cordialement,
Modérateur
Bonjour,

Vu qu'il faut attendre une réponse de l'utilisateur pour modifier quelque chose, je ne vois pas à quoi une boucle va te servir.

Eventuellement, tu peux générer toutes les questions dès le départ (via une boucle donc) et n'afficher que l'une d'entre elle (donc en cachant les autres via des display:none).

Quand tu changes de question, au lieu de remplacer le texte de la question affichée par une autre texte, tu mets un display:none à la question précédemment affichée, et un display:block à la question nouvellement affichée.

Je ne connais pas ton niveau en css, mais ce n'est pas très compliqué à faire :
- dans le css, si on suppose que la question est dans une balise de type block, on met deux classes, une avec un display:none et l'autre avec un display:block.

.affiche {display:block;}
.cache {display:none;}


Dans le javascript, pour cacher/afficher une question, on change la classe de la balise qui la contient. Par exemple, si la balise qui contient la question a pour id "q3", on écrira pour l'afficher :
document.getElementById("q3").className="affiche";

Et pour la cacher :
document.getElementById("q3").className="cache";


Amicalement,
Modifié par parsimonhi (04 Jan 2019 - 21:39)
Bonsoir,

J'ai bien compris comment utiliser les display none et block, mais je ne comprend par contre pas comment générer toutes les questions via une boucle. Je m'excuse de mon incompréhension, j'ai pourtant passé une petite heure à rechercher Smiley biggrin . Merci d'avance.

Cordialement,
Modérateur
Bonjour,

Tchikibang a écrit :
...mais je ne comprend par contre pas comment générer toutes les questions via une boucle...


Tu n'as pas vraiment besoin de boucle. C'est l'utilisateur qui en cliquant permet de passer à la question suivante.

Mais puisque tu insistes, voici un exemple avec une boucle :
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,user-scalable=yes">
<style>
.affiche {display:block;}
.cache {display:none;}
input[type="button"] {margin: 0 0.5em;}
</style>
</head>
<body>
<h1>Question</h1>
<script>
// code à insérer à l'endroit où la question doit apparaitre dans la page
function random(min, max) 
{
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min +1)) + min;
}
var tableauQuest = ['Vous sentez-vous bien en France?','Habitez-vous en France?','Le climat est-il un problème?'];
var a = random(0, tableauQuest.length-1), k, c;
document.write("<div class=\"questions\">");
for (k=0; k<tableauQuest.length; k++)
{
	if (a==k) c = "affiche";
	else c = "cache";
	document.write("<div class=\"" + c + "\">");
	document.write(tableauQuest[k]);
	document.write("<input type='button' value='oui' onclick='reponse(1)'>");
	document.write("<input type='button' value='non' onclick='reponse(2)'>");
	document.write("</div>");
}
document.write("</div>");
</script>
<p>Blablabla ...</p>
<script>
// code à insérer en fin de page par exemple juste avant la balise body
// la fonction reponse sera déclenchée suite à une clic sur un des boutons
// a est l'indice de la question posée dans le tableau tableauQuest  
// si c'est le bouton "oui", n vaut 1
// si c'est le bouton "non", n vaut 2
function reponse(n)
{
	var e;
	if (n==1)
	{
		// mettre ici du code suite à réponse "oui"
		alert("merci pour ce oui");
	}
	else
	{
		// mettre ici un autre code suite à une réponse "non"
		alert("merci pour ce non");
	}
	// code supplémentaire éventuel
	// ici, on se contente d'afficher la question suivante
	e = document.querySelector(".affiche");
	e.className = "cache";
	a++;
	if (a == tableauQuest.length) a = 0;
	e = document.querySelector(".questions>div:nth-of-type(" + (a+1) +")");
	e.className = "affiche";
}
</script>
</body>
</html>

Amicalement,
Modifié par parsimonhi (05 Jan 2019 - 13:40)
Modérateur
Bonjour,

Tu la rends aléatoire si tu veux. C'est 2 ou 3 lignes de code à changer.

Amicalement,
Modérateur
Bonjour,

Je t'ai déjà posté le code sans boucle (le premier code complet, celui où on permute les questions à la fin).

Dans ce code, au lieu de permuter les questions avec :
 if (a==0) a = 1; else a = 0;
... tu choisis une nouvelle valeur pour la variable "a" avec ta fonction random, par exemple : 
a = random(0, tableauQuest.length - 1);
... et puis voilà !

Amicalement,
Le problème dans l'aléatoire c'est de ne pas tomber plusieurs fois sur le même objet.
Voici ce que j'ai l'habitude de faire dans ce cas là:

var tableauQuestions = [...];
var randomQuestions = [];
for(var i = 0; i < tableauQuestions.length; i++) {
    randomQuestions[i] = tableauQuestions.splice(Math.floor(tableauQuestions.length * Math.random()), 1){0];
}

Le tableau randomQuestions contient les mêmes items que tableauQuestions, mais dans un ordre aléatoire.
Tu poses les questions dans l'ordre de randomQuestions, ça fait que que tu veux.
Pages :
Sujet clos
Aller à