CODEWITHSUNDEEP
javascripthtml
Lamina Olawale Hammed
Lamina Olawale Hammed

Reputation: 97

Javascript selection

I have a dropdown list of "Pounds", "grams", "Kilograms" and "Ounces". I want a situation that when I select gram to perform a function, when I input a value in the input field, also when i select pounds i want another function to perform when i input a value in the input field and so on. I have tried it but couldn't get it done.

Here's my code....

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;

    })

}

Upvotes: 2

Views: 498

Answers (3)

Jonas Wilms
Jonas Wilms

Reputation: 138537

You assign the input listener based on the input value once , but once assigned it gets always triggered, even if the select changes. May do it the other way round and use a switch:

  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;

});

While the upper code is good / understandable, you could use a more shorter approach. You could get the value of the next "row" by dividing through a certain number, and of the previous by multiplying with a certain number. So you could do:

 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);

And now weve got our results:

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

Upvotes: 2

xpeiro
xpeiro

Reputation: 760

Use the event onClick for each option and then use their ids to do a factory of weight functions.

Upvotes: 0

Cernodile
Cernodile

Reputation: 139

You're doing a left-hand assignment;

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

while it should be

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

Same applies to other statements.

Upvotes: 0

Related Questions