if语句未返回值

时间：2019-10-21 20:53:26

标签： javascript if-statement calculator

我正在尝试根据用户输入字段计算出的总面积值制作一个简单的价格计算器。到目前为止，大多数程序都可以正常运行，除了if语句将基于总sqin确定价格率之外，不会返回任何值。此时，仅对第一个下拉列表的经济选择进行设置。其他选择设置为恒定值并按预期​​工作。非常感谢您提供任何帮助，因为我仍然是javascript新手。

/*eslint-env browser*/

var mytotalsq;

function getEconPrice() {
  var EconPrice = 0;
  if (mytotalsq <= 199) {
    return EconPrice.value = .40;
  }
  if (mytotalsq >= 200 && mytotalsq <= 299) {
    return EconPrice.value = .22;
  }
  return EconPrice;
}

var vinyl_prices = new Array();
vinyl_prices["None"] = 0;
vinyl_prices["Econ"] = getEconPrice();
vinyl_prices["Inter"] = .25;
vinyl_prices["HPerf"] = .35;
vinyl_prices["HiTack"] = .75;
vinyl_prices["Ref"] = .75;

var laminate_prices = new Array();
laminate_prices["None"] = 1;
laminate_prices["NoLam"] = 1;
laminate_prices["StanLam"] = 1.43;
laminate_prices["HPLam"] = 1.7;

function getStickerPrice() {
  var StickerPrice = 0;
  var theForm = document.forms["stickerform"];
  var selectedVinyl = theForm.elements["vinyl"];
  StickerPrice = vinyl_prices[selectedVinyl.value];
  return StickerPrice;
}

function getLaminatePrice() {
  var LaminatePrice = 0;
  var theForm = document.forms["stickerform"];
  var selectedLaminate = theForm.elements["laminate"];
  LaminatePrice = laminate_prices[selectedLaminate.value];
  return LaminatePrice;
}

function calculateTotal() {
  var myheight = document.getElementById('height').value;
  var mywidth = document.getElementById('width').value;
  var myquan = document.getElementById('quan').value;
  var totalsq = document.getElementById('totalsq');
  mytotalsq = mywidth * myheight * myquan;
  totalsq.value = mytotalsq;
  var stickerPrice = mytotalsq * getStickerPrice() * getLaminatePrice();
  var divobj = document.getElementById('totalPrice');
  divobj.style.display = 'block';
  divobj.innerHTML = "Total $" + stickerPrice;
}
<!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>RMSticker Pricing</title>
  <script type="text/javascript" src="js/stickercalc.js"></script>
  <link href="css/sticker.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div id="wrap">
    <form action="" id="stickerform" onsubmit="return false;">
      <div>
        <div class="cont_order">
          <fieldset>
            <legend>RMSticker</legend>
            <label>Height</label>
            <input id="height" type="text" />
            <label>Width</label>
            <input id="width" type="text" />
            <label>Quantity</label>
            <input id="quan" type="text" oninput="calculateTotal()" />
            <input id="totalsq" name="totalsq" type="text" />
            <br/><br/>

            <label>Vinyl</label>

            <select id="vinyl" name='vinyl' onchange="calculateTotal()">
              <option value="None">Select Vinyl</option>
              <option value="Econ">Economy</option>
              <option value="Inter">Intermediate</option>
              <option value="HPerf">High Performance</option>
              <option value="HiTack">High Tack</option>
              <option value="Ref">Reflective</option>
            </select>
            <br/><br/>


            <label>Laminate</label>

            <select id="laminate" name='laminate' onchange="calculateTotal()">
              <option value="None">Select Laminate</option>
              <option value="NoLam">None</option>
              <option value="StanLam">Standard</option>
              <option value="HPLam">High Performance</option>
            </select>

            <br/><br/>

            <label>Select Finish</label>
            <label class='radiolabel'><input type="radio"  name="selectedfinish" value="Matte" onclick="calculateTotal()" />Matte</label><br/>
            <label class='radiolabel'><input type="radio"  name="selectedfinish" value="Satin" onclick="calculateTotal()" />Satin(Only available on laminated stickers)</label><br/>
            <label class='radiolabel'><input type="radio"  name="selectedfinish" value="Gloss" onclick="calculateTotal()" />Gloss</label><br/>



            <div id="totalPrice"></div>

          </fieldset>
        </div>

                       
      </div>
    </form>
  </div>
  <!--End of wrap-->

