Javascript 选择

Question

我有一个下拉列表“磅”、“克”、“千克”和“盎司”。我想要这样一种情况，当我选择 gram 来执行一个函数时，当我在输入字段中输入一个值时，当我选择 pounds 时，我想要另一个函数来执行时我在输入字段中输入一个值，依此类推。我已经尝试过了，但无法完成。

这是我的代码....

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;