javascript関数でドロップダウン選択を渡そうとしています

私のフォームがうまく機能しなくなりました。私はそれを取得しようとするので、私は "前と後ろのインク"の異なる数を選択すると、それはrunRateの値を返しますが、それは "間違って"私が選択した番号に関係なく来て続けます！私が間違っていることを知っていますか？ありがとう！javascript関数でドロップダウン選択を渡そうとしています

<html> 
 

 
<head> 
 
</head> 
 

 
<body> 
 
    <form> 
 
    <div> 
 
     <select id="ink_front"> 
 
     <option value="1">1</option> 
 
     <option value="2">2</option> 
 
     <option value="3">3</option> 
 
     <option value="4">4</option> 
 
     </select> 
 
     <select id="ink_back"> 
 
     <option value="0">0</option> 
 
     <option value="1">1</option> 
 
     <option value="2">2</option> 
 
     <option value="3">3</option> 
 
     <option value="4">4</option> 
 
     </select> 
 
    </div> 
 

 

 
    result 
 
    <INPUT type="text" id="result" readonly style="color:red;" /> 
 

 
    <button onclick="calculate()">submit</button> 
 
    </form> 
 
</body> 
 

 
<script type="text/javascript"> 
 
    var front_inks = document.getElementById("ink_front"); 
 
    var ink_front = front_inks.options[front_inks.selectedIndex].value; 
 

 
    var back_inks = document.getElementById("ink_back"); 
 
    var ink_back = back_inks.options[back_inks.selectedIndex].value; 
 

 
    front_inks = parseInt(front_inks); 
 
    back_inks = parseInt(back_inks); 
 

 
    function runRate(front_ink, back_ink) { 
 
    if (front_ink == 1 && back_ink == 0) { 
 
     var runRate = 6400; 
 

 
    } else if (front_ink == 2 && back_ink == 0) { 
 
     var runRate = 3200; 
 

 
    } else if (front_ink == 3 && back_ink == 0) { 
 
     var runRate = 2135; 
 

 
    } else if (front_ink == 4 && back_ink == 0) { 
 
     var runRate = 1600; 
 

 
    } else if (front_ink == 1 && back_ink == 1) { 
 
     var runRate = 3200; 
 
    } else if (front_ink == 2 && back_ink == 1) { 
 
     var runRate = 2135; 
 
    } else if (front_ink == 3 && back_ink == 1) { 
 
     var runRate = 1600; 
 
    } else if (front_ink == 4 && back_ink == 1) { 
 
     var runRate = 1280; 
 
    } else if (front_ink == 1 && back_ink == 2) { 
 
     var runRate = 2135; 
 
    } else if (front_ink == 2 && back_ink == 2) { 
 
     var runRate = 1600; 
 
    } else if (front_ink == 3 && back_ink == 2) { 
 
     var runRate = 1280; 
 
    } else if (front_ink == 4 && back_ink == 2) { 
 
     var runRate = 1070; 
 
    } else if (front_ink == 1 && back_ink == 3) { 
 
     var runRate = 1600; 
 
    } else if (front_ink == 2 && back_ink == 3) { 
 
     var runRate = 1280; 
 
    } else if (front_ink == 3 && back_ink == 3) { 
 
     var runRate = 1070; 
 
    } else if (front_ink == 4 && back_ink == 3) { 
 
     var runRate = 915; 
 
    } else if (front_ink == 1 && back_ink == 4) { 
 
     var runRate = 1280; 
 
    } else if (front_ink == 2 && back_ink == 4) { 
 
     var runRate = 1070; 
 
    } else if (front_ink == 3 && back_ink == 4) { 
 
     var runRate = 915; 
 
    } else if (front_ink == 4 && back_ink == 4) { 
 
     var runRate = 800; 
 
    } else { 
 
     var runRate = "wrong"; 
 
    } 
 

 
    return runRate; 
 
    } 
 

 

 

 
    function calculate() { 
 

 
    var run_rate = runRate(front_inks, back_inks); 
 

 
    document.getElementById("result").value = run_rate; 
 
    } 
 
</script> 
 

 
</html>

出典

2016-04-15 sam_miller

編集：答えみんなにありがとうございました！これは私が多くの、大いに感謝多くを助けた:) –

問題は、あなたが既にfrint_inksとback_inks右のスクリプトのロード場合の値を取得しているです。この時点でまだ値は選択されていません...あなたの変数には値がないので、if、else if文のどれも動作しません。そして、あなたは常にelseのコード部分を実行します。

ソリューション：あなたの計算関数内自分のfront_inksとback_inks場合の値を取得し、その後runRate関数に渡します。また、intへの解析中に間違った変数で遊んでいました。

以下のように、これらのコード行をcalculate関数の先頭に挿入します。ここで

function calculate() { 

    var front_inks = document.getElementById("ink_front"); 
    var ink_front = front_inks.options[front_inks.selectedIndex].value; 

    var back_inks = document.getElementById("ink_back"); 
    var ink_back = back_inks.options[back_inks.selectedIndex].value; 

    front_inks = parseInt(ink_front); 
    back_inks = parseInt(ink_back); 
    var run_rate = runRate(front_inks, back_inks); 
    document.getElementById("result").value = run_rate; 

    }

出典

2016-04-15 19:11:54

誰かが私のコードブロックをフォーマットしてください... –

ロジャー、レディー！フォーマット済み。 – zatziky

あまりにもZatzikyありがとうございます...あなたはまだ関数の最初の行を見逃して...あなたはそれを世話してくださいできます –

は、あなたのコードスニペットの修正plunkerです：https://plnkr.co/edit/DfK5mNlXG3CaD8ke300a?p=preview

この新しいcalculate()：

function calculate() { 
    var front_inks = document.getElementById("ink_front"); 
    var ink_front = front_inks.options[front_inks.selectedIndex].value; 
    var back_inks = document.getElementById("ink_back"); 
    var ink_back = back_inks.options[back_inks.selectedIndex].value; 

    front_inks = parseInt(front_inks); 
    back_inks = parseInt(back_inks); 

    var run_rate = runRate(ink_front, ink_back); 

    document.getElementById("result").value = run_rate; 
    }

あなたの元のコードには2つの主な相違点があります。

は、 runRate()はink_front/で実行されます代わりにfront_inks/back_inksの210あなたはcalculate()
ink_front/ink_backに数値を予想していたので、彼らはあなたが選択で選択した値を持つことができるように、ここで解決されます。

出典

2016-04-15 19:11:56 zatziky

あなたは、間違った2つの値でparseInt()を呼び出していました。また、ページが読み込まれるとすぐに値を割り当てていたので、変数の初期化と割り当てをcalculate()に移しました。今は期待どおりに動作します。

<html> 
 

 
<head> 
 
</head> 
 

 
<body> 
 
    <form> 
 
    <div> 
 
     <select id="ink_front"> 
 
     <option value="1">1</option> 
 
     <option value="2">2</option> 
 
     <option value="3">3</option> 
 
     <option value="4">4</option> 
 
     </select> 
 
     <select id="ink_back"> 
 
     <option value="0">0</option> 
 
     <option value="1">1</option> 
 
     <option value="2">2</option> 
 
     <option value="3">3</option> 
 
     <option value="4">4</option> 
 
     </select> 
 
    </div> 
 

 

 
    result 
 
    <INPUT type="text" id="result" readonly style="color:red;" /> 
 

 
    <button onclick="calculate()">submit</button> 
 
    </form> 
 
</body> 
 

 
<script type="text/javascript"> 
 
    function runRate(front_ink, back_ink) { 
 
    if (front_ink == 1 && back_ink == 0) { 
 
     var runRate = 6400; 
 

 
    } else if (front_ink == 2 && back_ink == 0) { 
 
     var runRate = 3200; 
 

 
    } else if (front_ink == 3 && back_ink == 0) { 
 
     var runRate = 2135; 
 

 
    } else if (front_ink == 4 && back_ink == 0) { 
 
     var runRate = 1600; 
 

 
    } else if (front_ink == 1 && back_ink == 1) { 
 
     var runRate = 3200; 
 
    } else if (front_ink == 2 && back_ink == 1) { 
 
     var runRate = 2135; 
 
    } else if (front_ink == 3 && back_ink == 1) { 
 
     var runRate = 1600; 
 
    } else if (front_ink == 4 && back_ink == 1) { 
 
     var runRate = 1280; 
 
    } else if (front_ink == 1 && back_ink == 2) { 
 
     var runRate = 2135; 
 
    } else if (front_ink == 2 && back_ink == 2) { 
 
     var runRate = 1600; 
 
    } else if (front_ink == 3 && back_ink == 2) { 
 
     var runRate = 1280; 
 
    } else if (front_ink == 4 && back_ink == 2) { 
 
     var runRate = 1070; 
 
    } else if (front_ink == 1 && back_ink == 3) { 
 
     var runRate = 1600; 
 
    } else if (front_ink == 2 && back_ink == 3) { 
 
     var runRate = 1280; 
 
    } else if (front_ink == 3 && back_ink == 3) { 
 
     var runRate = 1070; 
 
    } else if (front_ink == 4 && back_ink == 3) { 
 
     var runRate = 915; 
 
    } else if (front_ink == 1 && back_ink == 4) { 
 
     var runRate = 1280; 
 
    } else if (front_ink == 2 && back_ink == 4) { 
 
     var runRate = 1070; 
 
    } else if (front_ink == 3 && back_ink == 4) { 
 
     var runRate = 915; 
 
    } else if (front_ink == 4 && back_ink == 4) { 
 
     var runRate = 800; 
 
    } else { 
 
     var runRate = "wrong"; 
 
    } 
 

 
    return runRate; 
 
    } 
 

 

 

 
    function calculate() { 
 

 
    var front_inks = document.getElementById("ink_front"); 
 
    var ink_front = front_inks.options[front_inks.selectedIndex].value; 
 

 
    var back_inks = document.getElementById("ink_back"); 
 
    var ink_back = back_inks.options[back_inks.selectedIndex].value; 
 

 
    front_inks = parseInt(ink_front); 
 
    back_inks = parseInt(ink_back); 
 
    
 
    var run_rate = runRate(front_inks, back_inks); 
 

 
    document.getElementById("result").value = run_rate; 
 
    } 
 
</script> 
 

 
</html>

出典

2016-04-15 19:12:03 Wold

javascript関数でドロップダウン選択を渡そうとしています

答えて

関連する問題