新しいオプションが選択されたときに動的にリフレッシュする

Question

長さ変換用のJavaScriptを作成しようとしています。私が解決できない問題はこれです。ユーザーがページをロードするときに問題はなく、JavaScriptが動作します。しかし、別のオプションを選択すると、centimetersはまだmetersと計算されます。ここで

は、テストへのアドレスです：http://martinpechacek.cz/convert/

<h2>Lenght</h2> 
<p> 
    <input id="input" type="number" placeholder="" oninput="LengthConverter(this.value)" onchange="LengthConverter(this.value)"> 

    From: 
    <select id="from" name="from"> 
    <option id="from_meter" value="meter">meter</option> 
    <option id="from_centimeter" value="centimeter">centimeter</option> 
    </select> 

    To: 
    <select id="to" name="to"> 
    <option id="to_kilometer" value="kilometer">kilometer</option> 
    </select> 
</p> 
<p>Result: <span id="result"></span></p> 

var idfrom = "meter"; 
var idto = "kilometer"; 

$("#from").change(function() { 
    idfrom = $("#from").val(); 
}); 

$("#to").change(function() { 
    idto = $("#to").val(); 
}); 

if (document.getElementById('from').value == "meter" && document.getElementById('to').value == "kilometer") { 
    function LengthConverter(valNum) { 
    document.getElementById("result").innerHTML = valNum/1000; 
    } 
} 

if (document.getElementById('from').value == "centimeter" && document.getElementById('to').value == "kilometer") { 
    function LengthConverter(valNum) { 
    document.getElementById("result").innerHTML = valNum/100000; 
    } 
} 

Answer 1

あなたの問題は、ページのロード時の変換を行うロジックをのみ実行されるということです。値が変更されたときに動作させるには、それらのイベントにフックして計算を実行する必要があります。

また、計算を行う関数内で必要な値をすべて取得することで、ロジックを単純化することもできます。最後に、旧式のon*イベント属性を削除する必要があります。代わりに控えめなイベントハンドラを使用してください。あなたは結果的にjQueryのセレクタを使用していないのはなぜ

$("#from, #to").on('change', calculate); 
 
$('#input').on('input', calculate); 
 
calculate(); 
 

 
function calculate() { 
 
    var divisor = $('#from').val() == 'meter' ? 1000 : 100000; 
 
    $('#result').text($('#input').val()/divisor); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-md-8 offset-md-2 jumbotron"> 
 
    <h2>Lenght</h2> 
 
    <p> 
 
    <input id="input" type="number" placeholder=""> From: 
 

 
    <select id="from" name="from"> 
 
     <option id="from_meter" value="meter">meter</option> 
 
     <option id="from_centimeter" value="centimeter">centimeter</option> 
 
    </select> To: 
 
    <select id="to" name="to"> 
 
     <option id="to_kilometer" value="kilometer">kilometer</option> 
 
    </select> 
 
    </p> 
 
    <p>Result: <span id="result"></span></p> 
 
</div>