-1

I'm beginner in JavaScript. I want to use the drop-down button for calculateing but I don't know how I can take the value of choices and put them in calculation. Is it possible to help me that how I can do it and put the values in formula?

<select id="Selectpaint">
  <option selected disabled>نوع رنگ اکریلیک</option>
  <option value="8">رنگ اکریلیک طلایی</option>
  <option value="8">رنگ اکریلیک متالیک صدفی</option>
  <option value="13">رنگ اکریلیک مات  </option>
  <option value="14">رنگ اکریلیک نیم براق   </option>
  <option value="13">رنگ اکریلیک براق</option>
  <option value="10">رنگ اکریلیک آستری</option>
  <option value="12">مادر رنگ اکریلیک</option>
 </select>
 </p>


  <p>

Maybe after taking the value, I use it in formula which is contained different number that user put in different fields.

Mahdipour
  • 37
  • 6
  • Familiarize yourself with the [DOM API](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) and with [events](https://developer.mozilla.org/en-US/docs/Web/Guide/Events), in particular with the APIs of the [`HTMLSelectElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement) and the [`HTMLOptionElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLOptionElement). ` – Sebastian Simon Nov 04 '20 at 07:29

2 Answers2

0

Execute a JavaScript when a user changes the selected option of a element

HTML

<select id="mySelect" onchange="myFunction()">
  <option value="Audi">Audi</option>
  <option value="BMW">BMW</option>
  <option value="Mercedes">Mercedes</option>
  <option value="Volvo">Volvo</option>
</select>

JavaScript

function myFunction() {
  var x = document.getElementById("mySelect").value;
  // use your formula here
}

So here x will contain the selected value. You can use this x value and add it in the calculation function.

fiza khan
  • 1,280
  • 13
  • 24
  • Inline event handlers like `onchange` are [not recommended](https://stackoverflow.com/q/11737873/4642212). They are an [obsolete, hard-to-maintain and unintuitive](https://stackoverflow.com/a/43459991/4642212) way of registering events. Always [use `addEventListener`](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Inline_event_handlers_—_dont_use_these) instead. – Sebastian Simon Nov 04 '20 at 07:43
  • Thanks a lot for your answers. Is the value that I want to use in formula, the value that I have defined in OPTIONS? That numbers work in formula? – Mahdipour Nov 04 '20 at 07:47
  • Upvote answer if it is helpful for you. Yes it will contain the value that you defined in the options and also that number will work in formula. – fiza khan Nov 04 '20 at 07:49
  • So I use variable X in every formula that I want? – Mahdipour Nov 04 '20 at 08:02
  • variable 'x' basically contain the value that is selected. As you need the selected option value in formula so you should use the variable x in your formula. – fiza khan Nov 04 '20 at 08:20
  • I got it and I will try it. Thanks a lot. – Mahdipour Nov 04 '20 at 08:27
0

With this code you can show the result in the <p> below.

const applyFormula = (value) => {
  return value * 2 + 10; //Use here your formula 
}

const onDropdownChange = (event) => {
 document.getElementById('result').innerHTML = applyFormula(event.target.value);
}


document.getElementById('Selectpaint')
  .addEventListener('change', onDropdownChange);
<select id="Selectpaint">
  <option selected disabled>نوع رنگ اکریلیک</option>
  <option value="8">رنگ اکریلیک طلایی</option>
  <option value="8">رنگ اکریلیک متالیک صدفی</option>
  <option value="13">رنگ اکریلیک مات  </option>
  <option value="14">رنگ اکریلیک نیم براق   </option>
  <option value="13">رنگ اکریلیک براق</option>
  <option value="10">رنگ اکریلیک آستری</option>
  <option value="12">مادر رنگ اکریلیک</option>
 </select>
 <p id='result'></p>
Serlox
  • 47
  • 3