显示正确的单选按钮值不使用默认检查选项？

发布于 2025-02-07 09:25:19 字数 1627 浏览 1 评论 0原文

问题：应用程序上显示默认检查的单选按钮值，但是如果我更改了提示值，则取消选择并重新选择一个复选框，它将返回到原始检查的无线电按钮值，而不是更改为新的提示值。

基本上，我的默认无线电检查按钮值设置为$ 5。如果我选择一个复选框选项，那么我将提示值更改为$ 2，然后取消选择复选框，然后重新选择复选框，它将显示为$ 5而不是新选项$ 2

这是我的Codepen。我在codepen上添加了说明，因此您可以看到我的问题

https：//codepen.io/jaysomo10/pen/pen/pen/pen/pen/pen/pen/pen/ dydakwz

这是我的JS，

window.menuItems = 0;
window.tips = 0;

const foodTotal = document.getElementById("price");
const tipTotal = document.getElementById("tip");
const orderTotal = document.getElementById("total");

let tipVal = document.querySelector(".tips:checked").value;

tipTotal.textContent = "$" + (tipVal / 100).toFixed(2);

document.addEventListener("click", ({ target }) => {
  if (target.className === "food" && target.checked && tipVal) {
    window.menuItems += parseInt(target.value);
    window.tips = tipVal;
  } else if (target.className === "food" && !target.checked) {
    window.menuItems -= parseInt(target.value);
  } else if (target.className === "tips" && target.checked) {
    window.tips = parseInt(target.value);
  } else {
    return;
  }

  foodTotal.textContent = `$${(window.menuItems / 100).toFixed(2)}`;
  tipTotal.textContent = `$${(window.tips / 100).toFixed(2)}`;
  orderTotal.textContent = `$${(
    (Number(window.menuItems) + Number(window.tips)) /
    100
  ).toFixed(2)}`;
});

我似乎无法将逻辑转换为使提示值在我取消选择之后变化。重新选择一个复选框选项。

原文

Problem: Default checked radio button value shows on app, but if I change the tip value, then unselect and reselect a checkbox, it goes back to the original checked radio button value instead of changing to the new tip value.

Basicaly, my default radio checked button value is set to $5. If I select a checkbox option, then I change the tip value to $2 then unselect a checkbox, then reselect a checkbox, it will show the tip value as $5 instead of the new option $2

Here's my codepen. I added instructions on the codepen so you can see my problem

https://codepen.io/jaysomo10/pen/dydaKwZ

Here's my JS

window.menuItems = 0;
window.tips = 0;

const foodTotal = document.getElementById("price");
const tipTotal = document.getElementById("tip");
const orderTotal = document.getElementById("total");

let tipVal = document.querySelector(".tips:checked").value;

tipTotal.textContent = "quot; + (tipVal / 100).toFixed(2);

document.addEventListener("click", ({ target }) => {
  if (target.className === "food" && target.checked && tipVal) {
    window.menuItems += parseInt(target.value);
    window.tips = tipVal;
  } else if (target.className === "food" && !target.checked) {
    window.menuItems -= parseInt(target.value);
  } else if (target.className === "tips" && target.checked) {
    window.tips = parseInt(target.value);
  } else {
    return;
  }

  foodTotal.textContent = `${(window.menuItems / 100).toFixed(2)}`;
  tipTotal.textContent = `${(window.tips / 100).toFixed(2)}`;
  orderTotal.textContent = `${(
    (Number(window.menuItems) + Number(window.tips)) /
    100
  ).toFixed(2)}`;
});

I can't seem to convert the logic to make the tip value to change after I unselect & re select a checkbox option.

分享到QQ

分享到微博

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

发布评论

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

人疚 2025-02-14 09:25:19

tipval在点击事件之外定义。因此，它始终具有SART的价值。您还必须在活动中换取它

window.menuItems = 0;
window.tips = 0;

const foodTotal = document.getElementById("price");
const tipTotal = document.getElementById("tip");
const orderTotal = document.getElementById("total");

let tipVal = document.querySelector(".tips:checked").value;
tipTotal.textContent = "$" + (tipVal / 100).toFixed(2);

document.addEventListener("click", ({ target }) => {
  tipVal = document.querySelector(".tips:checked").value;
  if (target.className === "food" && target.checked && tipVal) {
    window.menuItems += parseInt(target.value);
    window.tips = tipVal;
  } else if (target.className === "food" && !target.checked) {
    window.menuItems -= parseInt(target.value);
  } else if (target.className === "tips" && target.checked) {
    window.tips = parseInt(target.value);
  } else {
    return;
  }

  foodTotal.textContent = `${(window.menuItems / 100).toFixed(2)}`;
  tipTotal.textContent = `${(window.tips / 100).toFixed(2)}`;
  orderTotal.textContent = `${(
    (Number(window.menuItems) + Number(window.tips)) /
    100
  ).toFixed(2)}`;
});

tipVal is defined outside the click event. So it has always the value at the sart. You have to changhe it also inside the event

window.menuItems = 0;
window.tips = 0;

const foodTotal = document.getElementById("price");
const tipTotal = document.getElementById("tip");
const orderTotal = document.getElementById("total");

let tipVal = document.querySelector(".tips:checked").value;
tipTotal.textContent = "quot; + (tipVal / 100).toFixed(2);

document.addEventListener("click", ({ target }) => {
  tipVal = document.querySelector(".tips:checked").value;
  if (target.className === "food" && target.checked && tipVal) {
    window.menuItems += parseInt(target.value);
    window.tips = tipVal;
  } else if (target.className === "food" && !target.checked) {
    window.menuItems -= parseInt(target.value);
  } else if (target.className === "tips" && target.checked) {
    window.tips = parseInt(target.value);
  } else {
    return;
  }

  foodTotal.textContent = `${(window.menuItems / 100).toFixed(2)}`;
  tipTotal.textContent = `${(window.tips / 100).toFixed(2)}`;
  orderTotal.textContent = `${(
    (Number(window.menuItems) + Number(window.tips)) /
    100
  ).toFixed(2)}`;
});

回复收藏 0 原文

朕就是辣么酷 2025-02-14 09:25:19

将其从第一个if语句中删除

if (target.className === "food" && target.checked && tipVal) {
    window.menuItems += parseInt(target.value);
    //window.tips = tipVal; // remove this
  }

remove this from your first if statement

if (target.className === "food" && target.checked && tipVal) {
    window.menuItems += parseInt(target.value);
    //window.tips = tipVal; // remove this
  }

回复收藏 0 原文

~没有更多了~