根据多个ID更改按钮onclick href

Question

我有一份订单摘要。订单摘要是基于用户选择的 5 个不同 HTML ID 的集合。我正在尝试根据对应于不同 HTML ID 的不同配置，将 link 的“结帐按钮”设置为不同的 URL。

例如，如果用户选择 "BRAZIL", "2 BAGS", "WHOLE BEAN", "EVERY 4 WEEKS", "ALL ROAST TYPES"，结帐按钮会将他们带到特定的 URL，依此类推。如果他们做出不同的选择，他们应该被带到不同的 URL.

我假设一个 for 循环和 if... else 语句可以解决问题，但我似乎无法弄明白。我觉得我很接近，但也许我离得很远。

我目前拥有的：

// 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">
                        
                    </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>

Answer 1

我想你要找的是这样的:

// List Shopify codes for all possible variations as a hierarchical object
let variations = {
  // coffee
  "BRAZIL" : {
    // bag
    "2 BAGS" : {
      // delivery
      "EVERY 4 WEEKS" : {
        // roast type
        "ALL ROAST TYPES" : {
          // grind type
          "WHOLE BEAN" :"42755456106732:1",
          "GROUND" :"42755456106500:1",
          ...
        },
        ...
      },
     ...
    },
    ...
  },
  ...
};

// CHECKOUT BUTTON CONDITIONALS
function checkoutButton() {
  // Select each node you want to process
  let coffee = document.getElementById("change-coffee").innerHTML.trim().toUpperCase();
  let bag = document.getElementById("change-bag").innerHTML.trim().toUpperCase();
  let delivery = document.getElementById("change-delivery").innerHTML.trim().toUpperCase();
  let roastType = document.getElementById("change-roast-type").innerHTML.trim().toUpperCase();
  let grindType = document.getElementById("change-grind-type").innerHTML.trim().toUpperCase();
  
  try {
    // Go find the Shopify code
    // If only grindType is not known, this returns 'undefined'
    // If any of the other values are not known, this triggers an error
    // The order of the variables should match the order in your hierarchical object
    let shopifyCode = variations[coffee][bag][delivery][roastType][grindType];
    if(typeof  shopifyCode === 'undefined') {
      // Now you also throw an error if just grindType is not known
      throw "shopifyCode can't be undefined"; 
    }

    // Build your URL
    const URL = `https://www.server.com/thepartthatstaysthesame/${shopifyCode}`;
    // Display URL in console (useful for testing purposes)
    console.log(URL);
    // Visit the URL you just created
    window.location.href = URL;
  } catch (error) {
    // Do your error handling here
    console.error('Variation unknown');
  }
}

Answer 2

你可以使用地图。

同时推荐使用addEventListener

注意扩展运算符 [...] 来创建要映射的节点列表的数组

我还假设我们正在寻找的 ID 都以 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 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">
                        
                    </span>
      </div>
      <div class="box-summary-order-button-container">
        <button class="box-summary-order-button" id="box-summary-checkout-button">
                        CONTINUE TO CHECKOUT
                    </button>

根据多个ID更改按钮onclick href

Change a button onclick href based on multiple IDs

html

javascript

event-handling

selectors-api

shopify