无法使用 javascript 在 for 循环中切换文本

Question

I have a list of cards displayed via a for loop. On click I want to toggle some text. It works fine for the top card, but when I click the card below, it toggles the first card. This is the case even though i've given the cards different id's used in the javascript toggle function.

Any ideas about what i'm doing wrong?

<!-- HTML -->
        {% for card in cards %}
                  <div class="card mb-3">
                    <div class="card-header">
                      <img class = "float:left mr-2 mt-1 small-profile-picture" src ="{{ card.creator.profile.image.url }}" >
                      <a class="mb-4 float-up"  > {{ card.creator }}</a>
                       <small> <p class=mt-2> {{ card.date }}  </p> </small>
        
                    </div> <!-- Card Header ender  -->
        
                    <!-- Here we have the questions and answers -->
                    <div onclick="myFunction()" style="cursor: pointer;">
                      <div class="card-body mt-4">
                        <h5 class="card-title"> <a class="article-title">{{ card.question }}</a></h5>
                        <p id="myDIV{{card.card_id}}"> Click to see Answer </p>
                        <!-- <p class="card-text"> {{ card.answer}} </p> -->
                      </div> <!-- Card body ender -->
                    </div>
    
<!--Javascript -->
              <script type="text/javascript">
                function myFunction() {
                    var x = document.getElementById("myDIV{{card.card_id}}");
                    if (x.innerHTML === "Click to see Answer") {
                      x.innerHTML = "{{card.answer}}";
                    } else {
                      x.innerHTML = "Click to see Answer";
                    }
                  }
    
              </script>
{% endfor %}

Thanks for reading

Answer 1

There's a lot of things I would do differently here if I'm honest, but to keep the solution as close to your code as possible, I'd suggest the following. Remove the <script> from within your loop - you're redefining the function every time it loops. This is unnecessary and will probably cause a bunch of undesired effects.

Separate the JavaScript and pass myFunction arguments, rather than hard-coding strings into the function.

This is untested, but should point you in the right direction.

<script type="text/javascript">
    function myFunction(id, answer) {
         // note the template literal syntax below,
         // this is different to the handlebars provided by django.
        let x = document.getElementById(`card-${id}`);
        if (x.innerHTML === "Click to see Answer") {
            x.innerHTML = answer;
        } else {
            x.innerHTML = "Click to see Answer";
        }
    }
</script>

{% for card in cards %}
<div class="card mb-3">
    <div class="card-header">
        <img class = "float:left mr-2 mt-1 small-profile-picture" src="{{ card.creator.profile.image.url }}" >
        <a class="mb-4 float-up"> {{ card.creator }}</a>
        <small> <p class=mt-2> {{ card.date }}  </p> </small>
    </div>

    <div onclick="myFunction({{ card.card_id }}, {{ card.answer }})" style="cursor: pointer;">
        <div class="card-body mt-4">
        <h5 class="card-title"> <a class="article-title">{{ card.question }}</a></h5>
        <p id="card-{{ card.card_id }}"> Click to see Answer </p>
        </div>
    </div>
</div>
{% endfor %}

Answer 2

I changed a bit the questions and answers block:

 function myFunction(ele) { ele.querySelector('.card-body.mt-4 .card-text').classList.toggle('d-none'); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> <div onclick="myFunction(this)" style="cursor: pointer;"> <div class="card-body mt-4"> <h5 class="card-title"> <a class="article-title">{{ card.question }}</a></h5> <p id="useless...."> Click to see Answer </p> <!--- removed comment from the next line --> <p class="card-text d-none"> This is the answer ....{{ card.answer}} </p> </div> <!-- Card body ender --> </div>