当前位置： 文江博客话题详情

根据多个ID更改按钮onclick href

发布于 2025-01-30 16:08:15 字数 4979 浏览 2 评论 0原文

我有订单摘要。订单摘要是基于用户选择的5个不同HTML ID的集合。我正在尝试根据与不同HTML ID相对应的不同配置链接到不同URL的“结帐按钮”。

例如，如果用户选择“巴西”，“ 2个袋子”，“全bean”，“每4周”，“所有烤制类型” Checkout按钮将将它们带到特定的URL和因此，特定于该选择。如果他们做出不同的选择，则应将其带到不同的URL。

我假设一个循环和如果... 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">
                        $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>

原文

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>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

遮了一弯 2025-02-06 16:08:15

我认为您要寻找的是这样的：

// 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');
  }
}

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

// 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');
  }
}
回复 原文
你的往事 2025-02-06 16:08:15

您可以使用地图。

还建议使用AddEventListener

注意差异操作员[...]将节点列表的数组绘制到映射

我也假设我们正在寻找所有ID，从change> 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">
                        $90
                    </span>
      </div>
      <div class="box-summary-order-button-container">
        <button class="box-summary-order-button" id="box-summary-checkout-button">
                        CONTINUE TO CHECKOUT
                    </button>

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 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">
                        CONTINUE TO CHECKOUT
                    </button>

回复 原文
~没有更多了~

关于作者

一抹微笑

暂无简介

文章
评论
27 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

十二

文章 0 评论 0

飞烟轻若梦

文章 0 评论 0

OPleyuhuo

文章 0 评论 0

wxb0109

文章 0 评论 0

旧城空念

文章 0 评论 0

-小熊_

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文