Question

所以我正在创建一个计算器，它可以进行非常简单的计算。只是一些简单的数学。但是，有一个属性有很多不同的变量。原始程序是用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的{{1}}元素是否应包含if / else语句？任何帮助是极大的赞赏。我不是在Javascript中工作，但我的老板把这个放在我身上然后说出来，这就是我最终的结果。

谢谢！

编辑：感兴趣的人的HTML

ohm

Answer 1

你正在尝试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”

Answer 2

您可能希望使用getElementById代替getElementsByName。要使用getElementById，您必须在html中定义id属性。
您需要使用value属性来获取文本框中的值。例如：

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

Answer 3

这里有很多事情要纠正。

首先，您希望获得打印答案功能中所有输入的值。否则，在加载页面时会初始化变量，并且尚未填充字段。像这样移动你的代码

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.getElementsByName或document.getElementById但请记住，第一个返回列表，因此您希望使用[0]，而第二个只返回一个元素。此外，要使第二个工作，您需要使用字段来设置ID。
使用devtools和Web控制台进行调试。这些是你进行这种调试的最好朋友。

在JS中创建计算器并获得未定义的计算器。初学者程序员

3 个答案: