<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>/////////////////////////// Código JS ////////////////////// ///////
function myFunction() { var price = document.getElementById("price"); var food = document.getElementById("foodName_1"); console.log(food); console.log(price); }ingrese la descripción de la imagen aquí ingrese la descripción de la imagen aquí
Motivo: todos sus menús tienen la misma identificación. Puede usar la identificación del menú para darle a cada uno una identificación única, agregando {{ menu.id }} al atributo de identificación en su 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>Luego, puede orientarlos individualmente en su javascript de esta manera:
function myFunction(id) { var price = document.getElementById("price" + id); var food = document.getElementById("foodName_1" + id); console.log(food); console.log(price); }