cari

Rumah  >  Soal Jawab  >  teks badan

Bagaimanakah saya boleh membuat fungsi yang menambah nilai yang diberikan kepada butang?

Pengekod baharu di sini. Saya sedang mencipta aplikasi menu piza yang menambah nilai yang diberikan pada butang atas dan memaparkannya dalam "Jumlah" di bahagian bawah senarai. Tetapi saya menghadapi masalah mendapatkan kod untuk menunjukkan kos semasa menambah bahan.

Ini yang saya telah cuba:

let whiteWheat = document.getElementById("white-wheat");
let multiGrain = document.getElementById("multi-grain");
let caulifl = document.getElementById("cauliflower");
let thinCrust = document.getElementById("thin-crust");
let deepDish = document.getElementById("deep-dish");
let totalField = document.getElementById("total");
totalField = 0;

whiteWheat.addEventListener(click, function() {
  var totalCost = totalField + 10;
  var finalOrder = document.createElement("li");
  finalOrder.innerText = totalCost.value;
  totalField.appendChild(finalOrder);
});
<h1>PIZZA SUPREME</h1>
<h2>Select a crust and toppings to build your own pizza!</h2>
<h3>Crust</h3>
<h4> per crust.</h4>
<ul><button id="white-wheat">white wheat</button></ul>
<ul><button id="multi-grain">multigrain</button></ul>
<ul><button id="cauliflower">Cauliflower</button></ul>
<ul><button id="thin-crust">Thin Crust</button></ul>
<ul><button id="deep-dish">Deep Dish</button></ul>

<h2>Total:</h2>
<div id="total">
</div>

P粉231112437P粉231112437231 hari yang lalu521

membalas semua(2)saya akan balas

  • P粉409742142

    P粉4097421422024-04-03 18:37:03

    PIZZA SUPREME

    Select a crust and toppings to build your own pizza!

    Crust

    per crust.

    Total:

    0
    sssccc

    balas
    0
  • P粉649990163

    P粉6499901632024-04-03 16:49:54

    Pendekatan yang lebih baik mungkin ialah mencipta nilai atribut x-price 属性并将它们放入

    中。这样,您就可以使用单个事件侦听器和事件传播来添加 x-price pada butang. Seperti ini:

    let totalPrice = 0;
    const totalDiv = document.getElementById('total');
    const itemsDiv = document.getElementById('items');
    
    document.getElementById('buttons').addEventListener('click', e => {
      totalPrice += parseFloat(e.target.getAttribute('x-price'));
      totalDiv.textContent = totalPrice;
      
      const li = document.createElement('li');
      li.textContent = e.target.textContent;
      itemsDiv.appendChild(li);
    });

    PIZZA SUPREME

    Select a crust and toppings to build your own pizza!

    Crust

    Total:

    balas
    0
  • Batalbalas