Comment faire une fonction onclick changer le src pour deux images

Je suis censé ajouter un script à un fichier HTML de sorte que lorsque je clique sur la première étoile dans le système de classement par étoiles, il va changer le src à 'star-on .png 'par opposition à' star-off.png '. Ça, je peux le faire. Mais je n'arrive pas à comprendre comment faire en sorte que si l'utilisateur clique sur la deuxième étoile, cela changera le src pour la première et la deuxième étoile en 'star-on.png'.Comment faire une fonction onclick changer le src pour deux images

Voici le code que mon professeur a fourni:

<!-- 1. PUT YOUR NAME IN THIS COMMENT --> 
<html> 
    <head> 
     <!-- 2. DO NOT EDIT THE CSS --> 
     <style type="text/css"> 
      body { 
       margin: 0; 
      } 
      div { 
       width: 520px; 
       display: block; 
       margin-left: auto; 
       margin-right: auto; 
      } 

      img { 
       width: 100px; 
      } 
     </style> 
     <!-- 2.5 YOU MAY ALTER THE STYLING OF THE BUTTON IF YOU WISH. --> 
     <style type="text/css"> 
      button { 
       width: 200px; 
       display: block; 
       margin-left: auto; 
       margin-right: auto; 
      } 
     </style> 
    </head> 
    <!-- 3. DO NOT ALTER THE HTML EXCEPT TO ADD ONCLICK, ONLOAD, AND SIMILAR ATTRIBUTES --> 
    <!-- AS NEEDED --> 
    <body> 
     <div> 
      <img src="star-off.png" id="one" class="2"> 
      <img src="star-off.png" id="two" class="2"> 
      <img src="star-off.png" id="three"> 
      <img src="star-off.png" id="four"> 
      <img src="star-off.png" id="five"> 
     </div> 
     <button id="reset" onclick="document.getElementById('one').src='star-off.png'">Reset</button> 
     <!-- 4. YOU MAY PUT YOUR SCRIPTING HERE --> 

     <script> 
      document.getElementById('one').onclick = function() { 
      document.getElementById('one').src="star-on.png"; 
      } 
      document.getElementById('two').onclick = function() { 
      document.getElementById('two').src="star-on.png"; 
      } 
      document.getElementById('three').onclick = function() { 
      document.getElementById('three').src="star-on.png"; 
      } 
      document.getElementById('four').onclick = function() { 
      document.getElementById('four').src="star-on.png"; 
      } 
      document.getElementById('five').onclick = function() { 
      document.getElementById('five').src="star-on.png"; 
      } 
     </script> 
    </body> 
</html>

Sauf pour les choses à l'intérieur de la balise de script et le onclick à l'intérieur du bouton, il est tout le code de mon professeur.

Voici ce qu'il ressemble à:

What it looks like

Source

2017-01-29 Nyx

Veuillez poster votre code comme un code, pas comme une capture d'écran. Pour ce faire, copiez-collez votre code, puis sélectionnez-le et appuyez sur CTRL + K pour le formater. –

Eh bien, vous avez vraiment plus de ce que vous essayez de faire dans votre script déjà. Regardez chacune de ces lignes:

document.getElementById('one').onclick = function() { 
    document.getElementById('one').src="star-on.png"; 
} 
document.getElementById('two').onclick = function() { 
    document.getElementById('two').src="star-on.png"; 
} 
document.getElementById('three').onclick = function() { 
    document.getElementById('three').src="star-on.png"; 
} 
document.getElementById('four').onclick = function() { 
    document.getElementById('four').src="star-on.png"; 
} 
document.getElementById('five').onclick = function() { 
    document.getElementById('five').src="star-on.png"; 
}

Essentiellement, chacun est dire sélectionner l'élément par son attribut Id, identifié dans le groupe précédent par le « id = « » » dans cette partie:

<img src="star-off.png" id="one" class="2"> 
<img src="star-off.png" id="two" class="2"> 
<img src="star-off.png" id="three"> 
<img src="star-off.png" id="four"> 
<img src="star-off.png" id="five">

, puis d'y attacher un événement onclick. Lorsque cet événement onclick se déclenche, exécutez la fonction que vous avez définie à droite de chacun des signes égal à la spécification d'événement. À l'intérieur de chacune de vos fonctions, il va simplement identifier l'élément sur le DOM qui correspond à l'identifiant d'élément que vous fournissez (comme vous l'avez déjà fait pour assigner le gestionnaire d'événement dans la section précédente) et vous êtes va changer la valeur de son attribut 'src' à la chaîne que vous définissez du côté droit des égaux.

Prenez le second, selon votre demande. Voici le code HTML que vous faites référence (pour les première et deuxième étoiles):

<img src="star-off.png" id="one" class="2"> 
<img src="star-off.png" id="two" class="2">

Et voici le gestionnaire d'événements que vous avez déjà en place pour le second:

document.getElementById('two').onclick = function() { 
    document.getElementById('two').src="star-on.png"; 
}

droit maintenant, si vous cliquez sur cette deuxième étoile, vous changez seulement l'attribut src de l'élément avec un ID de 'two' à l'image 'star-on.png'. Donc, si vous voulez aussi changer l'élément de l'étoile avant, il a un identifiant de 'un', donc vous devrez ajouter cette ligne dans le gestionnaire d'événements.

document.getElementById('one').src = "star-on.png";

Bien sûr, il existe des moyens plus efficaces de le faire, mais sans doute vous apprendrez à eux que votre cours progresse. Voici à quoi ressemblera votre gestionnaire d'événements avec cette mise à jour:

document.getElementById('two').onclick = function() { 
    document.getElementById('two').src="star-on.png"; 
    document.getElementById('one').src = "star-on.png"; 
}

Source

2017-01-30 04:10:56 Xaniff

Oh merci. Je savais que ça allait être quelque chose de facile comme ça. Merci de m'aider et de m'expliquer si complètement. Vous venez d'enregistrer ma note! – Nyx

Comment faire une fonction onclick changer le src pour deux images

Répondre

Questions connexes