javascript - 无法将输入范围值正确连接到 JavaScript 计算-6ren

javascript - 无法将输入范围值正确连接到 JavaScript 计算

转载作者：行者123 更新时间：2023-11-28 05:56:29

我创建了(在模板上构建)一个简单的 js 表单。一切都与“ radio ”和“选择”输入一起工作，但我无法将“范围”值与其他所有内容连接起来。

这就是表单和计算的工作原理:(抱歉有很多菜鸟代码)

function showVal(newVal){
  document.getElementById("valBox").innerHTML=newVal;
}

 function valNum(){

var valNum = document.getElementById("valBox")
 }

 var cake_prices = new Array();
 cake_prices["Round6"]=9;
 cake_prices["Round8"]=11;
 cake_prices["Round10"]=12;
 

 var filling_prices= new Array();
 filling_prices["Yearone"]=12;
 filling_prices["Yeartwo"]=60;
 filling_prices["Yearthree"]=120;


 var billing_prices= new Array();
 billing_prices["Billone"]=100;
 billing_prices["Billtwo"]=200;
 billing_prices["Billthree"]=300;
  billing_prices["Billfour"]=400;
billing_prices["Billfive"]=300;

	 
	 



function getCakeSizePrice()
{  
    var cakeSizePrice=0;
    //Get a reference to the form id="cakeform"
    var theForm = document.forms["cakeform"];
    //Get a reference to the cake the user Chooses name=selectedCake":
    var selectedCake = theForm.elements["selectedcake"];
    //Here since there are 4 radio buttons selectedCake.length = 4
    //We loop through each radio buttons
    for(var i = 0; i < selectedCake.length; i++)
    {
        //if the radio button is checked
        if(selectedCake[i].checked)
        {
            //we set cakeSizePrice to the value of the selected radio button
            //i.e. if the user choose the 8" cake we set it to 25
            //by using the cake_prices array
            //We get the selected Items value
            //For example cake_prices["Round8".value]"
            cakeSizePrice = cake_prices[selectedCake[i].value];
            //If we get a match then we break out of this loop
            //No reason to continue if we get a match
            break;
        }
    }
    //We return the cakeSizePrice
    return cakeSizePrice;
}




     
function getBillingPrice()
{
    var cakeBillingPrice=0;
    //Get a reference to the form id="cakeform"
    var theForm = document.forms["cakeform"];
    //Get a reference to the select id="filling"
     var selectedBilling = theForm.elements["billing"];
     
    //set cakeFilling Price equal to value user chose
    //For example filling_prices["Lemon".value] would be equal to 5
    cakeBillingPrice = billing_prices[selectedBilling.value];

    //finally we return cakeFillingPrice
    return cakeBillingPrice;
}





function calculateTotal()
{
    //Here we get the total price by calling our function
    //Each function returns a number so by calling them we add the values they return together
    var cakePrice = (getCakeSizePrice() + getBillingPrice()) * valNum();
    var num = (cakePrice);
    var miPrice = parseInt (num - (num * .35));
    var miDiff = parseInt(cakePrice - miPrice);
    
    //display the result
    var divobj = document.getElementById('totalPrice');
    divobj.style.display='block';
    divobj.innerHTML = "Total "+cakePrice;

    var divobj = document.getElementById('miPrice');
    divobj.style.display='block';
    divobj.innerHTML = "Total "+miPrice;


    var divobj = document.getElementById('miDiff');
    divobj.style.display='block';
    divobj.innerHTML = "Total "+miDiff;

}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
    <title>Cake Form</title>
    <script type="text/javascript" src="js/formcalculations.js"></script>
    <link href="styles/cakeform.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="wrap">
        <form action="" id="cakeform" onsubmit="return false;">
        <div>
            <div class="cont_order">
               <fieldset>

                <label >Select your province</label>
                <label class='radiolabel'><input type="radio"  name="selectedcake" value="Round6" onclick="calculateTotal()" />SASKATCHEWAN</label><br/>
                <label class='radiolabel'><input type="radio"  name="selectedcake" value="Round8" onclick="calculateTotal()" />MANITOBA</label><br/>
                <label class='radiolabel'><input type="radio"  name="selectedcake" value="Round10" onclick="calculateTotal()" />ALBERTA</label><br/>
                <br/>

                <br/>
                <br>

                
                </br>
                
                <label >BILL</label>
         
                <select id="billing" name='billing' onchange="calculateTotal()">
                <option value="Billone">100</option>
                <option value="Billtwo">200</option>
                <option value="Billthree">300</option>
                <option value="Billfour">400</option>
                <option value="Billfive">500</option>
               </select>
                <br/>

                <label >TOTAL WITH UTILITY</label>
                <div id="totalPrice"></div>
                


                <label >TOTAL WITH MI</label>
                <div id="miPrice"></div>

                <label >TOTAL SAVED</label>
                <div id="miDiff"></div>
                <br>

                <span id="valBox"></span>
<input type="range" min="5" max="10" step="1" 
   oninput="showVal(this.value)" onchange="showVal(this.value)">
                </fieldset>
            </div>
            
        
           
        </div>  
       </form>
	</div><!--End of wrap-->
</body>
</html>

没有“范围”输入和 valNum (我创建正确吗？)功能，一切都正常。就像我正在做的那样:

function calculateTotal()
{
    var cakePrice = (getCakeSizePrice() + getBillingPrice());
}

但是当我添加 newVal 函数时，chrome 显示总计:NaN;

function calculateTotal()
{
    var cakePrice = (getCakeSizePrice() + getBillingPrice()+newVal();
}

最佳答案

everything is working without "range" input and valNum (do i created it correctly?) function....

var cakePrice = (getCakeSizePrice() + getBillingPrice()) * valNum();

-valNum() func 不返回任何值。

but when I'm adding newVal function chrome showing me total: NaN;

var cakePrice = (getCakeSizePrice() + getBillingPrice()+newVal();

-我在代码中没有看到 newVal() 函数。有一个newVal变量，但它的作用域仅限于fucntion。

<小时/>

定义一个全局变量，然后定义函数如下:

var valNum;
function valNum(){
    valNum = document.getElementById("valBox")
}

并使用valNum，如下所示:

var cakePrice = (parseFloat(getCakeSizePrice()) + parseFloat(getBillingPrice())) * parseFloat(valNum);

关于javascript - 无法将输入范围值正确连接到 JavaScript 计算，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37626223/

文章推荐： javascript - 无法使用 JSZip 下载文件夹

文章推荐： javascript - 让搜索框在输入时获取页面

文章推荐： javascript - 删除父 div 悬停上的按钮类

文章推荐： c++ - 是什么导致我收到链接器错误 LNK2019？

android - 接到 voip 电话时如何将 Activity 带到前台？
我正在开发一个 voip 调用应用程序。我需要做的是在接到来电时将 Activity 带到前台。我在应用程序中使用 Twilio，并在收到推送消息时开始调用。问题是我试图在接到任何电话时显示 Act

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 无法将输入范围值正确连接到 JavaScript 计算