5568 sujets

Sémantique web et HTML

Changer image HTML

Hello there !

j'aimerais pouvoir changer une image clickable par une image de la même nature au bout de 25 clicks. Je me doute de l'utilisation d'une boucle if mais je ne connais pas toute la syntaxe. Une peu d'aide serait la bienvenue, merci


<!DOCTYPE HTML>
<html>
<head>

<meta charset="utf-8">
</head>
<body>
<button onclick="suivant();"<a href="clicker.html"> <img src="perso1.jpg"</a></button>
<span id="valeur">0</span>
is your current tier
</body>
<script type="text/javascript">

let your_tier = 0;
function suivant () {
your_tier = your_tier + 1;
let v = document.getElementById("valeur");
v.innerHTML = your_tier;
}

if (your_tier>25) {

</script>


</html>
Merci de ta réponse

J'ai modifié la page mais le problème persiste, après les 25 clicks, l'image ne change pas. Voilà ma page :

<!DOCTYPE HTML>
<html>
<head>

<meta charset="utf-8">
</head>
<body>
<button onclick="suivant();"<a href="clicker.html"> <img src="perso1.jpg"</a></button>
<span id="valeur">0</span>
is your current tier
</body>
<script type="text/javascript">

let your_tier = 0;
function suivant () {
your_tier = your_tier + 1;
let v = document.getElementById("valeur");
v.innerHTML = your_tier;

if (your_tier > 25) {
document.getElementById("myImg").src = "perso2.jpg";
}
}



</script>


</html>




PS : j'ai bien plus de mal avec HTML et CSS que sur Idle Smiley bawling
Merci pour ton aide, je vais analyser le code plus en détails Je comprends son fonctionnement, il faut juste que je l'adapte à mon programme car pour le moment il ne marche toujours pas. J'ai encore 5 jours pour le terminer, je devrais avoir le temps !
Si tu as des problème pour l'adapter à ton programme hésite pas à me contacter (;

PS : Je suis vraiment pas sur que placer la balise <script> après la balise </body> soit vraiment très conventionnel mais bon ...
Modifié par vzytoi (17 Jun 2020 - 03:06)
Modérateur
@Lidzo : Alors avant tout j'avais pas vu mais ton code est en vrac.
<button onclick="suivant();"<a href="clicker.html"> <img src="perso1.jpg"</a></button>

Tu crois pas qu'il y a un petit soucis ici ? Mets ton code dans les balises prévu a cet effet pour avoir la coloration syntaxique. Et développe avec un éditeur de code qui le fait aussi tu aurais pu voir ça directement...

Pas besoin de mettre ton image dans un button, mets le onClick directement sur l'image.

Lidzo a écrit :
J'ai modifié la page mais le problème persiste, après les 25 clicks, l'image ne change pas. Voilà ma page :

Dans le code tu as recopié :
document.getElementById("myImg").src = "perso2.jpg";

Tu n'as aucun élément avec l'id myImg..

Et voila après tout ça, ça fonctionnera.

@vzytoi Un peu violent le querySelector pour l'img et le p... faut pas qu'il y en ai d'autres sur la page... Smiley lol
J'ai pu trouver une solution pour mon code, j'arrive à le faire fonctionner avec plusieurs images mais est-il possible de le faire avec plus d'images avec cette base ? Sinon, quelle manière faut-il adopter ?


<!DOCTYPE HTML>
<html>
<head>

<meta charset="utf-8">
</head>
<body>
<button onclick="suivant();"> <img id="imageBouton" src="perso1.jpg"> </button>
<span id="valeur">0</span>
is your current tier
</body>
<script type="text/javascript">

let your_tier = 0;

function suivant () {
your_tier = your_tier + 1;
let v = document.getElementById("valeur");
v.innerHTML = your_tier;

if (your_tier == 25) {
document.getElementById("imageBouton").setAttribute("src","perso2.jpg");
}
}
</script>
</html>
Sujet clos
Aller à