www.webdeveloper.com
Results 1 to 1 of 1

Thread: [RESOLVED] Change value in array javascript

  1. #1
    Join Date
    Jan 2018
    Posts
    11

    resolved [RESOLVED] Change value in array javascript

    I have another problem, when I change my number of people in an array, I get a new line. When I enter 3 I want a 3 to come to my number of people and that the rest will remain. But I do not know how. Can you help me?


    function Bestel() {
    AantalPersonen = Aantal.value.replace(/\s/g, '');
    AantalPersonen = parseInt(AantalPersonen);

    if (!isNaN(AantalPersonen) && (AantalPersonen >= 0))
    if (AantalPersonen === 0) {
    for (var i = 0; i < InBestelling.length; i++) {
    if (Menus.value === InBestelling[i].Naam) {
    InBestelling.splice(i, 1);
    AantalPers.splice(i, 1);
    SoortGang.splice(i, 1);
    UpdateBestelling();
    }

    }

    }
    else if (AantalPersonen ) { // What can I do here to change the line "AantalPersonen"
    for (var i = 0; i < InBestelling.length; i++) {
    if (Menus.value === InBestelling[i].Naam) {
    InBestelling.push(Gerechten[GekozenGang][Menus.selectedIndex]);
    AantalPers.push(AantalPersonen);
    SoortGang.push(Gangen[Gangen.selectedIndex].text);
    InBestelling.splice(i, 1);
    AantalPers.splice(i, 1);
    SoortGang.splice(i, 1);
    InBestelling.push(Gerechten[GekozenGang][Menus.selectedIndex]);
    AantalPers.push(AantalPersonen);
    SoortGang.push(Gangen[Gangen.selectedIndex].text);
    UpdateBestelling();


    }

    }

    }

    else {
    InBestelling.push(Gerechten[GekozenGang][Menus.selectedIndex]);
    AantalPers.push(AantalPersonen);
    SoortGang.push(Gangen[Gangen.selectedIndex].text);
    UpdateBestelling();
    }

    else {
    alert("Gelieve enkel cijfers in te voeren.");
    }

    }

  2. #2
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    5,769
    Not sure what you are trying to do here...

    some examples of the data sources would help, lie the HTML input fields and any information like error messages and the out put from your script as it stands and what you are expecting as the output is also beneficial as theirs something lost in translation here.

    If all you want is the top 3 results of an array, then you need to tell splice function that you are removing 3 and not 1 item but remeber that JavaScript Arrays all start at zero like most programming languages are with a few exceptions to that rule, so if you rely on item 3 being item 3 and not array[2] then you need to fill the first element of your array with a null value (as a control value)

    Question:
    Code:
    InBestelling.splice(i, 1);
    AantalPers.splice(i, 1);
    SoortGang.splice(i, 1);
    if you are looking to remove all but 3 elements and they are not consecutive items, then you may as well create an array and use an object to store the selected information and use that instead of a convoluted item removal array.

    Code:
    //somewhere to store results
    var results = [];
    
    // put an object containing the information in to an array for storage
    results.push( { 'InBestelling':InBestelling.splice(i, 1), 'AantalPers':AantalPers.splice(i, 1), 'SoortGang':SoortGang.splice(i, 1) } );
    Also...

    Another question. How much data are we talking about that the routine is sifting through?
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  3. #3
    Join Date
    Jan 2018
    Posts
    11
    I will give the full code.
    onload = Initieer;
    var Gerechten;
    var Menus;
    var Naam;
    var Prijs;
    var Beschrijving;
    var Foto;
    var Gangen;
    var Aantal;
    var knop;
    var Main;
    var InBestelling = [];
    var AantalPers = [];
    var SoortGang = [];
    var GekozenGang;
    var GeselecteerdeMenu;
    var AantalPersonen;
    var Afrekenen = 0;


    Gerechten = {
    "Voorgerechten": [
    {
    "Naam": "Sprinkhaan",
    "Beschrijving": "Krokante sprinkhaan op een bedje van kakkerlak",
    "Prijs": 5.99,
    "Foto": "Foto1.jpg"
    },
    {
    "Naam": "Tandoori Burger",
    "Beschrijving": "Burger op basis van Tandoori, een snelle hap als hongerstillertje",
    "Prijs": 4.99,
    "Foto": "Foto3.jpg"
    },
    {
    "Naam": "Cupcake",
    "Beschrijving": "Eetbare Cupcake, met wormpjes",
    "Prijs": 2.99,
    "Foto": "Foto9.jpg"
    }
    ],
    "Hoofdgerechten": [
    {
    "Naam": "Sushi",
    "Beschrijving": "Speciale sushi met een summum aan krakertjes",
    "Prijs": 7.99,
    "Foto": "Foto8.jpg"
    },
    {
    "Naam": "Insect Burger",
    "Beschrijving": "Een burger met lekkers en Pont-Neuf frietjes",
    "Prijs": 4.99,
    "Foto": "Foto5.jpg"
    },
    {
    "Naam": "Salade",
    "Beschrijving": "Salade op basis van zelfgevonden items",
    "Prijs": 1.99,
    "Foto": "Foto10.jpg"
    }
    ],
    "Desserts":
    [
    {
    "Naam": "Lolly",
    "Beschrijving": "Een lolly met inhoud een vleugje nostalgie",
    "Prijs": 2.99,
    "Foto": "Foto6.jpg"
    },
    {
    "Naam": "IJsje",
    "Beschrijving": "Lekker ijs met licht glimmende worms on the side",
    "Prijs": 2.99,
    "Foto": "Foto7.jpg"
    }
    ]
    };


    function Initieer() {
    Naam = document.getElementById('naamGerecht');
    Prijs = document.getElementById('prijsGerecht');
    Beschrijving = document.getElementById('beschrijvingGerecht');
    Foto = document.getElementById('afbGerechje');
    Gangen = document.getElementById('hoofd');
    Menus = document.getElementById('sub');
    Aantal = document.getElementById('aantal');
    knop = document.getElementById('knop');
    Main = document.getElementById('main');

    Gangen.addEventListener('change', Wijzigen, false);
    Menus.addEventListener('change', Updaten, false);
    knop.addEventListener('click', Bestel, false);
    VulGegevensIn();
    }

    function VulGegevensIn() {
    for (gang in Gerechten) {
    Gangen.options[Gangen.options.length] = new Option(gang, gang);
    }
    Wijzigen();
    }


    function Wijzigen() {
    GekozenGang = Gangen[Gangen.selectedIndex].text;
    if (Array.isArray(Gerechten[GekozenGang])) {
    MaakLijstLeeg();
    for (var teller = 0; teller < Gerechten[GekozenGang].length; teller++) {
    var optie = document.createElement('option');
    optie.value = Gerechten[GekozenGang][teller].Naam;
    optie.innerHTML = Gerechten[GekozenGang][teller].Naam;
    Menus.appendChild(optie);
    }
    Menus.selectedIndex = [0];
    }
    Updaten();
    }

    function MaakLijstLeeg() {
    for (var i = 0; i < Gangen.options.length; i++) {
    Menus.options.remove(i);
    }
    }

    function Updaten() {

    for (var gang in Gerechten) {
    if (gang === GekozenGang) {
    gang = document.getElementById('fotoTekst');
    gang.innerHTML = GekozenGang;
    }
    }

    Naam.innerHTML = (Gerechten[GekozenGang][Menus.selectedIndex].Naam);
    Prijs.innerHTML = (Gerechten[GekozenGang][Menus.selectedIndex].Prijs + " Euro");
    Beschrijving.innerHTML = (Gerechten[GekozenGang][Menus.selectedIndex].Beschrijving);
    Foto.src = ("Afbeeldingen/" + (Gerechten[GekozenGang][Menus.selectedIndex].Foto));

    }


    function Bestel() {
    AantalPersonen = Aantal.value.replace(/\s/g, '');
    AantalPersonen = parseInt(AantalPersonen);

    if (!isNaN(AantalPersonen) && (AantalPersonen >= 0))
    if (AantalPersonen === 0) {
    for (var i = 0; i < InBestelling.length; i++) {
    if (Menus.value === InBestelling[i].Naam) {
    InBestelling.splice(i, 1);
    AantalPers.splice(i, 1);
    SoortGang.splice(i, 1);
    UpdateBestelling();
    }

    }

    }
    else if (AantalPersonen ) { // What can I do here to change the line "AantalPersonen"
    for (var i = 0; i < InBestelling.length; i++) {
    if (Menus.value === InBestelling[i].Naam) {
    InBestelling.push(Gerechten[GekozenGang][Menus.selectedIndex]);
    AantalPers.push(AantalPersonen);
    SoortGang.push(Gangen[Gangen.selectedIndex].text);
    InBestelling.splice(i, 1);
    AantalPers.splice(i, 1);
    SoortGang.splice(i, 1);
    InBestelling.push(Gerechten[GekozenGang][Menus.selectedIndex]);
    AantalPers.push(AantalPersonen);
    SoortGang.push(Gangen[Gangen.selectedIndex].text);
    UpdateBestelling();


    }

    }

    }

    else {
    InBestelling.push(Gerechten[GekozenGang][Menus.selectedIndex]);
    AantalPers.push(AantalPersonen);
    SoortGang.push(Gangen[Gangen.selectedIndex].text);
    UpdateBestelling();
    }

    else {
    alert("Gelieve enkel cijfers in te voeren.");
    }

    }


    function UpdateBestelling() {
    var Bestelling = document.getElementById('Bestelling');
    if (Bestelling != null) {

    Bestelling.parentElement.removeChild(Bestelling);

    }


    var NieuweBestelling = document.createElement('div');
    NieuweBestelling.id = 'Bestelling';
    NieuweBestelling.classList = 'Keuzes';
    NieuweBestelling.innerHTML = "<h1>Uw bestelling</h1>";
    Main.appendChild(NieuweBestelling);

    for (var i = 0; i < InBestelling.length; i++) {
    var Overzicht = document.createElement('p');
    Overzicht.id = i;
    Overzicht.classList = 'UwBestelling';
    Overzicht.innerHTML = (SoortGang[i]) + " <br/>" + InBestelling[i].Naam + " prijs : " +
    InBestelling[i].Prijs + " aantal besteld: " + AantalPers[i];
    document.getElementById('Bestelling').appendChild(Overzicht);


    }
    BerekenenTotaal();

    var Totaal = document.createElement('div');
    Totaal.id = "TotaalPrijs";
    Totaal.classList = "Totaal";
    Totaal.innerHTML = "Totaalprijs : " + Afrekenen;
    document.getElementById('Bestelling').appendChild(Totaal);

    Aantal.value = "";
    Aantal.focus();

    }


    function BerekenenTotaal() {
    Afrekenen = 0;
    for (var i = 0; i < InBestelling.length; i++) {
    Afrekenen += InBestelling[i].Prijs * AantalPers[i];
    Afrekenen = Math.round(Afrekenen * 100) / 100;

    }
    return Afrekenen;
    }

  4. #4
    Join Date
    Jan 2018
    Posts
    11
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Resto Krokant</title>
    <meta charset="utf-8" />
    <style type="text/css" rel="stylesheet">
    body {
    background-color: lightgreen;
    }

    .detailfig {
    height: 180px;
    border: solid 2px;
    }

    h1 {
    text-align: center;
    color: green
    }

    .prijs {
    font-style: italic;
    font-weight: bold;
    font-family: sans-serif;
    color: red;
    }

    .naam {
    font-weight: bold;
    color: orange;
    font-family: sans-serif;
    }

    .bestel {
    border: solid 1px #638a00;
    border-radius: 3px;


    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4);
    font-size: 20px;
    color: #ffffff;
    padding: 1px 17px;
    background: #96c300;
    }

    .details {

    border: solid 5px green;
    background-color: #f1f1c1;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    width: 700px;
    height: 250px;

    }

    .Keuzes {
    border: solid 5px green;
    background-color: #f1f1c1;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    width: 700px;
    height: 250px;
    text-align: center;

    }

    .DetailTabel {
    width: 100%;
    height: 80%;

    }

    .hoofd {
    width: 200px;
    }
    .UwBestelling {
    margin: 1% 1% 1% 1%;
    padding-left: 2%;
    width: 94%;
    background-color: #f1f1c1;
    border: dashed green 3px;
    }
    .Totaal {
    border: solid red 3px;
    }
    </style>
    </head>

    <body>
    <h1> Resto 'Het Krokantje'</h1>
    <main id="main">
    <div id="divDetails" class="details">
    <table class="DetailTabel">
    <tr>
    <td width="50%">
    <img id="afbGerechje" class="detailfig" src="Afbeeldingen/Eetbare_Insecten.jpg" />
    <br/>
    <span class="naam" id="fotoTekst">Eetmogelijkheden</span>
    </td>
    <td>
    <b>
    <u> Naam :</u>
    </b>
    <p class="naam" id="naamGerecht">Intro</p>
    <b>
    <u>Prijs :</u>
    </b>
    <p class="prijs" id="prijsGerecht">0.00</p>
    <b>
    <u> Beschrijving : </u>
    </b>
    <p class="tekst" id="beschrijvingGerecht">Welkom</p>
    </td>
    </tr>
    </table>
    </div>

    <div class="Keuzes">
    <b>Gang : </b>
    <br/>
    <select class="hoofd" id="hoofd"></select>
    <p></p>
    <b>Keuze :</b>
    <br/>
    <select class="hoofd" id="sub" size="5"></select>
    <p></p>
    <b>Aantal personen : </b>
    <input type="text" class="aantal" size="3" id="aantal" value=0>
    <p></p>
    <input type="button" class="bestel" id="knop" value="Bestel">
    </div>
    <!-- Link naar de script-file -->
    <!-- <script type="text/javascript" src="JavaScript_Krokant/JS_Krokantje.js"></script> -->

    </main>
    <script type="text/javascript" src="JavaScript_Krokant/Krokantje.js"></script>
    </body>

    </html>
    When i take my order and i press the first time 3 persons for ex. "sprinkhanen", but i want to change the 3 persons in 2 persons. How can I change that value. Now i get 2 rows of "sprinkhanen" and i want to have 1 row that change the 3 persons in 2 persons.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center

"

"

X vBulletin 4.2.2 Debug Information

  • Page Generation 0.34333 seconds
  • Memory Usage 2,916KB
  • Queries Executed 15 (?)
More Information
Template Usage (34):
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (2)bbcode_code
  • (3)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (4)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (4)postbit
  • (4)postbit_onlinestatus
  • (4)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (73):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_postinfo_query
  • fetch_postinfo
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates