如何將最后一個值傳遞給HTML輸入標簽，我的學校需要它-有解無憂

我有一個代碼可以在用戶選擇選項時自定義價格，它會顯示最后的價格 <div id="totalPrice" style="background:red;"></div>我想在輸入標簽上顯示該值以及我該怎么做

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" >

<head>



</head>

<body translate="no" >
  <body onload='hideTotal()'>
<div id="wrap">
    <form action="" id="cakeform" >
        <div class="cont_order">
            <fieldset>
                <legend>Anchor price</legend>
                
               
                <label for="">Size of the cake</label> <br>
                <label for="" class="radiolabel">
                    <input type="radio" name="selectedcake" value="Round6" onclick="calculateTotal() ">Round cake 6"- service 8 people ($20)
                </label>  <br>
                <label for="" class="radiolabel">
                    <input type="radio" name="selectedcake" value="Round8" onclick="calculateTotal()"> Round cake 8" - service 12 people ($25)
                </label> <br>
                <label for="" class="radiolabel">
                    <input type="radio" name="selectedcake" value="Round10" onclick="calculateTotal()"> Round cake 10" - service 16 people ($35)
                </label> <br>
                <label for="" class="radiolabel">
                    <input type="radio" name="selectedcake" value="Round12" onclick="calculateTotal()"> Round cake 12" - service 30 people ($75)
                </label> <br> 
                <br>
                <label for="">Filling</label>

                <select name="filling" id="filling" onchange="calculateTotal()">
                    <option value="None"> Select Filling</option>
                    <option value="Lemon">Lemon($5)</option>
                    <option value="Custed">Custed($5)</option>
                    <option value="Fudge">Fudge($7)</option>
                    <option value="Mocha">Mocha($8)</option>
                </select>  <br>  <br>
              
                <label for="">Anchor price: Tk 4.50 </label>
                <select name="quantity" id="quantity" onchange="calculateTotal()">
                    <option value="0">Qnty</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                </select>
                <br> 
                <p>

                    <label for="includecandles" class="inlinelabel"> Include Candles ($5)</label>
                    <input type="checkbox" id="includecandles" name="includecandles" onclick="calculateTotal()"/>

                </p>

                <p>
                    <label for="includeinscription">Include Inscription($20)</label>
                    <input type="checkbox" id="includeinscription" name="includeinscription" onclick="calculateTotal()">
                </p>
                <div id="totalPrice" style="background:red;"></div>
            </fieldset>

        </div>
        <input type="submit" id="submit" value="Submit" onclick="calculateTotal()" style="margin-top: 5px;">
      
    </form>
</div>



</body>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

  
      <script id="rendered-js" >
var cake_prices = new Array();
cake_prices["Round6"] = 20;
cake_prices["Round8"] = 25;
cake_prices["Round10"] = 35;
cake_prices["Round12"] = 75;

var filling_prices = new Array();
filling_prices["None"] = 0;
filling_prices["Lemon"] = 5;
filling_prices["Custed"] = 5;
filling_prices["Fudge"] = 7.9;
filling_prices["Mocha"] = 8;

var tenAnchorPrice = 4.50;
var Anchor_Quantity = new Array();
Anchor_Quantity["0"] = 0;
Anchor_Quantity["1"] = 1;
Anchor_Quantity["2"] = 2;
Anchor_Quantity["3"] = 3;
Anchor_Quantity["4"] = 4;
Anchor_Quantity["5"] = 5;
Anchor_Quantity["6"] = 6;
Anchor_Quantity["7"] = 7;
Anchor_Quantity["8"] = 8;
Anchor_Quantity["9"] = 9;
Anchor_Quantity["10"] = 10;

function getCakeSizePrice()
{
  var cakeSizePrice = 0;
  var theForm = document.forms["cakeform"];
  var selectedCake = theForm.elements["selectedcake"];
  for (var i = 0; i < selectedCake.length; i  )
  {if (window.CP.shouldStopExecution(0)) break;
    if (selectedCake[i].checked)
    {
      cakeSizePrice = cake_prices[selectedCake[i].value];
      break;
    }
  }window.CP.exitedLoop(0);
  return cakeSizePrice;
}

function getFillingPrice()
{
  var cakeFillingPrice = 0;
  var theForm = document.forms["cakeform"];
  var selectedFilling = theForm.elements["filling"];

  cakeFillingPrice = filling_prices[selectedFilling.value];
  return cakeFillingPrice;
}

