if 语句没有返回值

if statement not returning a value

我正在尝试根据用户输入字段计算的总面积值制作一个简单的价格计算器。到目前为止,大部分程序都运行正确,除了将根据总 sqin 确定价格率的 if 语句,没有 return 值。在这一点上,它只是为第一个下拉菜单的经济选择设置。其他选择设置为恒定值并按预期​​工作。非常感谢任何帮助,因为我仍然是 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>

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

将填充数组的行(而不是声明数组的行)移动到 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>