先前声明的变量未传递值

时间：2019-01-03 20:32:18

标签： jquery html

我必须创建一个具有动态汇率的计算器。我在第65行和第66行附近遇到问题（搜索$（“ span.25X60sqftPrice”）。text（mmwtsq [0] * 2.29）;）使用先前声明的变量运行简单的计算（如果交换变量就可以使用一个数字）。我已经尝试过parseFloating和parseInt来确保传递了一个数值，但仍然什么也没有。通过console.log跟踪变量mmwtsq [0]的值使我为0。

//---------------------global helper functions

function getFloatValue(className) {
	var val = parseFloat($('input.' + className).val());
	if(val == NaN)
		val = 0;
	return val;
}

function setMMWCVars() {
	//---------------------Window Count Variables
	mmwc[0] = getFloatValue("25X60");
	mmwc[1] = getFloatValue("35X60");
	mmwc[2] = getFloatValue("60X48");
	mmwc[3] = getFloatValue("60X60");
	mmwc[4] = getFloatValue("30X84");
	mmwc[5] = getFloatValue("72X60");
	mmwc[6] = getFloatValue("24X72");
	mmwc[7] = getFloatValue("96X60");
	mmwc[8] = getFloatValue("96X72");
	mmwc[9] = getFloatValue("48X84");
}

function setMMWTSQVars() {
	mmwtsq[0] = (25*60*mmwc[0])/12;
	mmwtsq[1] = (35*60*mmwc[1])/12;
	mmwtsq[2] = (60*48*mmwc[2])/12;
	mmwtsq[3] = (60*60*mmwc[3])/12;
	mmwtsq[4] = (30*84*mmwc[4])/12;
	mmwtsq[5] = (72*60*mmwc[5])/12;
	mmwtsq[6] = (24*72*mmwc[6])/12;
	mmwtsq[7] = (96*60*mmwc[7])/12;
	mmwtsq[8] = (96*72*mmwc[8])/12;
	mmwtsq[9] = (48*84*mmwc[9])/12;
}

//---------------------Window Count Variables
var	mmwc = [10];
var mmwtsq = [10];


//----------------------Window Total SqFt Variables


$(document).ready(function(){

	function updateVars() {
		setMMWCVars();
		setMMWTSQVars();
//Get window & sqft totals
		$("span.totalWindowSqFt").text(mmwtsq[0] + mmwtsq[1] + mmwtsq[2] + mmwtsq[3] + mmwtsq[4] + mmwtsq[5] + mmwtsq[6] + mmwtsq[7] + mmwtsq[8] + mmwtsq[9]);
		$("span.totalWindowCount").text(mmwc[0] + mmwc[1] + mmwc[2] + mmwc[3] + mmwc[4] + mmwc[5] + mmwc[6] + mmwc[7] + mmwc[8] + mmwc[9]);

		
//show sqft & install price [header table and total prices]
		var totalSquareFootage = parseFloat($("span.totalWindowSqFt").text());
		var totalWindowCount = parseFloat($("span.totalWindowCount").text());
		
		if(totalSquareFootage < 99){
			$("span.25X60sqftPrice").text(mmwtsq[0]*2.29);
 //also tired something dirty to see if it would work like $("span.25X60sqftPrice").text(parseFloat($("span.total25X60").text())*2.29);
		}else{
			$("span.SqftRate").text(2.00);
		}
		
		
	}

	updateVars();

//calc total of sqft for window sizes & get total count / sq ft measurements of all window sizes;
	$("input.25X60").change(
		function(){
			updateVars();
			$("span.total25X60").text( mmwtsq[0] );
		});
});
<html>
<title>SqFt Blinds Calculator - 1" Metal Mini</title>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<script src="./MetalMini12-31.js" type="text/javascript"></script>
</head>
<body>

<table>

<tr>
<th>Window Width</th>
<th>Window Height</th>
<th>Blind Count</th>
<th>Total Sq Ft</th>
<th>Price Per Sq Ft<br /><span class="SqftRate">2.29</span></th>
<th>Install<br /><span class="installPrice">16.95</span></th>
</tr>

<tr>
<td>25</td>
<td>60</td>
<td><input class="25X60" value="0"></td>
<td><span class="total25X60" >0</span></td>
<td><span class="25X60sqftPrice">0</span></td>
<td><span class="25X60Install">0</span></td>
</tr>

<tr>
<td>35</td>
<td>60</td>
<td><input class="35X60" value="0"></td>
<td><span class="total35X60" >0</span></td>
<td><span class="35X60sqftPrice">0</span></td>
<td><span class="35X60Install">0</span></td>
</tr>

<tr>
<td>60</td>
<td>48</td>
<td><input class="60X48" value="0"></td>
<td><span class="total60X48" >0</span></td>
<td><span class="60X48sqftPrice">0</span></td>
<td><span class="60X48Install">0</span></td>
</tr>

