Trung tâm cá nhân
sách gpt4 ai đã đi

Sử dụng .innerHTML với DOM

In lại 作者：行者123 更新时间：2023-11-30 16:28:55 29 4
mua khóa gpt4 Nike

我正在尝试做一些我认为非常简单的事情，但出于某种原因我没有得到想要的结果？我是 javascript 的新手，但对 java 有经验，所以我相信我没有使用某种正确的规则。

这是一个获取输入值、检查选择了哪个单选按钮并将其价格(值)添加到我的 var input; 的简单函数。 .这一切都有效，但是我的三行代码 document.getElementById("outar").innerHTML = "Small Pizza";/Medium Pizza/和Large Pizza不要将字符串“Small Pizza”输出到我的元素 id = outar。

编辑 1: 当我审阅这篇文章等待回复时，我注意到我调用 document.getElementById("outar").innerHTML两次，一次是希望显示我给它的字符串，然后是下一次显示输入。这会相互覆盖并成为我只看到显示输入的原因吗？ *****

function calculate()
    {
      var input = 0;
      if (document.getElementById("small").checked) 
      {
        alert("yay"); /*testing to see if i made it into the if statements*/
        input += parseInt(document.getElementById("small").value);
        document.getElementById("outar").innerHTML = "Small Pizza";
        document.getElementById("outar").innerHTML = input;
      }
      else if (document.getElementById("med").checked)
      {
        input += parseInt(document.getElementById("med").value);
        document.getElementById("outar").innerHTML = "Medium Pizza";
        document.getElementById("outar").innerHTML = input;
      }
      else if (document.getElementById("large").checked)
      {
        input += parseInt(document.getElementById("large").value);
        document.getElementById("outar").innerHTML = "Large Pizza";
        document.getElementById("outar").innerHTML = input;
      }
      khác
      {
        alert("failed");
      }

我正在尝试将这些新字符串输出到我的 id 为 outar 的 html 元素

Order Details

1 Câu trả lời

我想我会稍微重构一下您的代码:

function calculate() {
  var small = document.getElementById("small"),
    med = document.getElementById("med"),
    large = document.getElementById("large");

  if (small.checked) {
    alert("yay"); /*testing to see if i made it into the if statements*/
    setOutput("small", "Small Pizza");
  } else if (med.checked) {
    setOutput("large", "Medium Pizza");
  } else if (large.checked) {
    setOutput("large", "Large Pizza");
  } khác {
    alert("failed");
  }
}

function setOutput(valueID, productName) {
  var total = document.getElementById(valueID).value || 0,
    outar = document.getElementById("outar");
  outar.innerHTML = productName + " " + total.toString();
}

事实上，如果您有这样的复选框:






然后您可以避免所有其他代码，而只使用以下 setOutput 函数。这也将选中的复选框总数加起来。

function setOutput(chk) {
  var cost = chk.checked ? chk.value : -chk.value,
    totalElement = document.getElementById("total"),
    sum = parseInt(totalElement.innerHTML || 0) + cost;
  totalElement.innerHTML = sum;
 document.getElementById("pname") = chk.label;
}

将您的 HTML 更改为:

Order Details

关于javascript - 使用 .innerHTML 使用 DOM，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33643124/

29 4 0
Bài viết được đề xuất: javascript - Socket.io --- 一个对象用于多个用户
Bài viết được đề xuất: javascript - 如何将 SmartyStreets 验证应用于同一页面中的两个表单？
Bài viết được đề xuất: javascript - 为什么 CSS 转换在通过 trigger.click 触发时不触发
Bài viết được đề xuất: javascript - 使用正则表达式将子组放入数组中
行者123
Hồ sơ cá nhân

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá Didi Taxi miễn phí
Mã giảm giá Didi Taxi
Các bài viết nóng hổi trên toàn bộ trang web
Giấy chứng nhận ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com