Changing an image with each click

Navigation
0

Good people, I have a problem here. I searched several times here on the website and on the internet and did not have an answer that would help me enough, I still have questions.

I have a website and I have sectors "collapsible", so to illustrate, I would like to put an arrow pointing up and when I clicked, pointed down, or whatever. I managed to do this, however, only once, if I click again, the image stays down and does not change until the page refreshes. I put the image at the beginning of the text, just below I have an example.

In fact, what I really wanted was for it to change when I clicked on any part of the collapsible item title, but for now I only got it to change when I clicked on it.

Finally, there are two questions in this case. How do I get her to "loop" and every time I click she changes? and How do I get it to trigger when I click on the title too ??

I put the javascript code together to facilitate my tests, the idea is to move on to another file later. I'm a beginner, I have experience with HTML and CSS, but javascript is pretty basic, I'm reminiscing a lot of HTML and CSS with this project that I have not moved in a long time and would like a jauda. Thank you very much!

HTML with Javascript code together: 

<div class="card">
   <div class="card-header" role="tab" id="headingTwo">
      <h5 class="mb-0">
	 <h1 class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" ng-click="alert_step2()">

	 <img id="example" onclick="changeImage()" src="assets/img/arrow_up.png" width="20" height="25">

	 <script>
	 function changeImage(){								 
           element=document.getElementById('example')
              if (element.src.match("out")){
									  
                 element.src="assets/img/arrow_up.png";
              }
              else{
									  
                 element.src="assets/img/arrow_down.png";
              }

              changeImage.repeat(100);
          }
	  </script>
									Step 2 - Acknowledge Your Strengths (highest scores)
							
          </h1>
      </h5>
   </div>
</div>
                      <div class="card">
                    <div class="card-header" role="tab" id="headingTwo">
                      <h5 class="mb-0">
                        <h1 class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" ng-click="alert_step2()">


                                <h1 class="change"><img class="change img-change" src="assets/img/arrow_up.png" style="width: 20px; height: 25px">Step 2 - Acknowledge Your Strengths (highest scores)</h1>

Remembering that the script that Mateus Veloso gave me is underneath this collapse

Updated code: 

                  <div class="card">
                    <div class="card-header" role="tab" id="headingTwo">
                      <h5 class="mb-0">


                                <script>
                                $('.change').click((e) => {
                                  var img1 = 'assets/img/arrow_up.png';
                                  var img2 = 'assets/img/arrow_down.png';
                                  var element = $('.img-change');
                                  if(element.attr('src') === img1){
                                    element.attr('src',img2);
                                  }else if(element.attr('src') === img2){
                                    element.attr('src',img1);
                                  }
                                });
                                </script>


                       <h1 class="collapsed change" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" ng-click="alert_step2()"> <img class="change img-change" src="assets/img/arrow_up.png" style="width: 20px; height: 25px">Step 2 - Acknowledge Your Strengths (highest scores)</h1>

                        </h1>
                      </h5>
                    </div>
    
asked by anonymous 25.10.2018 / 16:23

2 answers

2

I made a functional example, I think it is possible for you to have an idea how to do it by looking at it, the example I created is very simple, in case you need something more complex you can comment below. 

$('.change').click((e) => {
  var img1 = 'https://i.stack.imgur.com/vIerE.png';
  var img2 = 'https://i.stack.imgur.com/cinkW.png';
  var element = $('.img-change');
  if(element.attr('src') === img1){
    element.attr('src',img2);
  }else if(element.attr('src') === img2){
    element.attr('src',img1);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><h1class="change">Testando Click</h1>
<img class="change img-change" src="https://i.stack.imgur.com/vIerE.png">

Examplewithpurejavascript!

var elements = document.getElementsByClassName('change');
elements[0].addEventListener("click", click);
elements[1].addEventListener("click", click);

function click(){
  var img1 = 'https://i.stack.imgur.com/vIerE.png';
  var img2 = 'https://i.stack.imgur.com/cinkW.png';
  var element = document.getElementById('img-change');
  if(element.src === img1){
    element.src = img2;
  }else if(element.src === img2){
    element.src = img1;
  }
}
<h1 class="change">Testando Clique</h1>
<img class="change" id="img-change" src="https://i.stack.imgur.com/vIerE.png">
    
25.10.2018 / 17:07
0

Apparently you're using Bootstrap's collapse along with the card .

If this is the case, collapse shows / hides the elements through classes:

  • In the element that is hidden, classes are added:

    • .collapse to hide content;
    • .collapsing during the transition;
    • .collapse.show to show content

  • In the element that activates collapse:

    • .collapsed when element is hidden

That said, with CSS you already know if the element is showing or hidden through the presence or absence of the collapsed class in the activator. This way you can use other CSS artifacts to add the arrows in the .card-header and transform the .card-header integer into the accordeon trigger.

Example: 

<div class="card">
    <div class="card-header" id="headingOne" 
        data-toggle="collapse" data-target="#collapseOne">
        <h5>Card title</h5>
    </div>
    <div id="collapseOne" class="collapse show">
        <div class="card-body">Card content</div>
    </div>
</div>

Snippet using the :after pseudo selector along with the < a href="https://developer.mozilla.org/en-US/docs/Web/CSS/content"> content to create the status indicators: 

.card-header {
  cursor: pointer;
}

.card-header:after {
  content: '▲';
  position: absolute;
  top: 10px;
  right: 10px;
}

.card-header.collapsed:after {
  content: '▼';
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script><linkrel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">


<div class="container">
    <div class="accordion" id="accordionExample">
        <div class="card">
            <div class="card-header bg-primary text-white" id="headingOne" data-toggle="collapse" data-target="#collapseOne">
                <h5 class="mb-0">Collapsible Group Item #1</h5>
            </div>

            <div id="collapseOne" class="collapse show" data-parent="#accordionExample">
                <div class="card-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header collapsed bg-primary text-white" id="headingTwo" data-toggle="collapse" data-target="#collapseTwo">
                <h5 class="mb-0">Collapsible Group Item #2</h5>
            </div>
            <div id="collapseTwo" class="collapse"data-parent="#accordionExample">
                <div class="card-body">
                    3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header collapsed bg-primary text-white" id="headingThree" data-toggle="collapse" data-target="#collapseThree">
                <h5 class="mb-0">Collapsible Group Item #3</h5>
            </div>
            <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
                <div class="card-body">
                    Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. 
                </div>
            </div>
        </div>
    </div>
</div>
    
25.10.2018 / 20:04
Get value in onclick js Understanding RegEx test in MDN