если заявление не возвращает значение - PullRequest
Новая
       13

если заявление не возвращает значение

0 голосов
/ 21 октября 2019

Я пытаюсь сделать простой калькулятор цен на основе значения общей площади, рассчитанного с помощью полей ввода пользователя. Пока что большая часть всей программы работает правильно, за исключением оператора if, который будет определять цену, основанную на общей квине, не возвращает значение. На данный момент это только настройка для выбора Экономия первого выпадающего списка. Другие варианты выбора установлены на постоянное значение и работают как ожидалось. Любая помощь с этим очень ценится, так как я все еще новичок в 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 голосов
/ 22 октября 2019

Основная проблема заключается в том, что строки, которые устанавливают ваш новый массив и пытаются заполнить его, запускаются немедленно (до того, как у пользователя была возможность ввести какие-либо данные), и поэтому ваш массив пуст, когда вы пытаетесь получить информацию из него. it.

Перемещение строк, которые заполняют массивы (но не строк, которые объявляют массивы) в функцию 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>
...