堆栈内存溢出
  简体   繁体   English

在JS中创建计算器并得到未定义的信息。 初级程序员

[英]Creating a calculator in JS and getting an undefined. Beginner Programer

 原文  2013-04-02 15:15:08  4   3    javascript/ calculator

问题描述

So I'm creating a calculator that does a pretty simple calculation. 因此，我正在创建一个进行简单计算的计算器。 Just some simple math. 只是一些简单的数学。 However there is one property that has a lot of different variables. 但是，有一个属性具有很多不同的变量。 The original program was written in jQuery so I had to redo the properties to work with our sites regular Javascript framework. 原始程序是用jQuery编写的，因此我必须重做属性才能与我们的站点常规Javascript框架一起使用。 I think it's a problem with one of the declared variables. 我认为这是声明的变量之一的问题。 If you run the program, you get the answer "undefined" like it's missing a variable. 如果运行该程序，则会得到答案“ undefined”，因为它缺少变量。 

<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>

I'm gonna talk through this so hopefully you can understand how I coded this. 我要讲一下，希望您能理解我的编码方式。 The first var is a dropdown with 3 options. 第一个变量是带有3个选项的下拉列表。 The second is a dropdown with 2 options that don't affect the calculation. 第二个是带有2个不影响计算的选项的下拉菜单。 The third is a user input that should work as long as the user inputs any number. 第三个是用户输入，只要用户输入任何数字，它就应该起作用。 The fourth is a length inputed by a user. 第四个是用户输入的长度。 Should also work with any number. 也应该与任何数字一起使用。 The fifth is where I think something is getting messed up. 第五点是我觉得有些混乱。 Its a number as well but it has to be one of the numbers in the if/else table. 它也是一个数字，但必须是if / else表中的数字之一。

Personally I think I didn't code the if/else stuff correctly. 我个人认为我没有正确编写if / else东西。 Should the var element for ohm contain the if/else statement? ohm的var元素是否应包含if / else语句？ Any help is greatly appreciated. 任何帮助是极大的赞赏。 I don't work in Javascript but my boss dumped this on me and said figure it out and this is where I ended up. 我不使用Javascript工作，但老板把它扔给我，说要弄清楚，这就是我最终的去向。

Thanks! 谢谢！

EDIT: HTML for those interested 编辑：那些感兴趣的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>

3 个解决方案

解决方案1
 0  2013-04-02 15:19:01

You are trying it getElementsByName() should be document.getElementsByName() like this: 您正在尝试将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;

Tested: 经过测试： 

<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>

Note that you're using "amp" when you are setting the value to the "amps" 请注意，将值设置为“安培”时，您使用的是“安培”

解决方案2
 0  2013-04-02 15:22:58

  1. You probably want to use getElementById instead of getElementsByName . 您可能要使用getElementById而不是getElementsByName 。 To use getElementById , you must have the id attribute defined in your html. 要使用getElementById ，您必须在html中定义id属性。

  2. You need to use the value property to get the value in the text box. 您需要使用value属性在文本框中获取值。 For example: 例如：

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

解决方案3
 0 已采纳  2013-04-02 16:21:53

There are many things to correct here. 这里有很多事情要纠正。

  • First, you want to get the value of all your inputs inside the print answer function. 首先，您要获取打印答案功能中所有输入的值。 Otherwise, your variables are initialized when the page is loaded, and the fields are not filled yet. 否则，将在加载页面时初始化变量，并且尚未填充字段。 move your code around like this 这样移动代码 

     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; }

  • Also, keep in mind that what you get from a field is a string, so you might have to convert the values to numbers there, using parseInt() or parseFloat(). 另外，请记住，从字段中获得的是字符串，因此您可能必须使用parseInt（）或parseFloat（）将值转换为数字。

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

  • Similarly, when you compare using ===, you want to compare objects of the same type. 同样，当使用===比较时，您想比较相同类型的对象。 So if awg is a string, as you get it from th HTML, compare it to a string: 因此，如果awg是字符串，则可以从HTML中获取它，并将其与字符串进行比较：

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

  • You can use document.getElementsByName or document.getElementById but bear in mind that the first returns a list, so you want to use [0], when the second one returns only one element. 您可以使用document.getElementsByName或document.getElementById但请记住，第一个返回一个列表，因此当第二个仅返回一个元素时，要使用[0]。 Also, for the second one to work, you will need you fields to have id set. 另外，为使第二个代码起作用，您将需要为字段设置ID。

  • Debug using the devtools and web console. 使用devtools和Web控制台进行调试。 Those are your best friends for this kind of debugging. 这些是您进行此类调试的最好的朋友。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 变量未定义。 JS - Variable is undefined. JS 初学者JS计算器 - Beginner JS calculator $$eval 返回未定义。 在 ppeteer js 中 - $$eval is returning undefined. In pupeteer js 无法解构“未定义”的属性“历史”，因为它未定义。 --React.js - Cannot destructure property 'history' of 'undefined' as it is undefined. --React.js 获取我的输出未定义。 谁能帮助我..？ - Getting my output as undefined. Can anyone help me with it..? 我一直不确定。 结果显示之前 - I keep getting undefined. Before the result shows 类型错误：无法读取未定义的属性“地图”。 反应 js - TypeError: Cannot read property 'map' of undefined. React js 得到一个的价值 <select>似乎未定义。 （Angular.js） - get value of a <select> appears undefined. (Angular.js) TypeError：无法读取未定义的属性“标题”。 Vue.js - TypeError: Cannot read property 'title' of undefined. Vue.js 无法读取未定义的属性“setAllowScrolling”。 与 fullPage.js 反应 - Cannot read property 'setAllowScrolling' of undefined. React with fullPage.js
相关标签
 
粤ICP备18138465号  © 2020-2025 STACKOOM.COM