Home > Blockchain >  Execute if-else statement in regards to multiple Javascript functions
Execute if-else statement in regards to multiple Javascript functions

Time：08-07

Update: The script is now fully working, I hope someone will get to my issue and perhaps a solution better now :) I don’t know what I am doing wrong but I inserted a script and it isn’t working, while it is on my website. Please tell me what to adjust so I can give you a proper live demo of what’s going on. In the meanwhile I will explain my issue anyway:

I know this is a super long code which could probably be a lot shorter but my knowledge of Javascript is very limited and I was kinda amazed I got this far.

Everything is working how I want it to: When you select a size in the option dropdown, a belonging DIV becomes visible with Display: Flex and the DIV with ID #item-cart-none hides. When you select another option in the same option dropdown, the DIV that became visible hides and the newly selected option shows another DIV. Meanwhile the DIV with ID #item-cart-none stays hidden.

When you select option “Geen” in the same dropdown the DIV with ID #item-cart-none becomes visible again.

Now here lays my issue: when you have selected a size in both dropdowns and select option “Geen” in 1 of the dropdowns, the DIV with ID #item-cart-none becomes visible again. This should not be the case. This div should Only becomes visible again when in both of the dropdowns nothing is selected or option “Geen” is selected in both of them.

How can I adjust my code so that this if-else statement, which currently exists in both of the functions (for both dropdowns) gets executed in regards to both dropdowns? I have fiddled with the code already myself but its mainly guessing for me what should work or not.

I hope someone can give me clarity on this issue I’m having. Thank you.

Edit: Forgot to add, sorry… When you have selected a size in one of the dropdowns AND in the other dropdown, both belonging DIVS become visible. That is the whole purpose of this code. That when you add multiple prints to the “shopping cart” they become visible in the cart, and when none are selected you see the message of “Geen” (< Dutch, means “None” in English).

function print1SelectCheck(nameSelect)
{
    if(nameSelect){
        print1Option1Value = document.getElementById("13x19namiddag").value;
        print1Option2Value = document.getElementById("20x30namiddag").value;
        print1Option3Value = document.getElementById("30x45namiddag").value;
        if(print1Option1Value == nameSelect.value){
            document.getElementById("13x19namiddagdiv").style.display = "flex";
        }
        else{
            document.getElementById("13x19namiddagdiv").style.display = "none";
        }
        if(print1Option2Value == nameSelect.value){
            document.getElementById("20x30namiddagdiv").style.display = "flex";
        }
        else{
            document.getElementById("20x30namiddagdiv").style.display = "none";
        }
        if(print1Option3Value == nameSelect.value){
            document.getElementById("30x45namiddagdiv").style.display = "flex";
        }
        else{
            document.getElementById("30x45namiddagdiv").style.display = "none";
        }
        if(print1Option1Value == nameSelect.value || print1Option2Value == nameSelect.value || print1Option3Value == nameSelect.value){
            document.getElementById("Item-cart-none").style.display = "none";
        }
        else{
            document.getElementById("Item-cart-none").style.display = "flex";
        }
    }
    else{
        document.getElementById("13x19namiddagdiv").style.display = "none";
        document.getElementById("20x30namiddagdiv").style.display = "none";
        document.getElementById("30x45namiddagdiv").style.display = "none";
        document.getElementById("Item-cart-none").style.display = "flex";
    }
}

function print2SelectCheck(nameSelect)
{
    if(nameSelect){
        print2Option1Value = document.getElementById("13x19onderweg").value;
        print2Option2Value = document.getElementById("20x30onderweg").value;
        print2Option3Value = document.getElementById("30x45onderweg").value;
        if(print1Option1Value == nameSelect.value){
            document.getElementById("13x19onderwegdiv").style.display = "flex";
        }
        else{
            document.getElementById("13x19onderwegdiv").style.display = "none";
        }
        if(print2Option2Value == nameSelect.value){
            document.getElementById("20x30onderwegdiv").style.display = "flex";
        }
        else{
            document.getElementById("20x30onderwegdiv").style.display = "none";
        }
        if(print2Option3Value == nameSelect.value){
            document.getElementById("30x45onderwegdiv").style.display = "flex";
        }
        else{
            document.getElementById("30x45onderwegdiv").style.display = "none";
        }
        if(print2Option1Value == nameSelect.value || print2Option2Value == nameSelect.value || print2Option3Value == nameSelect.value){
            document.getElementById("Item-cart-none").style.display = "none";
        }
        else{
            document.getElementById("Item-cart-none").style.display = "flex";
        }
    }
    else{
        document.getElementById("13x19onderwegdiv").style.display = "none";
        document.getElementById("20x30onderwegdiv").style.display = "none";
        document.getElementById("30x45onderwegdiv").style.display = "none";
        document.getElementById("Item-cart-none").style.display = "flex";
    }
}
.item-cart {
  display: none;
  min-width: 100%;
  margin-bottom: 0.5rem;
  padding-top: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
  padding-left: 1rem;
  align-items: center;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  background-color: hsla(0, 0.00%, 3.92%, 1.00);
  color: #e6e6e6;
}

