Javascript選擇

Question

我有一個下拉列表「磅」，「克」，「千克」和「盎司」。我想要一個情況，當我選擇克來執行一個功能，當我在輸入字段中輸入一個值時，同樣當我選擇磅我想要另一個函數來執行，當我在輸入字段中輸入一個值，所以上。我已經嘗試過，但無法完成。

這裏是我的代碼....

HTML

<div id="weight-dropdown"> 
<h4>Weight Converter</h4> 
<select id="select-weight"> 
    <option value="0">...</option> 
    <option value="1">Pounds</option> 
    <option value="2">Grams</option> 
    <option value="3">Kilograms</option> 
    <option value="4">Ounce</option> 
</select> 
<input id="input" type="number" placeholder="Enter value..."> 
</div> <!-- weight dropdown--> 

<div id="output"> 
    <div> 
    <h5>Pounds (lbs) :</h5> 
    <div id="poundsOutput"></div> 
    </div> 

    <div> 
    <h5>Grams (g) :</h5> 
    <div id="gramsOutput"></div> 
    </div> 

    <div> 
    <h5>Kilorams (kg) :</h5> 
    <div id="kgOutput"></div> 
    </div> 

    <div> 
    <h5>Ounce (oz) :</h5> 
    <div id="ozOutput"></div> 
    </div> 
</div><!--output--> 

的Javascript

if (document.getElementById("select-weight").selectedIndex = "0"){ 
document.getElementById("input").addEventListener("input", function(e){ 
     var pounds= e.target.value; 
     document.getElementById("poundsOutput").innerHTML = pounds 
     document.getElementById("gramsOutput").innerHTML = pounds/0.0022046; 
     document.getElementById("kgOutput").innerHTML = pounds/2.2046; 
     document.getElementById("ozOutput").innerHTML = pounds*16; 

    }) 
} else (document.getElementById("select-weight").selectedIndex = "2"){ 
document.getElementById("input").addEventListener("input", function(e){ 
     var grams= e.target.value; 
     document.getElementById("poundsOutput").innerHTML = grams*0.0022046; 
     document.getElementById("gramsOutput").innerHTML = grams; 
     document.getElementById("kgOutput").innerHTML = grams/1000; 
     document.getElementById("ozOutput").innerHTML = grams/28.35; 

    }) 

}

Answer 1

分配基於輸入值一旦輸入監聽器，但是一旦分配它得到總是觸發，即使選擇的變化。可以做的另一種方式圓，並使用一個開關：

document.getElementById("input") 
    .addEventListener("input", function(e){ 
    var input = e.target.value; 
    switch(document.getElementById("select-weight").selectedIndex){ 
    case 0: 
     return alert("Please select unit"); 
    break; 
    case 1 : 
     var pounds = input; 
     var grams = input/0.0022046; 
     var kg = input/2.2046; 
     var oz = input * 16; 
     break; 
     case 2: 
     var pounds = input * 0.0022046; 
     var grams = input; 
     var kg = pounds/2.2046; 
     var oz = pounds * 16; 
     break; 
     case 3: 
     //... 
     break; 
    } 

    //update DOM with values 

    document.getElementById("poundsOutput").innerHTML = pounds; 
    document.getElementById("gramsOutput").innerHTML = grams; 
    document.getElementById("kgOutput").innerHTML = kg; 
    document.getElementById("ozOutput").innerHTML = oz; 

}); 

---

而上的代碼是好/可以理解的，你可以用更短的方法。您可以通過除以某個數字來獲得下一個「行」的值，而通過乘以某個數字可以得到前一個「行」的值。所以，你可以這樣做：

var conversion = [ 
    null,//an endpoint 
    1,// pounds/this = grams 
    2,//grams/this = kg 
    3, //kg/this = oz 
    null//an endpoint 
]; 

//some pseudocode: 
var index = selectWeight.selectedIndex; 
var start = event.target.value; 

var result = []; 

//now multiple from right to left of selected index: 
conversion.slice(0,index).reduceRight(function(value,multiplier,i){ 
    result[i] = value; 
    return value * multiplier; 
}, start); 

//divide from right to left: 

conversion.slice(index-1).reduce(function(value,divider,i){ 
    result[index+i-1] = value; 
    return value/divider; 
},start); 

現在我們促成了我們的研究結果：

var [pounds,grams,kg,oz] = result; 

Answer 2

你做左手分配;

if (document.getElementById("select-weight").selectedIndex = "0"){ 

，而應該是

if (document.getElementById("select-weight").selectedIndex == "0"){ 

同樣適用於其他報表。

Answer 3

使用事件onClick爲每個選項，然後使用它們的ID做一個權重函數的工廠。