Oppgave 6

Lag et skjema som lar deg fylle ut en handleliste. Listen skal bestå av varenavnet og antall varer. Når du trykker på en knapp skal varen legges til i en ul-liste i nettsiden. Under listen skal det vises totalt antall varer.

Resultat

Hvis du prøver å legge til noe som allerde er i listen, så vil bare antallet gå opp, så man ikke får flere av samme ting nedover.

Antall varer: 0

Koden

JavaScript

                
window.onload = ready;

function ready() {
    document.getElementById("o6-add").onclick = addToList;
}

function addToList() {
    var item = document.getElementById("o6-item").value;
    var itemSlug = item.replace(/\s+/g, '-').toLowerCase(); // Fjern mellomrom og gjør til små bokstaver
    var itemCountAdd = parseInt(document.getElementById("o6-amount").value);
    var itemCountCurrent = 0;

    // Hvis varen finnes fra før, legg til antall i eksisterende
    if (document.getElementById(itemSlug)) {
        itemCountCurrent = parseInt(document.getElementById(itemSlug + "-count").innerHTML);
        document.getElementById(itemSlug + "-count").innerHTML = itemCountCurrent + itemCountAdd;
    } else { // Hvis ikke, lag ny
        document.getElementById("o6-list").innerHTML += "
  • " + item
        + " x " + document.getElementById("o6-amount").value
        + "
    • ";
    }

    // Total count
    document.getElementById("o6-count").innerHTML = parseInt(document.getElementById("o6-count").innerHTML) + itemCountAdd;
}

    HTML

                    
<div class="row input-field">
    <input id="o6-item" type="text" placeholder="Varenavn" class="col s7">
    <input id="o6-amount" type="number" min="1" placeholder="Antall" class="col s3">
    <button id="o6-add" class="col s2 btn black">+</button>
</div>
<ul id="o6-list"></ul>
<p>Antall varer: <b id="o6-count">0</b></p>