</body>

</html>

1 个答案:

答案 0 :(得分：0)

主要问题是设置新数组并尝试填充它的行会立即运行（在用户有机会输入任何数据之前），因此当您尝试从中获取信息时，数组为空它。

将填充数组的行（而不是声明数组的行）移到calculate函数中即可解决此问题。

/*eslint-env browser*/

var mytotalsq;

function getEconPrice() {
  var EconPrice = 0;
  if (mytotalsq <= 199) {
    return EconPrice.value = .40;
  }
  if (mytotalsq >= 200 && mytotalsq <= 299) {
    return EconPrice.value = .22;
  }
  return EconPrice;
}


function getStickerPrice() {
  var StickerPrice = 0;
  var theForm = document.forms["stickerform"];
  var selectedVinyl = theForm.elements["vinyl"];
  StickerPrice = vinyl_prices[selectedVinyl.value];
  return StickerPrice;
}

function getLaminatePrice() {
  var LaminatePrice = 0;
  var theForm = document.forms["stickerform"];
  var selectedLaminate = theForm.elements["laminate"];
  LaminatePrice = laminate_prices[selectedLaminate.value];
  return LaminatePrice;
}

var vinyl_prices = new Array();
var laminate_prices = new Array();

function calculateTotal() {


vinyl_prices["None"] = 0;
vinyl_prices["Econ"] = getEconPrice();
vinyl_prices["Inter"] = .25;
vinyl_prices["HPerf"] = .35;
vinyl_prices["HiTack"] = .75;
vinyl_prices["Ref"] = .75;


laminate_prices["None"] = 1;
laminate_prices["NoLam"] = 1;
laminate_prices["StanLam"] = 1.43;
laminate_prices["HPLam"] = 1.7;

  var myheight = document.getElementById('height').value;
  var mywidth = document.getElementById('width').value;
  var myquan = document.getElementById('quan').value;
  var totalsq = document.getElementById('totalsq');
  mytotalsq = mywidth * myheight * myquan;
  totalsq.value = mytotalsq;
  var stickerPrice = mytotalsq * getStickerPrice() * getLaminatePrice();
  var divobj = document.getElementById('totalPrice');
  divobj.style.display = 'block';
  divobj.innerHTML = "Total $" + stickerPrice;
}
<!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>RMSticker Pricing</title>
  <script type="text/javascript" src="js/stickercalc.js"></script>
  <link href="css/sticker.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div id="wrap">
    <form action="" id="stickerform" onsubmit="return false;">
      <div>
        <div class="cont_order">
          <fieldset>
            <legend>RMSticker</legend>
            <label>Height</label>
            <input id="height" type="text" />
            <label>Width</label>
            <input id="width" type="text" />
            <label>Quantity</label>
            <input id="quan" type="text" oninput="calculateTotal()" />
            <input id="totalsq" name="totalsq" type="text" />
            <br/><br/>

            <label>Vinyl</label>

            <select id="vinyl" name='vinyl' onchange="calculateTotal()">
              <option value="None">Select Vinyl</option>
              <option value="Econ">Economy</option>
              <option value="Inter">Intermediate</option>
              <option value="HPerf">High Performance</option>
              <option value="HiTack">High Tack</option>
              <option value="Ref">Reflective</option>
            </select>
            <br/><br/>


            <label>Laminate</label>

            <select id="laminate" name='laminate' onchange="calculateTotal()">
              <option value="None">Select Laminate</option>
              <option value="NoLam">None</option>
              <option value="StanLam">Standard</option>
              <option value="HPLam">High Performance</option>
            </select>

            <br/><br/>

            <label>Select Finish</label>
            <label class='radiolabel'><input type="radio"  name="selectedfinish" value="Matte" onclick="calculateTotal()" />Matte</label><br/>
            <label class='radiolabel'><input type="radio"  name="selectedfinish" value="Satin" onclick="calculateTotal()" />Satin(Only available on laminated stickers)</label><br/>
            <label class='radiolabel'><input type="radio"  name="selectedfinish" value="Gloss" onclick="calculateTotal()" />Gloss</label><br/>



            <div id="totalPrice"></div>

          </fieldset>
        </div>

                       
      </div>
    </form>
  </div>
  <!--End of wrap-->

</body>

</html>

相关问题
最新问题