Quel est le meilleur moyen de voter sur mon site Web? (Maintenant en utilisant innerhtml

Question

Je fais un prototype pour un site Web Je veux montrer que l'utilisateur peut choisir entre trois images et choisir une image préférée

Je l'ai fait avec innerhtml, pour montrer que l'utilisateur a choisi un favori , le texte change. le problème est maintenant que vous pouvez voter autant de fois que vous voulez. Je veux que ce soit que vous ne pouvez choisir une image.

function myKeuze() { 
 
    document.getElementById("keuzeVerhaal").innerHTML = "What is your favorite picture?"; 
 
} 
 

 
function Sien() { 
 
    document.getElementById("uitslag").innerHTML = "Your vote is: Sien!"; 
 
} 
 

 
function Pien() { 
 
    document.getElementById("uitslag").innerHTML = "Your vote is: Pino!"; 
 
} 
 

 
function Aart() { 
 
    document.getElementById("uitslag").innerHTML = "Your vote is: Aart!"; 
 
}

<section id="Three" class="main style1 dark fullscreen"> 
 
    <div class="content container 75%"> 
 
    <header> 
 
     <h2 id="uitslag">Choose your favorite</h2> 
 
     <h3 id="keuzeVerhaal">Which picture do you like most??</h3> 
 
    </header> 
 
    <img src="sien.png" width="30%" onclick="myKeuze();Sien()" /> 
 
    <img src="pien.png" width="30%" onclick="myKeuze();Pien()" /> 
 
    <img src="aart.png" width="30%" onclick="myKeuze();Aart()" /> 
 
    </div> 
 
</section>

Answer 1

J'ai ajouté une fonction est appelé sur le clic appelé stopVoting cette fonction une fois appelée empêchera les clics sur les images.

La méthode ci-dessous fonctionne en faisant une boucle sur toutes les images et en tournant leur attribut onclick en null de cette manière, en cliquant dessus, rien ne sera fait dans le futur.

function myKeuze() { 
 
    document.getElementById("keuzeVerhaal").innerHTML = "What is your favorite picture?"; 
 
} 
 

 
function Sien() { 
 
    document.getElementById("uitslag").innerHTML = "Your vote is: Sien!"; 
 
    stopVoting(); 
 
} 
 

 
function Pien() { 
 
    document.getElementById("uitslag").innerHTML = "Your vote is: Pino!"; 
 
    stopVoting(); 
 
} 
 

 
function Aart() { 
 
    document.getElementById("uitslag").innerHTML = "Your vote is: Aart!"; 
 
    stopVoting(); 
 
} 
 
function stopVoting(){ 
 
var images = document.querySelectorAll('#Three img'); 
 
for(var i = 0; i < images.length; i++){ 
 
    images[i].onclick = null; 
 
} 
 

 
}

<section id="Three" class="main style1 dark fullscreen"> 
 
    <div class="content container 75%"> 
 
    <header> 
 
     <h2 id="uitslag">Choose your favorite</h2> 
 
     <h3 id="keuzeVerhaal">Which picture do you like most??</h3> 
 
    </header> 
 
    <img src="sien.png" width="30%" onclick="myKeuze();Sien()" /> 
 
    <img src="pien.png" width="30%" onclick="myKeuze();Pien()" /> 
 
    <img src="aart.png" width="30%" onclick="myKeuze();Aart()" /> 
 
    </div> 
 
</section>