Question

我找到了一个代码，用于根据影响最终价格的表单imputs（复选框）中的一些选项显示最终价格。我也希望它能影响带有文本的外部div。是一个巨大的固定元素，我创建了显示＆＃34;最终成本＆＃34;而且我也希望通过更改SELECT D.Doctor_Name, S.Staff_Name, A.Appointment_Date, A.Appointment_Time, P.First_Name FROM APPOINTMENT_TABLE A INNER JOIN STAFF_TABLE S ON S.STAFF_ID = A.STAFF_ID INNER JOIN DOCTOR_TABLE D ON D.DOCTOR_ID = A.DOCTOR_ID INNER JOIN PATIENT_TABLE P ON P.PATIENT_ID = A.PATIENT_ID来呈现最终价格而且没有任何反应。你能帮我解决一下吗？

我也希望.priceText1也受到影响：）

实际代码是

HTML

getElementByID

JS

 <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>

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>

外部Div的渲染价格

1 个答案: