Change a button onclick href based on multiple IDs

Issue

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 class="container-summary">
  <div class="box-summary">
    <div class="box-summary-title">
      ORDER SUMMARY
    </div>
    <div class="box-summary-block-coffee">
      COFFEE SELECTION: <span class="box-summary-option-coffee" id="change-coffee">BRAZIL</span>
    </div>

    <div class="box-summary-block">
      <div class="box-summary-block-left">
        <div class="box-summary-category1-left">
          # OF BAGS
        </div>
        <div class="box-summary-option-bags" id="change-bag">
          2 BAGS
        </div>
        <div class="box-summary-category2-left">
          GRIND TYPE
        </div>
        <div class="box-summary-option-grind" id="change-grind-type">
          WHOLE BEAN
        </div>
      </div>

      <div class="box-summary-block-right">
        <div class="box-summary-category1-right">
          DELIVERY
        </div>
        <div class="box-summary-option-delivery" id="change-delivery">
          EVERY 4 WEEKS
        </div>
        <div class="box-summary-category2-right">
          ROAST TYPE
        </div>
        <div class="box-summary-option-roast" id="change-roast-type">
          ALL ROAST TYPES
        </div>
      </div>

    </div>

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

Solution

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;
}

Answered By – John Slegers

Answer Checked By – Jay B. (AngularFixing Admin)

Leave a Reply

Your email address will not be published.