Django - i have add onclick function into html and whenever i click into different button then it will render the same data. how to fix that?

Admin 1
Viewed 547
    <div class="home-food-row">
    {% if allmenu %} {% for menu in allmenu %}
    <div class="home-food-menu-col">
    <div class="filterDiv breakfast">
    <div class="img-price-tag">
    <div class="price-tag" id="price">{{menu.price}} only</div>
    <img class="home-page-food-img" src="{{menu.food_img.url}}" alt="Food" width="100%"/>
    </div>
    <h1 id="foodName_1">{{menu.food_name}}</h1>
    <p>{{menu.food_description}}</p>
    <button id="order" onclick="myFunction()">Place Order</button>
    </div>
    </div>
    {% endfor %} {% else %}
    <div class="col-md-12">
    <p>No Food</p>
    </div>
    {% endif %}
    </div>

/////////////////////////// JS Code ////////////////////////////

    function myFunction() {
    var price = document.getElementById("price");
    var food = document.getElementById("foodName_1");
    console.log(food);
    console.log(price);
   }

enter image description here enter image description here

django-templates django html javascript
2 Answers

Reason: all your menus have the same id. You can use the id of the menu to give each one a unique id, by appending {{ menu.id }} to the id attribute in your html.

    <div class="home-food-row">
    <strike> {% if allmenu %} {% for menu in allmenu %} <strike>
    <div class="home-food-menu-col">
    <div class="filterDiv breakfast">
    <div class="img-price-tag">
    <div class="price-tag" id="price{{ menu.id }}">{{menu.price}} only</div>
    <img class="home-page-food-img" src="{{menu.food_img.url}}" alt="Food" width="100%"/>
    </div>
    <h1 id="foodName_1{{ menu.id }}">{{menu.food_name}}</h1>
    <p>{{menu.food_description}}</p>
    <button id="order" onclick="myFunction('{{ menu.id }}')">Place Order</button>
    </div>
    </div>
    <strike>{% endfor %} {% else %}<strike>
    <div class="col-md-12">
    <p>No Food</p>
    </div>
    <strike>  {% endif %}<strike>
    </div>

Then you can target these individually in your javascript like this:

    function myFunction(id) {
    var price = document.getElementById("price" + id);
    var food = document.getElementById("foodName_1" + id);
    console.log(food);
    console.log(price);
   }
user_109510700

I think that the ideal would be to make a view which accepts a parameter with which you can identify your object, an example would be:

def vote_site_view(request, slug_name):
    with transaction.atomic():
        site = Site.objects.select_for_update(skip_locked=True).filter(
            slug_name=slug_name, deleted=False
        )
        site.update(votes=F("votes") + 1)
    return JsonResponse({"message": "ok"}, status=200)

In HTML:

<button class="vote-btn like" onclick="voteSite('{{ site.slug_name }}')">
  <i class="icon ico-like"></i>
</button>

Finally in your Js file:

function voteSite(slug_name) {
  let url = `${window.location.origin}/vote/${slug_name}/`;
  fetch(url, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
  })
    .then((response) => {
      alert(response.data.message);
    });
}
user_134360540
Related