CODEWITHSUNDEEP
javascripthtml
Berg_Durden
Berg_Durden

Reputation: 1781

How to set two different values in the select option HTML tag?

I have two elements on my page, a select option and an input.

I am getting the input value and using it as a multiplier of the select value in order to get the area of an object. I also need to have the <select> provide an additional multiplier for the price calculation. The formula would be the same (ie input value * option value) however the selected option needs to provide two different multiplicands for the price and the area calculation.

How could I do that?

Here is the code I have so far:

<input id="width" placeholder="Width">
   <br>
   <br>
<select id="select">
   <option value="0" disabled selected>Height</option>
   <option value="0.10">10CM</option>
   <option value="0.07">7CM</option>
</select>
<br>
<br>
<button onclick="calcArea()">Calc Area</button>
<br>
<p id="result-area">M2:</p>
<button>Calc Price</button>
<br>
<p id="result-price">$:</p>


var width = document.getElementById("width");
var select = document.getElementById("select");
var resultArea = document.getElementById("result-area");
var resultPrice = document.getElementById("result-price");

function calcArea() {
  var comp = width.value;
  var sel = parseFloat(select.value);
  var total = comp * sel;
  resultArea.innerHTML = "Result: " + total;
}

function calcPrice() {
  var comp = width.value;
  var sel = parseFloat(select.value);
  var total = comp * sel;
  resultPrice.innerHTML = "$: " + total;
}

I thought about using an if/else statement in one of the functions getting the value as reference, but I'd like to know if there is a better way to do that.

Upvotes: 1

Views: 1076

Answers (1)

Dacre Denny
Dacre Denny

Reputation: 30360

If I understand correctly, you're wanting to run two separate calculations from data specified in the input and select elements, where the select provides two sets to data for each of these calculations.

One way to achieve that would be to add additional meta data to each <option> of the <select> via a custom "data attribute" like this:

<select id="select">
  <option value="0" data-price="1.0" disabled selected>Height</option>
  <option value="0.10" data-price="5.0">10CM</option>
  <option value="0.07" data-price="15.0">7CM</option>
</select>

You'd then be able to access the price data from the selected option via the following:

var selectedPrice = parseFloat(select.selectedOptions[0].dataset.price);

In your code that could be introduced like this (note that I removed the redundant button and function):

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

/* Obtain the distinct/unique result elements */
var resultArea = document.getElementById("result-area");
var resultPrice = document.getElementById("result-price");

function calcArea() {
  var comp = width.value;
  var sel = parseFloat(select.value);  
  var total = comp * sel;
  
  /* Update the result area element */
  resultArea.innerHTML = "Result: " + total;
    
  /* Get price from selected option */
  var selectedPrice = parseFloat(select.selectedOptions[0].dataset.price);
  
  /* Update the result price element */
  resultPrice.innerHTML = "$: " + (selectedPrice * comp);
}
<input id="width" placeholder="Width">
<br>
<br>
<select id="select">
  <option value="0" data-price="1.0" disabled selected>Height</option>
  <option value="0.10" data-price="5.0">10CM</option>
  <option value="0.07" data-price="15.0">7CM</option>
</select>
<br>
<br>
<button onclick="calcArea()">Calc Area</button>
<br>
<!-- distinguish the result element -->
<p id="result-area">M2:</p>

<br>
<!-- distinguish the result element -->
<p id="result-price">$:</p>

Upvotes: 2

Related Questions