0

Update: The script is now working properly I inserted a script into my website and it isn’t working. What should I fix to make a proper live demo of what’s going on. Let me explain the problem:

I know this code could be a lot shorter, but my knowledge of JavaScript is very limited and I am amazed I got this far.

It is almost working: when you select a size in the option dropdown, the relevant 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 is my problem: when you select a size in both dropdowns and select option “Geen” in one of the dropdowns, the div with id #item-cart-none becomes visible again. This should not happen. This div should only becomes visible again when nothing is selected in both of the dropdowns or option “Geen” is selected in both of them.

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

Edit: when you select a size in one of the dropdowns AND in the other dropdown, both relevant divs become visible. That is the whole point 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 “Geen” (which is Dutch and 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" class="select-field w-select" 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" class="select-field w-select" 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" class="item-cart-none">Geen</span>

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

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

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

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

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

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

Improve this question
2
  • Should #item-cart-none be visible when you have Formaat in one <select> and geen in the other? Commented Aug 6, 2022 at 5:38
  • Hi @tao, yes, definitely Commented Aug 6, 2022 at 6:26

2 Answers 2

Reset to default
0

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){
  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;
  },[]);
  cartItems.forEach(itm=>itm.classList.toggle("hidden",selItms.indexOf(itm)<0));
  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" class="select-field w-select">
  <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" class="select-field w-select">
  <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" class="hidden">Geen</span>
<div id="13x19namiddagdiv" class="item-cart"><img class="item-cart-image" src="https://uploads-ssl.webflow.com/6296730d233387c2703a6964/62af4159b8d59a5cd322e5a8_film-photography-afternoon-silvan-soeters.jpg" alt="Afternoon"><span class="small-text">Afternoon - 13x19 cm / €12,50</span></div>
<div id="20x30namiddagdiv" class="item-cart"><img class="item-cart-image" src="https://uploads-ssl.webflow.com/6296730d233387c2703a6964/62af4159b8d59a5cd322e5a8_film-photography-afternoon-silvan-soeters.jpg" alt="Afternoon"><span class="small-text">Afternoon - 20x30 cm / €22,50</span></div>
<div id="30x45namiddagdiv" class="item-cart"><img class="item-cart-image" src="https://uploads-ssl.webflow.com/6296730d233387c2703a6964/62af4159b8d59a5cd322e5a8_film-photography-afternoon-silvan-soeters.jpg" alt="Afternoon"><span class="small-text">Afternoon - 30x45 cm / €32,50</span></div>
<div id="13x19onderwegdiv" class="item-cart"><img class="item-cart-image" src="https://uploads-ssl.webflow.com/6296730d233387c2703a6964/62af4158450de16f13120983_film-photography-commute-silvan-soeters.jpg" alt="Commute"><span class="small-text">Commute - 13x19 cm / €12,50</span></div>
<div id="20x30onderwegdiv" class="item-cart"><img class="item-cart-image" src="https://uploads-ssl.webflow.com/6296730d233387c2703a6964/62af4158450de16f13120983_film-photography-commute-silvan-soeters.jpg" alt="Commute"><span class="small-text">Commute - 20x30 cm / €22,50</span></div>
<div id="30x45onderwegdiv" class="item-cart"><img class="item-cart-image" src="https://uploads-ssl.webflow.com/6296730d233387c2703a6964/62af4158450de16f13120983_film-photography-commute-silvan-soeters.jpg" alt="Commute"><span class="small-text">Commute - 30x45 cm / €32,50</span></div>

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Hey @CarstenMassmann, also wow, this is what I obviously would really want, and it seems to be working in your snippet exactly like it should. When I however implement this code into my website the items don’t show up in the Cart. I think it’s best to message you privately with my website information as the code just works, so I won’t discuss that on here further as people will already find benefit in the code you wrote. Hope you don’t mind. See ya
Hey @CarstenMassmann, I am not sure I am allowed, if it is appropriate to create a new chatroom for this?… I don’t want to break any rules as I did one time before. I might do it again now… :( So I’ll ask you first, is it okay if I share my website link with password with you in this comment section? I would really like you to take a look at it as I really think I implemented the code correctly into my website. Hope to hear from you. TY
0

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

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

</html>

Improve this answer

1 Comment

Wow, many thanks! I successfully implemented the code into my website. It’s working how it should now. And yes I understand, partly, because I don’t know how I should write my code else at the moment. But the whole code does not seem very economical at all. Especially not when you think of the fact that I have 16 photos/items, and have to add these functions for each of them. Not even to mention how the HTML will look like. But for now this will do… Thanks again.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.