Change a button onclick href based on multiple IDs-CodePudding

I have an order summary. The order summary is a collection of 5 different HTML IDs based on user selection. I'm trying to get the "checkout button" to link to different URLs based on different configurations corresponding to different HTML IDs.

For example, if the user selects "BRAZIL", "2 BAGS", "WHOLE BEAN", "EVERY 4 WEEKS", "ALL ROAST TYPES" the checkout button would take them to a specific URL and so on specific for that selection. If they make a different selection, they should be taken to a different URL.

I'm assuming a for loop and if... else statement would do the trick but I can't seem to figure it out. I feel like I'm close but maybe I'm way off.

What I currently have:

// CHECKOUT BUTTON CONDITIONALS
function checkoutButton() {
  let checkoutBtnClick = document.querySelectorAll("#change-coffee, #change-bag, #change-grind-type, #change-delivery, #change-roast-type").innerHTML;
  if (checkoutBtnClick === "BRAZIL", "2 BAGS", "WHOLE BEAN", "EVERY 4 WEEKS", "ALL ROAST TYPES") {
    document.getElementById("box-summary-checkout-button").setAttribute('onclick', 'window.location.href="https://www.google.com/"');
  } else if (checkoutBtnClick === "BRAZIL", "2 BAGS", "GROUND", "EVERY 4 WEEKS", "ALL ROAST TYPES") {
    document.getElementById("box-summary-checkout-button").setAttribute('onclick', 'window.location.href="https://www.facebook.com/"');
  }
}

/* ORDER SUMMARY */

.container-summary {
  display: flex;
  border: 3px solid none;
  justify-content: center;
  margin-bottom: 50px;
  font-family: 'lato', sans-serif;
}

.box-summary {
  height: 20.5rem;
  width: 30rem;
  background: #eee;
  border-radius: 6px;
}

.box-summary-title {
  display: flex;
  justify-content: center;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .03rem;
  margin-top: 25px;
  color: #433d3d;
  line-height: .95em;
}

.box-summary-block {
  display: flex;
  justify-content: space-around;
  margin: 1rem 3rem;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .03rem;
  line-height: 1.9em;
  color: #393939;
}

.box-summary-block-coffee {
  display: flex;
  justify-content: center;
  margin: 1rem 4rem;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .03rem;
  line-height: 1.9em;
  color: #393939;
}

.box-summary-option-coffee {
  margin-left: .75rem;
}

.box-summary-block-right {
  text-align: end;
}

.box-summary-category2-left,
.box-summary-category2-right {
  margin-top: .6em;
}

.box-summary-option-bags,
.box-summary-option-grind,
.box-summary-option-delivery,
.box-summary-option-roast,
.box-summary-option-coffee {
  color: #3e718a;
}

.box-summary-shipment-plus-price {
  display: flex;
  justify-content: space-evenly;
  margin-left: 60px;
  margin-right: 60px;
  margin-bottom: 10px;
  margin-top: 20px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .03rem;
  line-height: .95em;
  color: #433d3d;
}

.box-summary-order-button-container {
  display: flex;
  justify-content: center;
}

.box-summary-order-button {
  padding: 15px 30px 15px 30px;
  font-size: 15px
}

<!--ORDER SUMMARY CONTAINER-->
<div >
  <div >
    <div >
      ORDER SUMMARY
    </div>
    <div >
      COFFEE SELECTION: <span  id="change-coffee">BRAZIL</span>
    </div>

    <div >
      <div >
        <div >
          # OF BAGS
        </div>
        <div  id="change-bag">
          2 BAGS
        </div>
        <div >
          GRIND TYPE
        </div>
        <div  id="change-grind-type">
          WHOLE BEAN
        </div>
      </div>

      <div >
        <div >
          DELIVERY
        </div>
        <div  id="change-delivery">
          EVERY 4 WEEKS
        </div>
        <div >
          ROAST TYPE
        </div>
        <div  id="change-roast-type">
          ALL ROAST TYPES
        </div>
      </div>

    </div>

    <div >
      <div >
        <span >
                        PRICE PER SHIPMENT:
                    </span>
        <span  id="box-summary-total-price">
                        $90
                    </span>
      </div>
      <div >
        <button  id="box-summary-checkout-button" onclick="checkoutButton()">
                        CONTINUE TO CHECKOUT
                    </button>

CodePudding user response：

I think what you're looking for, is something like this :

// CHECKOUT BUTTON CONDITIONALS
function checkoutButton() {
  // Initialize your URL
  let URL = "https://";
  // Select the nodes you want to process
  let nodes = document.querySelectorAll(
    "#change-coffee, #change-bag, #change-grind-type, #change-delivery, #change-roast-type"
  ); 
  // Loop through every node
  nodes.forEach(function(node) {
    // Normalize the value of the node's innerHTML
    // This removes excess spaces and ensures the string processed is uppercase
    let normalized = node.innerHTML.trim().toUpperCase();
    // Check the value of the normalized string
    switch (normalized) {
      case "BRAZIL":
        // Append specific string to URL
        URL  = 'somestring'
        break;
      case "2 BAGS":
        // Append specific string to URL
        URL  = 'someotherstring'
        break;
      case "GROUND":
        // Append specific string to URL
        URL  = 'yetanotherotherstring'
        break;
        // Add other cases here
      default:
        // Error handling
    }
  });

  // Visit the URL you just created
  window.location.href = URL;
}

CodePudding user response：

You can use a map.

Also recommended to use addEventListener

Note the spread operator [...] to make an array of the node list to map

I also assume the IDs we are looking for all start with change

// CHECKOUT BUTTON CONDITIONALS
document.getElementById("box-summary-checkout-button").addEventListener("click", () => {
  const parms = [...document.querySelectorAll("[id^=change]")]
    .map(div => `${div.id}=${div.textContent.trim().replace(/ /g," ")}`);
  const url = `https://www.server.com/someprocesses?${parms.join("&")}`;
  console.log(url);
  //window.location.href = url;

})

/* ORDER SUMMARY */

.container-summary {
  display: flex;
  border: 3px solid none;
  justify-content: center;
  margin-bottom: 50px;
  font-family: 'lato', sans-serif;
}

.box-summary {
  height: 20.5rem;
  width: 30rem;
  background: #eee;
  border-radius: 6px;
}

.box-summary-title {
  display: flex;
  justify-content: center;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .03rem;
  margin-top: 25px;
  color: #433d3d;
  line-height: .95em;
}

.box-summary-block {
  display: flex;
  justify-content: space-around;
  margin: 1rem 3rem;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .03rem;
  line-height: 1.9em;
  color: #393939;
}

.box-summary-block-coffee {
  display: flex;
  justify-content: center;
  margin: 1rem 4rem;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .03rem;
  line-height: 1.9em;
  color: #393939;
}

.box-summary-option-coffee {
  margin-left: .75rem;
}

.box-summary-block-right {
  text-align: end;
}

.box-summary-category2-left,
.box-summary-category2-right {
  margin-top: .6em;
}

.box-summary-option-bags,
.box-summary-option-grind,
.box-summary-option-delivery,
.box-summary-option-roast,
.box-summary-option-coffee {
  color: #3e718a;
}

.box-summary-shipment-plus-price {
  display: flex;
  justify-content: space-evenly;
  margin-left: 60px;
  margin-right: 60px;
  margin-bottom: 10px;
  margin-top: 20px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .03rem;
  line-height: .95em;
  color: #433d3d;
}

.box-summary-order-button-container {
  display: flex;
  justify-content: center;
}

.box-summary-order-button {
  padding: 15px 30px 15px 30px;
  font-size: 15px
}

<!--ORDER SUMMARY CONTAINER-->
<div >
  <div >
    <div >
      ORDER SUMMARY
    </div>
    <div >
      COFFEE SELECTION: <span  id="change-coffee">BRAZIL</span>
    </div>
    <div >
      <div >
        <div >
          # OF BAGS
        </div>
        <div  id="change-bag">
          2 BAGS
        </div>
        <div >
          GRIND TYPE
        </div>
        <div  id="change-grind-type">
          WHOLE BEAN
        </div>
      </div>
      <div >
        <div >
          DELIVERY
        </div>
        <div  id="change-delivery">
          EVERY 4 WEEKS
        </div>
        <div >
          ROAST TYPE
        </div>
        <div  id="change-roast-type">
          ALL ROAST TYPES
        </div>
      </div>

    </div>

    <div >
      <div >
        <span >
                        PRICE PER SHIPMENT:
                    </span>
        <span  id="box-summary-total-price">
                        $90
                    </span>
      </div>
      <div >
        <button  id="box-summary-checkout-button">
                        CONTINUE TO CHECKOUT
                    </button>