javascript - 在外部 Div 中渲染价格

Question

我找到了一个代码，可以根据影响最终价格的表单输入(复选框)中的一些选择来显示最终价格。我还希望它影响带有文本的外部 div。是我创建的一个巨大的固定元素，显示“最终成本”，我还希望它通过更改 getElementByID 来呈现最终价格，但没有任何反应。你能帮我解决这个问题吗？

我也希望 .priceText1 也受到影响:)

实际代码是

HTML

 <form action="" id="theForm">
    <fieldset>
        <legend>
            Products
        </legend>
        <label>
            <input name="product" value="12.95" type="checkbox" id="p1" onclick="totalIt()"/>
            Candy $12.95
        </label>
        <label>
            <input name="product" value="5.99" type="checkbox" id="p2" onclick="totalIt()"/>
            Burger $5.99
        </label>
        <label>
            <input name="product" value="1.99" type="checkbox" id="p3" onclick="totalIt()"/>
            Coke $1.99
        </label>
        <label>
            Total 
            <input value="$0.00" readonly="readonly" type="text" id="total"/>
        </label>
    </fieldset>
    <input value="Submit" type="submit"/>
    <input value="Reset" type="reset"/>
</form>

<div class="priceWrapper">
            <h3 class="priceText1">$0.00</h3>
            <h3 class="priceText2">Final Cost</h3>
</div>

JS

function totalIt() {
    var input = document.getElementsByName("product");
    var total = 0;
    for (var i = 0; i < input.length; i++) {
        if (input[i].checked) {
          total += parseFloat(input[i].value);
        }
    }

    document.getElementById("total").value = "$" + total.toFixed(2);
}

Answer 1

您可以简单地使用 innerText 和 querySelector 将总价添加到元素 .priceText1 中，例如:

document.querySelector(".priceText1").innerText = "$" + total.toFixed(2);

希望这对您有所帮助。

function totalIt() {
  var input = document.getElementsByName("product");
  var total = 0;
  for (var i = 0; i < input.length; i++) {
    if (input[i].checked) {
      total += parseFloat(input[i].value);
    }
  }
  document.getElementById("total").value = "$" + total.toFixed(2);
  document.querySelector(".priceText1").innerText = "$" + total.toFixed(2);
}

<form action="" id="theForm">
  <fieldset>
    <legend>
      Products
    </legend>
    <label>
            <input name="product" value="12.95" type="checkbox" id="p1" onclick="totalIt()"/>
            Candy $12.95
        </label>
    <label>
            <input name="product" value="5.99" type="checkbox" id="p2" onclick="totalIt()"/>
            Burger $5.99
        </label>
    <label>
            <input name="product" value="1.99" type="checkbox" id="p3" onclick="totalIt()"/>
            Coke $1.99
        </label>
    <label>
            Total 
            <input value="$0.00" readonly="readonly" type="text" id="total"/>
        </label>
  </fieldset>
  <input value="Submit" type="submit" />
  <input value="Reset" type="reset" />
</form>

<div class="priceWrapper">
  <h3 class="priceText1">$0.00</h3>
  <h3 class="priceText2">Final Cost</h3>
</div>