.item-cart-image {
  height: 50px;
}

.small-text {
  position: relative;
  z-index: 10;
  font-weight: 400;
  font-size: 1rem;
}

.item-cart-none {
  display: flex;
  margin-bottom: 0.5rem;
  padding-top: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
  padding-left: 1rem;
  align-items: center;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  background-color: hsla(0, 0.00%, 3.92%, 1.00);
  color: #e6e6e6;
}
<select id="Namiddag" name="Namiddag" data-name="Namiddag"  onchange="print1SelectCheck(this);">
<option value="Formaat">Selecteer formaat en bekijk prijzen</option>
<option id="13x19namiddag" value="13x19 cm / €12,50">13x19 cm / €12,50</option>
<option id="20x30namiddag" value="20x30 cm / €22,50">20x30 cm / €22,50</option>
<option id="30x45namiddag" value="30x45 cm / €32,50">30x45 cm / €32,50</option>
<option value="geen">geen</option>
</select>

<select id="Onderweg" name="Onderweg" data-name="Onderweg"  onchange="print2SelectCheck(this);">
<option value="Formaat">Selecteer formaat en bekijk prijzen</option>
<option id="13x19onderweg" value="13x19 cm / €12,50">13x19 cm / €12,50</option>
<option id="20x30onderweg" value="20x30 cm / €22,50">20x30 cm / €22,50</option>
<option id="30x45onderweg" value="30x45 cm / €32,50">30x45 cm / €32,50</option>
<option value="geen">geen</option>
</select>

<span id="Item-cart-none" >Geen</span>

<div id="13x19namiddagdiv" ><img  src="https://uploads-ssl.webflow.com/6296730d233387c2703a6964/62af4159b8d59a5cd322e5a8_film-photography-afternoon-silvan-soeters.jpg" alt="Afternoon"><span >Afternoon - 13x19 cm / €12,50</span></div>

<div id="20x30namiddagdiv" ><img  src="https://uploads-ssl.webflow.com/6296730d233387c2703a6964/62af4159b8d59a5cd322e5a8_film-photography-afternoon-silvan-soeters.jpg" alt="Afternoon"><span >Afternoon - 20x30 cm / €22,50</span></div>

<div id="30x45namiddagdiv" ><img  src="https://uploads-ssl.webflow.com/6296730d233387c2703a6964/62af4159b8d59a5cd322e5a8_film-photography-afternoon-silvan-soeters.jpg" alt="Afternoon"><span >Afternoon - 30x45 cm / €32,50</span></div>

<div id="13x19onderwegdiv" ><img  src="https://uploads-ssl.webflow.com/6296730d233387c2703a6964/62af4158450de16f13120983_film-photography-commute-silvan-soeters.jpg" alt="Commute"><span >Commute - 13x19 cm / €12,50</span></div>

<div id="20x30onderwegdiv" ><img  src="https://uploads-ssl.webflow.com/6296730d233387c2703a6964/62af4158450de16f13120983_film-photography-commute-silvan-soeters.jpg" alt="Commute"><span >Commute - 20x30 cm / €22,50</span></div>

<div id="30x45onderwegdiv" ><img  src="https://uploads-ssl.webflow.com/6296730d233387c2703a6964/62af4158450de16f13120983_film-photography-commute-silvan-soeters.jpg" alt="Commute"><span >Commute - 30x45 cm / €32,50</span></div>

CodePudding user response：

In your JavaScript code you have written: Item-cart-none with an uppercase I, but in your HTML you have this in lowercase item-cart-none.

Javascript:

document.getElementById("Item-cart-none").style.display = "none";

HTML:

<span id="item-cart-none" >Geen</span>

They should be the same. The console error which I saw in developer tools disappeared after making that change.

If you are not sure how to see these sorts of errors then you can read about developer tools at, for example: https://developer.chrome.com/docs/devtools/open/

Your logic for testing geen and Formaat is complicated. I refactored your code and created a function called checkIfGeenShouldShow() and moved all the logic there. Please see how to access the selected value from select element.

function checkIfGeenShouldShow() {
  const selectBox1 = document.getElementById("Namiddag");
  const selectBox2 = document.getElementById("Onderweg");
  let selectedValue1 = selectBox1.options[selectBox1.selectedIndex].value;
  let selectedValue2 = selectBox2.options[selectBox2.selectedIndex].value;

  console.log("Selected Values: ", selectedValue1, " and ", selectedValue2);

  if (
    ((selectedValue1 === 'geen') || (selectedValue1 === 'Formaat')) &&
    ((selectedValue2 === 'geen') || (selectedValue2 === 'Formaat'))
  ) {
    document.getElementById("item-cart-none").style.display = "flex";
  } else {
    document.getElementById("item-cart-none").style.display = "none";
  }
}

Please go to the snippet code below for a working version.

And there is one more problem with your code, you are referring to print1Option1Value, print1Option2Value, and print1Option3Value in your print2SelectCheck() function, for example:

