list all image button clicked change image

Question

every one ,I am using django's template language with javascript to do "clicked image button change image" ,however,the result I got was only can change the last button.I do not know why what's wrong about the code , here is my

indext.html

{% extends 'base.html' %}
{% load static %}
{% block title %}
Homepage - {{ block.super }}
{% endblock title %}
{% block content %}
<script>
function setColor(e, btn, color) {
  var target = e.target,
      count = +target.dataset.count;

   target.style.backgroundColor = count === 1 ? "#7FFF00" : '#FFFFFF';
   target.dataset.count = count === 1 ? 0 : 1;
}

  var img_array = [ src="{% static "img/published.png" %}" , src="{% static "img/draft.png" %}"];
  i = 0;

{% for post in posts %}
function myFunction({{ post.model_number }}) {
    i++;
    document.getElementById("{{ post.model_number }}").src = img_array[i];
    if (i == img_array.length - 1) {
        i = -1;

    }

}
{% endfor %}

</script>

<table class="table table-bordered">
    <tr>
        <td>產品編號</td><td>產品名稱</td><td>建立日期</td><td>產品圖片</td><td>最後修改日期</td><td>產品說明</td><td>建立者</td><td>修改者</td><td></td>
    </tr>
{% for post in posts %}
    <tr>
        <td> {{ post.model_number }} </td>
        <td><a href="{% url 'thing_detail' slug=post.slug %}">{{ post.name }}</a></td>
        <td>{{ post.created }} </td>
        <td>  <img src="{% if post.image %} {{ post.image.url }}{% else %}{% static "img/no_image.png" %}{% endif %}" height="100" width="100"> </td>
        <td>{{ post.modified }} </td>
        <td>{{ post.feature }}</td>
        <td>{{ post.user }}</td>
        <td>{{ post.useredit }}</td>
         {% for cp in post.cataloggroup.all %}
        <td> {{cp }}</td>
         {% endfor %}

        <td><a href="{% url 'edit_thing' slug=post.slug %}"><input class="button0 button2"   type="button" id="button" value="編輯" style="color:#fffff0" onclick="setColor(event, 'button', '#101010')"; data-count="1" /><a></td>



<td><button onclick="myFunction({{ post.model_number }})"><img id="{{ post.model_number }}" src="{% static "img/published.png" %}"    width="50" height="30"></button></td>


</tr>
{% endfor %}
</table>
{% include "pagination.html" with page=posts %}
{% endblock content %}

and it will render the web

however, when I click the top button ,it will change the bottom button,I have to let every button clicked can change image

above image I clicked top button but changed the bottom button's image "published ---> draft"

I have to let every button clicked can changed it's own image,how can I do it?

Answer 1

ok,I solve the problem

index.html

<script>   
...........  
var img_array = [ src="{% static "img/published.png" %}" , src="{% static "img/draft.png" %}"];
  i = 0;


{% for post in posts %}
function a{{ post.model_number }}() {
    i++;
    document.getElementById("{{ post.model_number }}").src = img_array[i];
    if (i == img_array.length - 1) {
        i = -1;

    }

}

{% endfor %}

</script>

<table class="table table-bordered">
    <tr>

{% for post in posts %}
    <tr>
    .........    

<td><button onclick="a{{ post.model_number }}()"><img id="{{ post.model_number }}" src="{% static "img/published.png" %}"    width="50" height="30"></button></td>


</tr>
{% endfor %}
</table>

Answer 2

It is due to the fact you have your myFunction() definintion inside a <script> tag that is entered into the HTML every iteration of your for loop in django.

This means the function is constantly being redefined and therefore myfunction functionality will always be that of the last iteration.

If you define myFunction() outside of your django loop and pass in the model number to the function (as below) then it should work as expected`

function myFunction(model_number) {
    i++;
    document.getElementById(model_number).src = img_array[i];
    if (i == img_array.length - 1) {
        i = -1;

    }

}