//tttttttttttttttttttttttttt test tttttttttttttttttttttt
/*
function AnchorsPrice()
{   
    var AnchorPrice=0;
    var theForm = document.forms["cakeform"];
    var includeAnchorPrice= theForm.elements["tenAnchorPrice"];

    if (includeAnchorPrice.checked==true) {
        AnchorPrice=4.25;
    };
    return AnchorPrice;
}*/

function getAnchorQuantity()
{
  var AnchorQuantity = 0;
  var theForm = document.forms["cakeform"];
  var selectedAnchor = theForm.elements["quantity"];

  AnchorQuantity = Anchor_Quantity[selectedAnchor.value];
  return AnchorQuantity;
}
//tttttttttttttttttttttttttt test tttttttttttttttttttttt

function candlesPrice()
{
  var candlePrice = 0;
  var theForm = document.forms["cakeform"];
  var includeCandles = theForm.elements["includecandles"];

  if (includeCandles.checked == true) {
    candlePrice = 5;
  };
  return candlePrice;
}


function insciptionPrice()
{
  var inscriptionPrice = 0;
  var theForm = document.forms["cakeform"];
  var includeInscription = theForm.elements["includeinscription"];

  if (includeInscription.checked == true) {
    inscriptionPrice = 20;
  };
  return inscriptionPrice;
}


function calculateTotal()
{
  // var cakePrice= getCakeSizePrice()   getFillingPrice()   candlesPrice()   insciptionPrice() ;
  var cakePrice = getCakeSizePrice()   getFillingPrice()   candlesPrice()   insciptionPrice()   tenAnchorPrice * getAnchorQuantity();

  var divobj = document.getElementById('totalPrice');
  divobj.style.display = 'block';
  divobj.innerHTML = "Total Price for the Cake $"   cakePrice;
}

function hideTotal()
{
  var divobj = document.getElementById('totalPrice');
  divobj.style.display = 'none';
}
//# sourceURL=pen.js
    </script>

  

</body>

</html>

uj5u.com熱心網友回復：

var cake_prices = new Array();
cake_prices["Round6"] = 20;
cake_prices["Round8"] = 25;
cake_prices["Round10"] = 35;
cake_prices["Round12"] = 75;

var filling_prices = new Array();
filling_prices["None"] = 0;
filling_prices["Lemon"] = 5;
filling_prices["Custed"] = 5;
filling_prices["Fudge"] = 7.9;
filling_prices["Mocha"] = 8;

var tenAnchorPrice = 4.50;
var Anchor_Quantity = new Array();
Anchor_Quantity["0"] = 0;
Anchor_Quantity["1"] = 1;
Anchor_Quantity["2"] = 2;
Anchor_Quantity["3"] = 3;
Anchor_Quantity["4"] = 4;
Anchor_Quantity["5"] = 5;
Anchor_Quantity["6"] = 6;
Anchor_Quantity["7"] = 7;
Anchor_Quantity["8"] = 8;
Anchor_Quantity["9"] = 9;
Anchor_Quantity["10"] = 10;

function getCakeSizePrice() {
  var cakeSizePrice = 0;
  var theForm = document.forms["cakeform"];
  var selectedCake = theForm.elements["selectedcake"];
  for (var i = 0; i < selectedCake.length; i  ) {
    if (window.CP.shouldStopExecution(0)) break;
    if (selectedCake[i].checked) {
      cakeSizePrice = cake_prices[selectedCake[i].value];
      break;
    }
  }
  window.CP.exitedLoop(0);
  return cakeSizePrice;
}

function getFillingPrice() {
  var cakeFillingPrice = 0;
  var theForm = document.forms["cakeform"];
  var selectedFilling = theForm.elements["filling"];

  cakeFillingPrice = filling_prices[selectedFilling.value];
  return cakeFillingPrice;
}

//tttttttttttttttttttttttttt test tttttttttttttttttttttt
/*
function AnchorsPrice()
{   
    var AnchorPrice=0;
    var theForm = document.forms["cakeform"];
    var includeAnchorPrice= theForm.elements["tenAnchorPrice"];

    if (includeAnchorPrice.checked==true) {
        AnchorPrice=4.25;
    };
    return AnchorPrice;
}*/

