Question

我试图在我的脑海里做一些非常简单的事，因为某些原因我没有得到预期的结果？我是javascript的新手，但对java很有经验，所以我相信我没有使用某种正确的规则。

这是一个简单的函数，用于获取输入的值，检查选择了哪个单选按钮，并将其价格（值）添加到var input;。这一切都有效，但我的三行代码document.getElementById("outar").innerHTML = "Small Pizza"; / Medium Pizza /和Large Pizza不会输出字符串＆＃34; Small Pizza＆＃34;到我的元素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>

使用DOM的.innerHTML

1 个答案: