1

そこで、非常に単純な計算を行う電卓を作成しています。簡単な計算です。ただし、多くの異なる変数を持つ 1 つのプロパティがあります。元のプログラムは jQuery で書かれていたため、サイトの通常の Javascript フレームワークで動作するようにプロパティをやり直す必要がありました。宣言された変数の1つに問題があると思います。プログラムを実行すると、変数が欠落しているように「未定義」という答えが得られます。

<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 つ目は、計算に影響しない 2 つのオプションを含むドロップダウンです。3 つ目は、ユーザーが任意の数値を入力する限り機能するユーザー入力です。4 番目は、ユーザーが入力した長さです。また、任意の数で動作する必要があります。5番目は、何かがめちゃくちゃになっていると思うところです。これも数値ですが、if/else テーブルの数値の 1 つでなければなりません。

個人的には、if/else を正しくコーディングしていないと思います。のvar要素にohmif/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

ここで修正することがたくさんあります。

  • まず、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);

  • 同様に、=== を使用して比較する場合、同じタイプのオブジェクトを比較する必要があります。したがって、awgHTML から取得した文字列の場合は、文字列と比較します。

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

  • document.getElementsByNameorを使用できますdocument.getElementByIdが、最初はリストを返すため、2 番目が 1 つの要素のみを返す場合は [0] を使用することに注意してください。また、2 番目のものを機能させるには、フィールドに id を設定する必要があります。

  • devtools と Web コンソールを使用してデバッグします。これらは、この種のデバッグの親友です。

于 2013-04-02T16:21:53.837 に答える
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 に答える