当选择新选项时动态刷新

我正在尝试使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; 
    } 
}

来源

2017-05-08 Martin Pecháček

你为什么不进而在使用jQuery选择？而你的'函数LengthConverter'没有执行或执行任何操作。 – Koen

你的设计不太好。你可以只有一个带'from'和'to'作为参数的'LengthConverter'函数。然后改变下拉电话的功能，给出新的'from'和'to'值 –

的是，执行转换的逻辑只执行你的问题在页面加载时。要在值更改时使其工作，您需要挂钩这些事件并在那里运行计算。

您还可以通过检索执行计算的函数中的所有必需值来简化逻辑。最后，您应该删除过时的on*事件属性。请使用不显眼的事件处理程序。试试这个：

$("#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>

来源

2017-05-08 09:51:58

谢谢！这是工作:) –

当选择新选项时动态刷新

回答

相关问题