if(print1Option1Value == nameSelect.value){

This should be: print2Option1Value, print2Option2Value, and print2Option3Value

function print1SelectCheck(nameSelect) {
  if (nameSelect) {
    print1Option1Value = document.getElementById("13x19namiddag").value;
    print1Option2Value = document.getElementById("20x30namiddag").value;
    print1Option3Value = document.getElementById("30x45namiddag").value;
    if (print1Option1Value === nameSelect.value) {
      document.getElementById("13x19namiddagdiv").style.display = "flex";
    } else {
      document.getElementById("13x19namiddagdiv").style.display = "none";
    }
    if (print1Option2Value === nameSelect.value) {
      document.getElementById("20x30namiddagdiv").style.display = "flex";
    } else {
      document.getElementById("20x30namiddagdiv").style.display = "none";
    }
    if (print1Option3Value === nameSelect.value) {
      document.getElementById("30x45namiddagdiv").style.display = "flex";
    } else {
      document.getElementById("30x45namiddagdiv").style.display = "none";
    }
  } else {
    document.getElementById("13x19namiddagdiv").style.display = "none";
    document.getElementById("20x30namiddagdiv").style.display = "none";
    document.getElementById("30x45namiddagdiv").style.display = "none";
  }
  checkIfGeenShouldShow();
}

function print2SelectCheck(nameSelect) {
  if (nameSelect) {
    print2Option1Value = document.getElementById("13x19onderweg").value;
    print2Option2Value = document.getElementById("20x30onderweg").value;
    print2Option3Value = document.getElementById("30x45onderweg").value;
    if (print2Option1Value === nameSelect.value) {
      document.getElementById("13x19onderwegdiv").style.display = "flex";
    } else {
      document.getElementById("13x19onderwegdiv").style.display = "none";
    }
    if (print2Option2Value === nameSelect.value) {
      document.getElementById("20x30onderwegdiv").style.display = "flex";
    } else {
      document.getElementById("20x30onderwegdiv").style.display = "none";
    }
    if (print2Option3Value === nameSelect.value) {
      document.getElementById("30x45onderwegdiv").style.display = "flex";
    } else {
      document.getElementById("30x45onderwegdiv").style.display = "none";
    }
  } else {
    document.getElementById("13x19onderwegdiv").style.display = "none";
    document.getElementById("20x30onderwegdiv").style.display = "none";
    document.getElementById("30x45onderwegdiv").style.display = "none";
  }
  checkIfGeenShouldShow();
}

function checkIfGeenShouldShow() {
  const selectBox1 = document.getElementById("Namiddag");
  const selectBox2 = document.getElementById("Onderweg");
  let selectedValue1 = selectBox1.options[selectBox1.selectedIndex].value;
  let selectedValue2 = selectBox2.options[selectBox2.selectedIndex].value;

  console.log("Selected Values: ", selectedValue1, " and ", selectedValue2);

  if (
    ((selectedValue1 === 'geen') || (selectedValue1 === 'Formaat')) &&
    ((selectedValue2 === 'geen') || (selectedValue2 === 'Formaat'))
  ) {
    document.getElementById("item-cart-none").style.display = "flex";
  } else {
    document.getElementById("item-cart-none").style.display = "none";
  }
}
.item-cart {
  display: none;
  min-width: 100%;
  margin-bottom: 0.5rem;
  padding-top: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
  padding-left: 1rem;
  align-items: center;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  background-color: hsla(0, 0.00%, 3.92%, 1.00);
  color: #e6e6e6;
}

.item-cart-image {
  height: 50px;
}

.small-text {
  position: relative;
  z-index: 10;
  font-weight: 400;
  font-size: 1rem;
}

.item-cart-none {
  display: flex;
  margin-bottom: 0.5rem;
  padding-top: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
  padding-left: 1rem;
  align-items: center;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  background-color: hsla(0, 0.00%, 3.92%, 1.00);
  color: #e6e6e6;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <select id="Namiddag" name="Namiddag" data-name="Namiddag"  onchange="print1SelectCheck(this);">
    <option value="Formaat">Selecteer formaat en bekijk prijzen</option>
    <option id="13x19namiddag" value="13x19 cm / €12,50">13x19 cm / €12,50</option>
    <option id="20x30namiddag" value="20x30 cm / €22,50">20x30 cm / €22,50</option>
    <option id="30x45namiddag" value="30x45 cm / €32,50">30x45 cm / €32,50</option>
    <option value="geen">geen</option>
  </select>

  <select id="Onderweg" name="Onderweg" data-name="Onderweg"  onchange="print2SelectCheck(this);">
    <option value="Formaat">Selecteer formaat en bekijk prijzen</option>
    <option id="13x19onderweg" value="13x19 cm / €12,50">13x19 cm / €12,50</option>
    <option id="20x30onderweg" value="20x30 cm / €22,50">20x30 cm / €22,50</option>
    <option id="30x45onderweg" value="30x45 cm / €32,50">30x45 cm / €32,50</option>
    <option value="geen">geen</option>
  </select>

  <span id="item-cart-none" >Geen</span>
  <div id="13x19namiddagdiv" ><img  src="https://uploads-ssl.webflow.com/6296730d233387c2703a6964/62af4159b8d59a5cd322e5a8_film-photography-afternoon-silvan-soeters.jpg" alt="Afternoon"><span >Afternoon - 13x19 cm / €12,50</span></div>
  <div id="20x30namiddagdiv" ><img  src="https://uploads-ssl.webflow.com/6296730d233387c2703a6964/62af4159b8d59a5cd322e5a8_film-photography-afternoon-silvan-soeters.jpg" alt="Afternoon"><span >Afternoon - 20x30 cm / €22,50</span></div>
  <div id="30x45namiddagdiv" ><img  src="https://uploads-ssl.webflow.com/6296730d233387c2703a6964/62af4159b8d59a5cd322e5a8_film-photography-afternoon-silvan-soeters.jpg" alt="Afternoon"><span >Afternoon - 30x45 cm / €32,50</span></div>
  <div id="13x19onderwegdiv" ><img  src="https://uploads-ssl.webflow.com/6296730d233387c2703a6964/62af4158450de16f13120983_film-photography-commute-silvan-soeters.jpg" alt="Commute"><span >Commute - 13x19 cm / €12,50</span></div>
  <div id="20x30onderwegdiv" ><img  src="https://uploads-ssl.webflow.com/6296730d233387c2703a6964/62af4158450de16f13120983_film-photography-commute-silvan-soeters.jpg" alt="Commute"><span >Commute - 20x30 cm / €22,50</span></div>
  <div id="30x45onderwegdiv" ><img  src="https://uploads-ssl.webflow.com/6296730d233387c2703a6964/62af4158450de16f13120983_film-photography-commute-silvan-soeters.jpg" alt="Commute"><span >Commute - 30x45 cm / €32,50</span></div>

  <script src="app.js" async defer></script>
</body>

</html>

CodePudding user response：

There is just way too much code in your snippet. Here is one possible way of doing the same job in a non-redundant way:

const cartItems=[...document.querySelectorAll(".item-cart")], // array with all cart items
 sels=[...document.querySelectorAll(".w-select")],  // array with select elements
 geen=document.getElementById("item-cart-none");    // the "geen" span
sels.forEach(sel=>sel.addEventListener("change",selChange));

function selChange(ev){
  cartItems.forEach(el=>el.classList.add("hidden")); // make all cart items invisible
  const selItms=sels.reduce((a,sel)=>{ let itm;      // find selected items ..
    const id=sel.options[sel.selectedIndex].id       // get the id-attr. from the selected option
    if (id && (itm=document.getElementById(id "div"))) 
       a.push(itm);                                  // push cart item into results array `a`
    return a;
  },[]);
  selItms.forEach(itm=>itm.classList.remove("hidden"));
  geen.classList.toggle("hidden",selItms.length>0);
}
selChange()
.item-cart {
  min-width: 100%;
  margin-bottom: 0.5rem;
  padding-top: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
  padding-left: 1rem;
  align-items: center;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  background-color: hsla(0, 0.00%, 3.92%, 1.00);
  color: #e6e6e6;
}
.hidden {display:none !important}

.item-cart-image {
  height: 50px;
}

.small-text {
  position: relative;
  z-index: 10;
  font-weight: 400;
  font-size: 1rem;
}

#item-cart-none {
  display: flex;
  margin-bottom: 0.5rem;
  padding-top: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
  padding-left: 1rem;
  align-items: center;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  background-color: hsla(0, 0.00%, 3.92%, 1.00);
  color: #e6e6e6;
}
<select id="Namiddag" name="Namiddag" data-name="Namiddag" >
  <option value="Formaat">Selecteer formaat en bekijk prijzen</option>
  <option id="13x19namiddag">13x19 cm / €12,50</option>
  <option id="20x30namiddag">20x30 cm / €22,50</option>
  <option id="30x45namiddag">30x45 cm / €32,50</option>
  <option value="geen">geen</option>
</select>

<select id="Onderweg" name="Onderweg" data-name="Onderweg" >
  <option value="Formaat">Selecteer formaat en bekijk prijzen</option>
  <option id="13x19onderweg">13x19 cm / €12,50</option>
  <option id="20x30onderweg">20x30 cm / €22,50</option>
  <option id="30x45onderweg">30x45 cm / €32,50</option>
  <option value="geen">geen</option>
</select>

<span id="item-cart-none" >Geen</span>
<div id="13x19namiddagdiv" ><img  src="https://uploads-ssl.webflow.com/6296730d233387c2703a6964/62af4159b8d59a5cd322e5a8_film-photography-afternoon-silvan-soeters.jpg" alt="Afternoon"><span >Afternoon - 13x19 cm / €12,50</span></div>
<div id="20x30namiddagdiv" ><img  src="https://uploads-ssl.webflow.com/6296730d233387c2703a6964/62af4159b8d59a5cd322e5a8_film-photography-afternoon-silvan-soeters.jpg" alt="Afternoon"><span >Afternoon - 20x30 cm / €22,50</span></div>
<div id="30x45namiddagdiv" ><img  src="https://uploads-ssl.webflow.com/6296730d233387c2703a6964/62af4159b8d59a5cd322e5a8_film-photography-afternoon-silvan-soeters.jpg" alt="Afternoon"><span >Afternoon - 30x45 cm / €32,50</span></div>
<div id="13x19onderwegdiv" ><img  src="https://uploads-ssl.webflow.com/6296730d233387c2703a6964/62af4158450de16f13120983_film-photography-commute-silvan-soeters.jpg" alt="Commute"><span >Commute - 13x19 cm / €12,50</span></div>
<div id="20x30onderwegdiv" ><img  src="https://uploads-ssl.webflow.com/6296730d233387c2703a6964/62af4158450de16f13120983_film-photography-commute-silvan-soeters.jpg" alt="Commute"><span >Commute - 20x30 cm / €22,50</span></div>
<div id="30x45onderwegdiv" ><img  src="https://uploads-ssl.webflow.com/6296730d233387c2703a6964/62af4158450de16f13120983_film-photography-commute-silvan-soeters.jpg" alt="Commute"><span >Commute - 30x45 cm / €32,50</span></div>

Page link：https//www.codepudding.com/Blockchain/501695.html

Prev:Text is not there but it is taking space like margin overlapping
Next:How to check if a button exists?
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding