1

所以我正在创建一个可以进行非常简单计算的计算器。只是一些简单的数学。然而，有一个属性有很多不同的变量。原始程序是用 jQuery 编写的，所以我必须重做属性才能使用我们网站的常规 Javascript 框架。我认为这是声明的变量之一的问题。如果你运行程序，你会得到“未定义”的答案，就像它缺少一个变量一样。

<script type="text/javascript">
var volts = document.getElementById("voltDrop_volts")[0].value;
var acdc = document.getElementById("voltDrop_acdc")[0].value;
var amps = document.getElementById("voltDrop_amps")[0].value;
var length = document.getElementById("voltDrop_ft")[0].value;
var awg = document.getElementById("voltDrop_awg")[0].value;
var ohm = 0;

if (awg === 36) { ohm = 371.0; }
else if (awg === 34) { ohm = 237.0; }
else if (awg === 32) { ohm = 164.0; }
else if (awg === 30) { ohm = 103.0; }
else if (awg === 28) { ohm = 64.9; }
else if (awg === 26) { ohm = 37.3; }
else if (awg === 24) { ohm = 23.3; }
else if (awg === 22) { ohm = 14.7; }
else if (awg === 20) { ohm = 10.0; }
else if (awg === 18) { ohm = 6.4; }
else if (awg === 16) { ohm = 4.0; }
else if (awg === 14) { ohm = 2.5; }
else if (awg === 12) { ohm = 1.6; }
else if (awg === 10) { ohm = 1.1; }
else if (awg === 8) { ohm = .62; }
else if (awg === 6) { ohm = .40; }
else if (awg === 4) { ohm = .24; }
else if (awg === 2) { ohm = .16; }
else if (awg === 1) { ohm = .13; }
else if (awg === '1/0') { ohm = .096; }
else if (awg === '2/0') { ohm = .077; }
else if (awg === '3/0') { ohm = .062; }
else if (awg === '4/0') { ohm = .049; }
else { msg = "Error"; }

var vDrop = ((ohm * 2) * (length / 1000) * amps);
var vFinal = (volts - vDrop);

function formReset()
    {
    document.getElementById("form1").reset();
    }
function printAnswer()
    {
        document.getElementById("theAnswer").innerHTML = vFinal;
    }
</script>

我将讨论这个，希望你能理解我是如何编码的。第一个 var 是一个包含 3 个选项的下拉列表。第二个是带有 2 个不影响计算的选项的下拉菜单。第三个是用户输入，只要用户输入任何数字，它就应该起作用。四是用户输入的长度。也应该使用任何数字。第五是我认为有些事情搞砸了。它也是一个数字，但它必须是 if/else 表中的数字之一。

就我个人而言，我认为我没有正确编码 if/else 的东西。var元素是否应该ohm包含 if/else 语句？任何帮助是极大的赞赏。我不使用 Javascript 工作，但我的老板把这个甩给了我，并说弄清楚，这就是我结束的地方。

谢谢！

编辑：感兴趣的人的HTML

  <body>
<h1>Voltage Drop Calculator Tool</h1> 
<form id=form1>
<div class="calculator-wrapper" id="voltageDropCalc" style="margin: 10px 0 20px 20px; padding: 15px;"><!-- BEGIN Calc wrapper --> 

<p>1. Initial Voltage</p>

<select name="voltDrop_volts" size="1" style="padding: 3px;"> <option>Choose...</option> <option value="12">12 Volt</option> <option value="24">24 Volt</option> </select>
<p>2. AC / DC</p>
<select class="sized" name="voltDrop_acdc" size="1" style="padding: 3px;"> <option selected="selected" value="dc">DC</option> <option value="ac">AC</option> </select>

<p class="field-label field-label-right">3. Current (Amps)</p>

<input align="bottom" class="sized" name="voltDrop_amps" size="15" style="padding: 3px;" type="text" />

<p class="field-label field-label-right">4. Cable Length (ft)</p>

<input align="bottom" class="sized" name="voltDrop_ft" size="15" style="padding: 3px;" type="text" />

<p class="field-label field-label-right">5. Cable Gauge (AWG)</p>
<input align="bottom" class="sized" name="voltDrop_awg" size="15" style="padding: 3px;" type="text" />

<p><a href="#" id="voltageDropSubmit" style="text-decoration: none;" onclick="printAnswer()"><button type="button">Calculate</button></a> &nbsp;&nbsp;&nbsp;<a class="clearBtn" href="#" style="text-decoration: none;"><button type="button" onclick="formReset()">Cancel</button></a></p>
<div class="results-box">
<p id="theAnswer"style="margin: 10px 0;">&nbsp;</p>
</div>
</form>
<p>Note: Industry standard is a voltage drop of no greater than 10%.</p>


<div class="errorMsg"></div>
<!-- displays error messages to user -->
</div>
<!-- END Calc wrapper -->
</body>
4

3 回答 3

0

你正在尝试它 getElementsByName() 应该是 document.getElementsByName() 像这样：

var volts = document.getElementsByName("voltDrop_volts")[0].value;
var acdc = document.getElementsByName("voltDrop_acdc")[0].value;
var amps = document.getElementsByName("voltDrop_amps")[0].value;
var length = document.getElementsByName("voltDrop_ft")[0].value;
var awg = document.getElementsByName("voltDrop_awg")[0].value;

测试：

<body>
<h1>Voltage Drop Calculator Tool</h1> 
<form id=form1>
<div class="calculator-wrapper" id="voltageDropCalc" style="margin: 10px 0 20px 20px; padding: 15px;"><!-- BEGIN Calc wrapper --> 

<p>1. Initial Voltage</p>

<select name="voltDrop_volts" size="1" style="padding: 3px;"> <option value="0">Choose...</option> <option value="12">12 Volt</option> <option value="24">24 Volt</option> </select>
<p>2. AC / DC</p>
<select class="sized" name="voltDrop_acdc" size="1" style="padding: 3px;"> <option selected="selected" value="dc">DC</option> <option value="ac">AC</option> </select>

<p class="field-label field-label-right">3. Current (Amps)</p>

<input align="bottom" class="sized" name="voltDrop_amps" size="15" style="padding: 3px;" type="text" />

<p class="field-label field-label-right">4. Cable Length (ft)</p>

<input align="bottom" class="sized" name="voltDrop_ft" size="15" style="padding: 3px;" type="text" />

<p class="field-label field-label-right">5. Cable Gauge (AWG)</p>
<input align="bottom" class="sized" name="voltDrop_awg" size="15" style="padding: 3px;" type="text" />

<p><a href="#" id="voltageDropSubmit" style="text-decoration: none;" onclick="printAnswer()"><button type="button">Calculate</button></a> &nbsp;&nbsp;&nbsp;<a class="clearBtn" href="#" style="text-decoration: none;"><button type="button" onclick="formReset()">Cancel</button></a></p>
<div class="results-box">
<p id="theAnswer"style="margin: 10px 0;">&nbsp;</p>
</div>
</form>
<p>Note: Industry standard is a voltage drop of no greater than 10%.</p>


<div class="errorMsg"></div>
<!-- displays error messages to user -->
</div>
<!-- END Calc wrapper -->
<script type="text/javascript">
  var volts = 0;
  var acdc = 0;
  var amps = 0;
  var length = 0;
  var awg = 0;
  var amp = 0;
 volts = document.getElementsByName("voltDrop_volts")[0].value;
 acdc = document.getElementsByName("voltDrop_acdc")[0].value;
 amps = document.getElementsByName("voltDrop_amps")[0].value;
 length = document.getElementsByName("voltDrop_ft")[0].value;
 awg = document.getElementsByName("voltDrop_awg")[0].value;
var ohm = 0;

if (awg === 36) { ohm = 371.0; }
else if (awg === 34) { ohm = 237.0; }
else if (awg === 32) { ohm = 164.0; }
else if (awg === 30) { ohm = 103.0; }
else if (awg === 28) { ohm = 64.9; }
else if (awg === 26) { ohm = 37.3; }
else if (awg === 24) { ohm = 23.3; }
else if (awg === 22) { ohm = 14.7; }
else if (awg === 20) { ohm = 10.0; }
else if (awg === 18) { ohm = 6.4; }
else if (awg === 16) { ohm = 4.0; }
else if (awg === 14) { ohm = 2.5; }
else if (awg === 12) { ohm = 1.6; }
else if (awg === 10) { ohm = 1.1; }
else if (awg === 8) { ohm = .62; }
else if (awg === 6) { ohm = .40; }
else if (awg === 4) { ohm = .24; }
else if (awg === 2) { ohm = .16; }
else if (awg === 1) { ohm = .13; }
else if (awg === '1/0') { ohm = .096; }
else if (awg === '2/0') { ohm = .077; }
else if (awg === '3/0') { ohm = .062; }
else if (awg === '4/0') { ohm = .049; }
else { msg = "Error"; }

var vDrop = ((ohm * 2) * (length / 1000) * amp);
var vFinal = (volts - vDrop);

function formReset()
    {
    document.getElementById("form1").reset();
    }
function printAnswer()
    {
        document.getElementById("theAnswer").innerHTML = vFinal;
    }
</script>
</body>

请注意，当您将值设置为“amps”时，您使用的是“amp”

于 2013-04-02T15:19:01.623 回答
0

  1. 您可能想使用getElementById而不是getElementsByName. 要使用getElementById，您必须id在 html 中定义该属性。

  2. 您需要使用该value属性来获取文本框中的值。例如：

    var myValue = document.getElementById("myElement").value;

于 2013-04-02T15:22:58.477 回答
0

这里有很多需要纠正的地方。

  • 首先，您想在 print answer 函数中获取所有输入的值。否则，您的变量会在页面加载时初始化，并且字段尚未填充。像这样移动你的代码

    function printAnswer()
{
var volts = document.getElementsByName("voltDrop_volts")[0].value;
var acdc = document.getElementsByName("voltDrop_acdc")[0].value;
var amps = document.getElementsByName("voltDrop_amps")[0].value;
var length = parseFloat(document.getElementsByName("voltDrop_ft")[0].value);
var awg = document.getElementsByName("voltDrop_awg")[0].value;
var ohm = 0;
if (awg === 36) { ohm = 371.0; }
else if (awg === 34) { ohm = 237.0; }
else if (awg === 32) { ohm = 164.0; }
else if (awg === 30) { ohm = 103.0; }
else if (awg === 28) { ohm = 64.9; }
else if (awg === 26) { ohm = 37.3; }
else if (awg === 24) { ohm = 23.3; }
else if (awg === 22) { ohm = 14.7; }
else if (awg === 20) { ohm = 10.0; }
else if (awg === 18) { ohm = 6.4; }
else if (awg === 16) { ohm = 4.0; }
else if (awg === 14) { ohm = 2.5; }
else if (awg === 12) { ohm = 1.6; }
else if (awg === 10) { ohm = 1.1; }
else if (awg === 8) { ohm = .62; }
else if (awg === 6) { ohm = .40; }
else if (awg === 4) { ohm = .24; }
else if (awg === 2) { ohm = .16; }
else if (awg === 1) { ohm = .13; }
else if (awg === '1/0') { ohm = .096; }
else if (awg === '2/0') { ohm = .077; }
else if (awg === '3/0') { ohm = .062; }
else if (awg === '4/0') { ohm = .049; }
else { msg = "Error"; }
var vDrop = ((ohm * 2) * (length / 1000) * amps);
var vFinal = (volts - vDrop);
console.log(volts, acdc, amps, length, awg, ohm);
document.getElementById("theAnswer").innerHTML = vFinal;
}

  • 另外，请记住，您从字段中获得的是字符串，因此您可能必须使用 parseInt() 或 parseFloat() 将值转换为数字。

例如：var length = parseFloat(document.getElementsByName("voltDrop_ft")[0].value);

  • 同样，当您使用 === 进行比较时，您希望比较相同类型的对象。因此，如果awg是一个字符串，当您从 HTML 中获取它时，将其与字符串进行比较：

例如：if (awg === '6') { ... }

  • 您可以使用document.getElementsByNameordocument.getElementById但请记住，第一个返回一个列表，因此当第二个仅返回一个元素时，您想使用 [0]。此外，要使第二个工作，您将需要您的字段设置 id。

  • 使用 devtools 和 Web 控制台进行调试。这些是您进行此类调试的最佳朋友。

于 2013-04-02T16:21:53.837 回答