Django - я добавил функцию onclick в html и всякий раз, когда я нажимаю на другую кнопку, она выводит одни и те же данные. как это исправить?

    <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 код ////////////////////////////

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

введите описание изображения здесь введите описание изображения здесь

Причина: все ваши меню имеют одинаковый id. Вы можете использовать id меню, чтобы дать каждому из них уникальный id, добавив {{ menu.id }} к атрибуту id в вашем 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>

Затем вы можете нацелить их по отдельности в вашем javascript следующим образом:

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

Я думаю, что идеальным вариантом было бы сделать представление, которое принимает параметр, с помощью которого вы можете идентифицировать ваш объект, примером может быть:

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)

В HTML:

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

Наконец, в вашем Js файле:

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);
    });
}
Вернуться на верх