Add fields to class

#1

Hi, I’m new at Javascript and I have a problem I can’t fix.
I want to add the selected field (comes out the array) and the ‘aantal’ in a div when click on button. I have done the validation but I can’t get the selected field and the field I fill in in the class where I want to put im in. Can somebody tell me what I’m doing wrong?
Thx

<!doctype html>
<html lang="nl">

<head>
    <script src="computers.js" defer></script>
    <title>Computers</title>
    <link rel="icon" href="javascript.ico" type="image/x-icon">
    <link rel="stylesheet" href="default.css">
</head>

<body>
    
    <label for="computer">Gekozen computer:
        <span id="computerFout" class="fout" name="computer">Kies een computer om toe te voegen.</span>
            <select id="computer" required>
                <option  value="">--- maak uw keuze ---</option>
              
            </select>


    </label>
    <label>Aantal computers: 
         <span id="aantalFout" class="fout">Geef een aantal in! (min 1)</span>
         <input id="aantal" required type="number" min="1">
    </label>
    <button id="toevoegen">Toevoegen</button>
    <div id="winkelmandje">
        <h2>Winkelmandje</h2>
        <div class="item" id="leeg">mijn mandje is leeg </div> 
        <div class="item" id="totaal"><div class='vak vaklinks' id="totTekst">Totaal</div><div id="totNum" class='vak vakrechts'>0</div>
    </div>
  
</body>

</html>

"use strict";

//array met alle computers
let aComputers= [
    ["macbook air", 1925.95, "stuk"],
    ["macbook pro", 2548.69, "stuk"],
    ["Asus", 1258.93, "stuk"],
    ["Dell", 1359.29, "stuk"],
];
let verkeerdeElementen;

window.addEventListener('DOMContentLoaded', (event) => {
    computersVullen();
});


//opties van select element met id computer invullen

function computersVullen() {
    let eComputers = document.getElementById("computer");
    let eDF = document.createDocumentFragment();

    for (let i = 0; i < aComputers.length; i++) {
        let eOption = document.createElement("option");

        //computer option samenstellen
        let sValue = document.createTextNode(aComputers[i][0] + " (" + aComputers[i][1] + " €" + aComputers[i][2] + ")");
        eOption.appendChild(sValue);
        eDF.appendChild(eOption);
    }

    eComputers.appendChild(eDF);
}

document.getElementById("toevoegen").onclick = function () {
    verkeerdeElementen=
    document.querySelectorAll("input:invalid,select:invalid"); 
    for (const element of verkeerdeElementen) {
    document.getElementById(`${element.id}Fout`).style.display = "inline"; 
    }
    
    const correcteElementen =
    document.querySelectorAll("input:valid,select:valid"); 
    for (const element of correcteElementen) {
    document.getElementById(`${element.id}Fout`).style.display = ""; 
    }

    if (verkeerdeElementen.length === 0) {
        computerToevoegen();
    }
    }

    function computerToevoegen() {
    let eTotaal = document.getElementById("totaal");
    let eLeeg = document.getElementById("leeg");
    let eRij = document.createElement("div");
    eRij.className = "item keuze";
    
    //rij met "mijn mandje is leeg" verbergen
    eLeeg.style.display = "none";

    //gekozen aantal in winkelmandje zetten en in winkelmandje zetten
    var eComputer = document.createElement("div");
    eComputer.className = "vak vaklinks computer";
    var sComputer = document.createTextNode(arrComputer[0]);
    eComputer.appendChild(sComputer);
    eRij.appendChild(eComputer);
    }
#2

Welcome, davy.

I am not sure what you are wanting. If you want the value in the number field to update the div id="totNum":

document.getElementById('totNum').innerHTML = document.getElementById('aantal').value

If you want totaal to be the amount of money due:

document.getElementById('totNum').innerHTML = vatVal(document.getElementById('aantal').value);
    }

function vatVal(aantal) {
  let alles = 0;
  switch (document.getElementById('computer').value) {
    case "macbook pro (2548.69 €stuk)":
        alles = arrComputers[1][1] * aantal;
        break;
  }
  return alles;
}

Place this after eRij.appendChild(eComputer);

Note: I have not written all of the switch...case statement. You can see where I was going, but you need to finish it. There is a much neater way to do this, but this method is the quickest, if you do not want to change most of your previous code.

I hope this helps

#3