<tr>
<td>60</td>
<td>60</td>
<td><input class="60X60" value="0"></td>
<td><span class="total60X60" >0</span></td>
<td><span class="60X60sqftPrice">0</span></td>
<td><span class="60X60Install">0</span></td>
</tr>

<tr>
<td>30</td>
<td>84</td>
<td><input class="30X84" value="0"></td>
<td><span class="total30X84" >0</span></td>
<td><span class="30X84sqftPrice">0</span></td>
<td><span class="30X84Install">0</span></td>
</tr>

<tr>
<td>72</td>
<td>60</td>
<td><input class="72X60" value="0"></td>
<td><span class="total72X60" >0</span></td>
<td><span class="72X60sqftPrice">0</span></td>
<td><span class="72X60Install">0</span></td>
</tr>


<tr>
<td>24</td>
<td>72</td>
<td><input class="24X72" value="0"></td>
<td><span class="total24X72" >0</span></td>
<td><span class="24X72sqftPrice">0</span></td>
<td><span class="24X72Install">0</span></td>
</tr>

<tr>
<td>96</td>
<td>60</td>
<td><input class="96X60" value="0"></td>
<td><span class="total96X60" >0</span></td>
<td><span class="96X60sqftPrice">0</span></td>
<td><span class="96X60Install">0</span></td>
</tr>

<tr>
<td>96</td>
<td>72</td>
<td><input class="96X72" value="0"></td>
<td><span class="total96X72" >0</span></td>
<td><span class="96X72sqftPrice">0</span></td>
<td><span class="96X72Install">0</span></td>
</tr>

<tr>
<td>48</td>
<td>84</td>
<td><input class="48X84" value="0"></td>
<td><span class="total48X84" >0</span></td>
<td><span class="48X84sqftPrice">0</span></td>
<td><span class="48X84Install">0</span></td>
</tr>

<tr>
<td></td>
<td></td>
<td><span class="totalWindowCount">0</span></td>
<td><span class="totalWindowSqFt" >0</span></td>
<td><span class="totalBlindCost">0</span></td>
<td><span class="totalInstallCost">0</span></td>
</tr>

</table>


</body>
<footer>
</footer>

</html>

1 个答案:

答案 0 :(得分：0)

您可以执行一些潜在的改进：

//---------------------global helper functions

function getFloatValue(className) {
  var val = parseFloat($('input.' + className).val());
  if (val == NaN)
    val = 0;
  return val;
}

function setMMWCVars() {
  //---------------------Window Count Variables
  mmwc[0] = getFloatValue("25X60");
  mmwc[1] = getFloatValue("35X60");
  mmwc[2] = getFloatValue("60X48");
  mmwc[3] = getFloatValue("60X60");
  mmwc[4] = getFloatValue("30X84");
  mmwc[5] = getFloatValue("72X60");
  mmwc[6] = getFloatValue("24X72");
  mmwc[7] = getFloatValue("96X60");
  mmwc[8] = getFloatValue("96X72");
  mmwc[9] = getFloatValue("48X84");
}

function setMMWTSQVars() {
  mmwtsq[0] = (25 * 60 * mmwc[0]) / 12;
  mmwtsq[1] = (35 * 60 * mmwc[1]) / 12;
  mmwtsq[2] = (60 * 48 * mmwc[2]) / 12;
  mmwtsq[3] = (60 * 60 * mmwc[3]) / 12;
  mmwtsq[4] = (30 * 84 * mmwc[4]) / 12;
  mmwtsq[5] = (72 * 60 * mmwc[5]) / 12;
  mmwtsq[6] = (24 * 72 * mmwc[6]) / 12;
  mmwtsq[7] = (96 * 60 * mmwc[7]) / 12;
  mmwtsq[8] = (96 * 72 * mmwc[8]) / 12;
  mmwtsq[9] = (48 * 84 * mmwc[9]) / 12;
}

function updatePrices(sqft, price) {
  $("thead span.SqftRate").html(sqft);
  $("thead span.installPrice").html(price);
}

function calcTotal(q, c) {
  return t = q * c || 0;
}

function getTotals() {
  var c = 0,
    sqft = 0,
    p = 0,
    i = 0,
    cls;
  $("tbody tr:not(:last)").each(function() {
    cls = $("input", this).attr("class");
    if ($("input", this).val() != "0") {
      c = c + parseInt($("input", this).val());
      sqft = sqft + parseInt($(".total" + cls, this).text().trim());
      p = p + parseFloat($("." + cls + "sqftPrice", this).text().trim());
      i = i + parseFloat($("." + cls + "Install", this).text().trim());
    }
    console.log("Totals", cls, c, sqft, p, i);
  });
  $(".totalWindowCount").html(c);
  $(".totalWindowSqFt").html(sqft);
  $(".totalBlindCost").html(p);
  $(".totalInstallCost").html(i);
}

//---------------------Window Count Variables
var mmwc = [10];
var mmwtsq = [10];


//----------------------Window Total SqFt Variables


$(function() {
  function updateVars() {
    setMMWCVars();
    setMMWTSQVars();

    $("tbody tr").each(function(i, el) {
      var c = $("input", el).attr("class");
      var t = mmwtsq[i];
      var p = 0;
      switch (true) {
        case t < 99:
          p = t * 2.29;
          break;
        case t < 999:
          p = t * 2.29;
          break;
        case t < 9999:
          p = t * 2.29;
          break;
      }
      var install = (p == 0 ? 0 : p + 16.95);
      $(".total" + c, el).html(t);
      $("." + c + "sqftPrice", el).html(p);
      $("." + c + "Install", el).html(install);
    });
    getTotals();
  }

  updateVars();

  //calc total of sqft for window sizes & get total count / sq ft measurements of all window sizes;

  $("input").change(function() {
    var c = $(this).attr("class");
    var i = $(this).parents("tr").index();
    console.log(c, i);
    updateVars();
    $("span.total" + c).text(mmwtsq[i]);
  });
});
table tbody input {
  width: 4em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <thead>
    <tr>
      <th>Window Width</th>
      <th>Window Height</th>
      <th>Blind Count</th>
      <th>Total Sq Ft</th>
      <th>Price Per Sq Ft<br /><span class="SqftRate">2.29</span></th>
      <th>Install<br /><span class="installPrice">16.95</span></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>25</td>
      <td>60</td>
      <td><input class="25X60" value="0"></td>
      <td><span class="total25X60">0</span></td>
      <td><span class="25X60sqftPrice">0</span></td>
      <td><span class="25X60Install">0</span></td>
    </tr>

    <tr>
      <td>35</td>
      <td>60</td>
      <td><input class="35X60" value="0"></td>
      <td><span class="total35X60">0</span></td>
      <td><span class="35X60sqftPrice">0</span></td>
      <td><span class="35X60Install">0</span></td>
    </tr>

    <tr>
      <td>60</td>
      <td>48</td>
      <td><input class="60X48" value="0"></td>
      <td><span class="total60X48">0</span></td>
      <td><span class="60X48sqftPrice">0</span></td>
      <td><span class="60X48Install">0</span></td>
    </tr>

    <tr>
      <td>60</td>
      <td>60</td>
      <td><input class="60X60" value="0"></td>
      <td><span class="total60X60">0</span></td>
      <td><span class="60X60sqftPrice">0</span></td>
      <td><span class="60X60Install">0</span></td>
    </tr>

    <tr>
      <td>30</td>
      <td>84</td>
      <td><input class="30X84" value="0"></td>
      <td><span class="total30X84">0</span></td>
      <td><span class="30X84sqftPrice">0</span></td>
      <td><span class="30X84Install">0</span></td>
    </tr>

    <tr>
      <td>72</td>
      <td>60</td>
      <td><input class="72X60" value="0"></td>
      <td><span class="total72X60">0</span></td>
      <td><span class="72X60sqftPrice">0</span></td>
      <td><span class="72X60Install">0</span></td>
    </tr>


    <tr>
      <td>24</td>
      <td>72</td>
      <td><input class="24X72" value="0"></td>
      <td><span class="total24X72">0</span></td>
      <td><span class="24X72sqftPrice">0</span></td>
      <td><span class="24X72Install">0</span></td>
    </tr>

    <tr>
      <td>96</td>
      <td>60</td>
      <td><input class="96X60" value="0"></td>
      <td><span class="total96X60">0</span></td>
      <td><span class="96X60sqftPrice">0</span></td>
      <td><span class="96X60Install">0</span></td>
    </tr>

    <tr>
      <td>96</td>
      <td>72</td>
      <td><input class="96X72" value="0"></td>
      <td><span class="total96X72">0</span></td>
      <td><span class="96X72sqftPrice">0</span></td>
      <td><span class="96X72Install">0</span></td>
    </tr>

    <tr>
      <td>48</td>
      <td>84</td>
      <td><input class="48X84" value="0"></td>
      <td><span class="total48X84">0</span></td>
      <td><span class="48X84sqftPrice">0</span></td>
      <td><span class="48X84Install">0</span></td>
    </tr>

    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td><span class="totalWindowCount">0</span></td>
      <td><span class="totalWindowSqFt">0</span></td>
      <td><span class="totalBlindCost">0</span></td>
      <td><span class="totalInstallCost">0</span></td>
    </tr>
  </tbody>
</table>

我怀疑您正在使这一过程变得复杂得多。

希望有帮助。

相关问题
最新问题