Swap the image with one click on multiple records

Asked

Viewed 71 times

2

I have a little problem in Javasscript. I have a table with several lines, in each row has data and a check at the end of the line that, when clicked, changes the image. Very similar to the Joomla listing, who knows, will understand.

I even managed, right here the script that changes the image, but, changes in one line. How to make the event happen on all lines?

Follows the code:

  function test() {

    if (document.pic1.src == 'https://cdn3.iconfinder.com/data/icons/flat-actions-icons-9/792/Tick_Mark_Dark-32.png') {

      document.pic1.src = 'https://cdn3.iconfinder.com/data/icons/flat-actions-icons-9/792/Close_Icon_Dark-32.png';

    } else if (document.pic1.src == 'https://cdn3.iconfinder.com/data/icons/flat-actions-icons-9/792/Close_Icon_Dark-32.png') {

      document.pic1.src = 'https://cdn3.iconfinder.com/data/icons/flat-actions-icons-9/792/Tick_Mark_Dark-32.png';
    }
  }
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>


</head>

<body>
  <form action="#">
    <table>
      <tr>
        <td>Zé Mané</td>
        <td>
          <img name="pic1" src="https://cdn3.iconfinder.com/data/icons/flat-actions-icons-9/792/Tick_Mark_Dark-32.png" onclick="test()" />
        </td>
      </tr>
      <tr>
        <td>João das Paçocas</td>
        <td>
          <img name="pic2" src="https://cdn3.iconfinder.com/data/icons/flat-actions-icons-9/792/Tick_Mark_Dark-32.png" onclick="test()" />
        </td>
      </tr>
      <tr>
        <td>Carlão Pé de Burro</td>
        <td>
          <img name="pic3" src="https://cdn3.iconfinder.com/data/icons/flat-actions-icons-9/792/Tick_Mark_Dark-32.png" onclick="test()" />
        </td>
      </tr>
      <tr>
        <td>Zezão Mão de Entortar Cano</td>
        <td>
          <img name="pic4" src="https://cdn3.iconfinder.com/data/icons/flat-actions-icons-9/792/Tick_Mark_Dark-32.png" onclick="test()" />
        </td>
      </tr>
    </table>
  </form>

</body>

</html>

Who can tell me how I do, I thank you in advance.

javascript image script

2 answers

2

Just use a Event Handler onclick (no need to use an event attribute onclick in each image). Then, remove all onclick="test()" of the images and use:

document.addEventListener("DOMContentLoaded", function(){
   // busca todas as imagens cujo name começa com "pic"
   var imgs = document.querySelectorAll("img[name^='pic']");
   // percorre todas as imagens e cria um event handler onclick em cada uma
   for(var x = 0; x < imgs.length; x++){
      imgs[x].onclick = function(){
         // pega o src da imagem clicada
         var icon = this.src;
         // alterna entre um ícone e outro
         if(/Tick_Mark/.test(icon)){
            this.src = "https://cdn3.iconfinder.com/data/icons/flat-actions-icons-9/792/Close_Icon_Dark-32.png";
         }else{
            this.src = "https://cdn3.iconfinder.com/data/icons/flat-actions-icons-9/792/Tick_Mark_Dark-32.png";
         }
      }
   }
});
<form action="#">
 <table>
   <tr>
     <td>Zé Mané</td>
     <td>
       <img name="pic1" src="https://cdn3.iconfinder.com/data/icons/flat-actions-icons-9/792/Tick_Mark_Dark-32.png"/>
     </td>
   </tr>
   <tr>
     <td>João das Paçocas</td>
     <td>
       <img name="pic2" src="https://cdn3.iconfinder.com/data/icons/flat-actions-icons-9/792/Tick_Mark_Dark-32.png"/>
     </td>
   </tr>
   <tr>
     <td>Carlão Pé de Burro</td>
     <td>
       <img name="pic3" src="https://cdn3.iconfinder.com/data/icons/flat-actions-icons-9/792/Tick_Mark_Dark-32.png"/>
     </td>
   </tr>
   <tr>
     <td>Zezão Mão de Entortar Cano</td>
     <td>
       <img name="pic4" src="https://cdn3.iconfinder.com/data/icons/flat-actions-icons-9/792/Tick_Mark_Dark-32.png"/>
     </td>
   </tr>
 </table>
</form>

  • Hello Sam!!! Thanks for the reply. I’m sorry, but I didn’t see that you had posted.

  • Could you tell me how I do the "Accept" of Mauro’s answer???

1


What I did was create two arrays with the following functionalities:

  • A array checked which maintains the state of checked or unchecked using a boolean value. This value will allow you to place the image corresponding to the state checked or unchecked.

  • A array pics maintains the reference for the image element in which the src.

To indicate which button was clicked, include the function test a parameter with an integer value. This method is called with 0/1/2/3 corresponding to the clicked image. I used the numbering started at 0 and not at 1 to match the indexing of array.

  var checked = new Array(4).fill(true);

  function test(picNumber) {
    var baseUrl = 'https://cdn3.iconfinder.com/data/icons/flat-actions-icons-9/792/';
    var pics = document.querySelectorAll("img[name^='pic']");
    if(checked[picNumber]){
        pics[picNumber].src = baseUrl + 'Close_Icon_Dark-32.png';
        checked[picNumber] = false;
    }
    else{
        pics[picNumber].src = baseUrl + 'Tick_Mark_Dark-32.png';
        checked[picNumber] = true;
    }
 }
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>


</head>

<body>
  <form action="#">
    <table>
      <tr>
        <td>Zé Mané</td>
        <td>
          <img name="pic1" src="https://cdn3.iconfinder.com/data/icons/flat-actions-icons-9/792/Tick_Mark_Dark-32.png" onclick="test(0)" />
        </td>
      </tr>
      <tr>
        <td>João das Paçocas</td>
        <td>
          <img name="pic2" src="https://cdn3.iconfinder.com/data/icons/flat-actions-icons-9/792/Tick_Mark_Dark-32.png" onclick="test(1)" />
        </td>
      </tr>
      <tr>
        <td>Carlão Pé de Burro</td>
        <td>
          <img name="pic3" src="https://cdn3.iconfinder.com/data/icons/flat-actions-icons-9/792/Tick_Mark_Dark-32.png" onclick="test(2)" />
        </td>
      </tr>
      <tr>
        <td>Zezão Mão de Entortar Cano</td>
        <td>
          <img name="pic4" src="https://cdn3.iconfinder.com/data/icons/flat-actions-icons-9/792/Tick_Mark_Dark-32.png" onclick="test(3)" />
        </td>
      </tr>
    </table>
  </form>

</body>

</html>

  • Hello, Mauroalmeida!!! Thanks for answering!!! This is exactly what I need, but I have a question in a detail. The table contains up to 50 rows. how to solve this line of your code: var pics = [Document.pic1, Document.pic2, Document.pic3, Document.pic4]; Pq, here, as I understand it, you create a Matrix with 4 elements. In the case of 50, how could this be solved???

  • @Deciorocha made this line of code disappear and I used a selector. In the checked array you have to have the right amount of values, in case 50 would have to have 50 values.

  • 1

    Hello Mauroalmeida. This is exactly what I needed. Thank you for your prompt reply. Stay with GOD. Thank you very much!!!

  • If my answer helped you to solve your problem put it as the accepted answer.

  • Sorry, I didn’t know!!!

  • @Deciorocha has not yet put as accepted answer expensive.

  • @Deciorocha see here how accept

  • 1

    Poxa, simple and cool!!! Like!!!

Show 3 more comments

Browser other questions tagged javascript image script

You are not signed in. Login or sign up in order to post.