javascript - 使用 .innerHTML 使用 DOM

Question

我正在尝试做一些我认为非常简单的事情，但出于某种原因我没有得到想要的结果？我是 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;
      }
      else
      {
        alert("failed");
      }

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

<th rowspan="10" id="outp"><h3>Order Details</h3><p id="outar"></p></th>

Answer 1

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

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");
  } else {
    alert("failed");
  }
}

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

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

<input type="checkbox" value="12" onchange="setOuput(this)" label="Small Pizza" />

<input type="checkbox" value="18" onchange="setOuput(this)" label="Medium Pizza" />

<input type="checkbox" value="24" onchange="setOuput(this)" label="Large Pizza" />

然后您可以避免所有其他代码，而只使用以下 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 更改为:

<th rowspan="10" id="outp"><h3>Order Details</h3><span id="pname"></span><span id="total"></span></th>