function getAnchorQuantity() {
  var AnchorQuantity = 0;
  var theForm = document.forms["cakeform"];
  var selectedAnchor = theForm.elements["quantity"];

  AnchorQuantity = Anchor_Quantity[selectedAnchor.value];
  return AnchorQuantity;
}
//tttttttttttttttttttttttttt test tttttttttttttttttttttt

function candlesPrice() {
  var candlePrice = 0;
  var theForm = document.forms["cakeform"];
  var includeCandles = theForm.elements["includecandles"];

  if (includeCandles.checked == true) {
    candlePrice = 5;
  };
  return candlePrice;
}


function insciptionPrice() {
  var inscriptionPrice = 0;
  var theForm = document.forms["cakeform"];
  var includeInscription = theForm.elements["includeinscription"];

  if (includeInscription.checked == true) {
    inscriptionPrice = 20;
  };
  return inscriptionPrice;
}


function calculateTotal() {
  // var cakePrice= getCakeSizePrice()   getFillingPrice()   candlesPrice()   insciptionPrice() ;
  var cakePrice = getCakeSizePrice()   getFillingPrice()   candlesPrice()   insciptionPrice()   tenAnchorPrice * getAnchorQuantity();

  var divobj = document.getElementById('totalPrice');
  var displayTotal = document.getElementById('displayPrice');
  divobj.style.display = 'block';
  divobj.innerHTML = "Total Price for the Cake $"   cakePrice;
  displayTotal.value = "$"   cakePrice;

}

function hideTotal() {
  var divobj = document.getElementById('totalPrice');
  divobj.style.display = 'none';
}

<!DOCTYPE html>
<html lang="en">

<body translate="no">

  <body onload='hideTotal()'>
    <div id="wrap">
      <form action="" id="cakeform">
        <div class="cont_order">
          <fieldset>
            <legend>Anchor price</legend>


            <label for="">Size of the cake</label> <br>
            <label for="" class="radiolabel">
                        <input type="radio" name="selectedcake" value="Round6" onclick="calculateTotal() ">Round cake 6"- service 8 people ($20)
                    </label> <br>
            <label for="" class="radiolabel">
                        <input type="radio" name="selectedcake" value="Round8" onclick="calculateTotal()"> Round cake 8" - service 12 people ($25)
                    </label> <br>
            <label for="" class="radiolabel">
                        <input type="radio" name="selectedcake" value="Round10" onclick="calculateTotal()"> Round cake 10" - service 16 people ($35)
                    </label> <br>
            <label for="" class="radiolabel">
                        <input type="radio" name="selectedcake" value="Round12" onclick="calculateTotal()"> Round cake 12" - service 30 people ($75)
                    </label> <br>
            <br>
            <label for="">Filling</label>

            <select name="filling" id="filling" onchange="calculateTotal()">
              <option value="None"> Select Filling</option>
              <option value="Lemon">Lemon($5)</option>
              <option value="Custed">Custed($5)</option>
              <option value="Fudge">Fudge($7)</option>
              <option value="Mocha">Mocha($8)</option>
            </select> <br> <br>

            <label for="">Anchor price: Tk 4.50 </label>
            <select name="quantity" id="quantity" onchange="calculateTotal()">
              <option value="0">Qnty</option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="7">7</option>
              <option value="8">8</option>
              <option value="9">9</option>
              <option value="10">10</option>
            </select>
            <br>
            <p>

              <label for="includecandles" class="inlinelabel"> Include Candles ($5)</label>
              <input type="checkbox" id="includecandles" name="includecandles" onclick="calculateTotal()" />

            </p>

            <p>
              <label for="includeinscription">Include Inscription($20)</label>
              <input type="checkbox" id="includeinscription" name="includeinscription" onclick="calculateTotal()">
            </p>
            <div id="totalPrice" style="background:red;"></div>
            <input type="text" id="displayPrice">
          </fieldset>

        </div>
        <input type="submit" id="submit" value="Submit" onclick="calculateTotal()" style="margin-top: 5px;">

      </form>
    </div>



  </body>
  <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>


</body>

</html>

希望這可以幫助！

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/495996.html

標籤：javascript html 验证输入参数传递

上一篇：如何在json中獲取ZodError

下一篇：Vuelidate僅檢查1條規則