CODEWITHSUNDEEP
javascripthtmlcssexceldrop-down-menu
Dick Thompson
Dick Thompson

Reputation: 609

Perfoming formulas/calculations based off of selections on a dropdown menu?

var stocks = [
['Apple',100,8998,723,7212],
['Microsoft',928,1992,821,2381]
];
var select = document.getElementById("selectStock");
for(var i = 0; i < stocks.length; i++) {
    var opt = stocks[i][0];
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    select.appendChild(el);
}
<select id="selectStock">
    <option>Choose a stock</option>
</select>

I have multiple Javascript arrays of data (pulled from Excel) and have different functions that basically make calculations based on the row of the array. For example:

var stocks = [['Apple',100,8998,723,7212]['Microsoft,928,1992,821,2381]]

What I need to do is make a dropdown menu that will allow a user to select an option (Microsoft or Apple) and then based on this selection, will pull this value into the formula to make the calculations

document.write(Math.round(stocks[i][1] * 100)/100 + " dollars per share");

where i is the variable based off dropdown menu selection. Does this make sense? I'm not sure how to approach this, it's for a personal project. Thanks for the help!

Upvotes: 0

Views: 105

Answers (3)

freginold
freginold

Reputation: 3956

Here is a working example, although you'll probably want to do something other than document.write the result.

var stocks = [
  ['Apple',100,8998,723,7212],
  ['Microsoft',928,1992,821,2381]
];

var select = document.getElementById("selectStock");

for(var i = 0; i < stocks.length; i++) {
    var opt = stocks[i][0];
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    select.appendChild(el);
}

function getPrice(stock) {
  var price = false;
  for (var a = 0; a < stocks.length; a++) {
    if (stocks[a][0] == stock) {
      price = stocks[a][1];
      break;
    }
  }
  if (!price) { alert("Incorrect choice."); return; }
  document.getElementById("result").innerText = stock + " is currently " + (Math.round(price * 100)/100 + " dollars per share");
}
<select id="selectStock" onchange="getPrice(this.value);">
    <option>Choose a stock</option>
</select>

<br><br>
<div id="result"></div>

EDIT: Shows result in a div on the page, instead of overwriting the page with document.write().

Upvotes: 1

Giorgi Khorguani
Giorgi Khorguani

Reputation: 327

https://jsfiddle.net/b22y3v85/

var select = document.getElementById("selectStock");
select.onchange = (e) => {
   let index = stocks.indexOf(stocks.find(a => a.indexOf(e.target.value) > -1));
   document.write(Math.round(stocks[index][1] * 100)/100 + " dollars per share");
};

Upvotes: 1

shivam Gupta
shivam Gupta

Reputation: 441

<select id="selectStock"></select>
    <script type="text/javascript">
        var stocks = [
        ['Apple',100,8998,723,7212],
        ['Microsoft',928,1992,821,2381]
        ];
        var select = document.getElementById("selectStock");
        for(var i = 0; i < stocks.length; i++) {
            var opt = stocks[i][0];
            var el = document.createElement("option");
            el.innerHTML = opt;

            el.value =stocks[i]+''; 
            select.appendChild(el);
        }
        select.addEventListener('change', function(e){
            var val = e.currentTarget.value;
            val = val.split(',');
            val.shift();
            callYourMethod(val);
        });
    </script>

Upvotes: 0

Related Questions