Multiplying select options by text-box user inputs in JavaScript

Question

I am trying to create a simple website that calculates weight-based doses for pediatric medications. This is done by multiplying the dose per kilogram of a user-selected medication from a drop-down box by the user input of a text box. There is a second drop-down that contains the kilogram or pound options. kilogram value would be 1 and pound would be 2.2. So these three values together would be multiplied and the total would append to a readonly text box. I have been studying JS for weeks and still struggling with the most basic of projects. Any guidance would be appreciated.

HTML:

   <div id="medications">
        <select for="dropdown" id="medication">Select Medication
            <option value="NaN">Select Medication</option>
            <option value=".2">Adenosine .2mg/kg</option>
            <option value=".15">Albuterol .15mg/kg</option>
            <option value="5">Aminophylline 5mg/kg</option>
            <option value="5">Amiodarone 5mg/kg</option>
            <option value="5">Aspirin 5mg/kg</option>
            <option value=".1">Ativan .1mg/kg</option>
            <option value=".02">Atropine .02mg/kg</option>
            <option value=".5">Atrovent .5mg/kg</option>
            <option value="1">Benadryl 1mg/kg</option>
            <option value=".01">Brethine .01mg/kg</option>
            <option value="4">Dextrose 10% 4ml/kg</option>
            <option value=".01">Epinephrine 1/10 .01mg/kg</option>
            <option value=".01">Epinephrine 1/1 .01mg/kg</option>
            <option value="1">Fentanyl 1mcg/kg</option>
            <option value="1">Ketamine 1mg/kg</option>
            <option value="1">Labetalol 1mg/kg/hr</option>
            <option value="2">Levophed 2mcg/kg/min</option>
            <option value="1">Lidocaine 1mg/kg</option>
            <option value="50">Magnesium Sulfate 50mg/kg</option>
            <option value=".1">Morphine .1mg/kg</option>
            <option value="2">Narcan 2mg</option>
            <option value=".25">Pepcid .25mg/kg</option>
            <option value="1">Rocuronium 1mg/kg</option>
            <option value="1">Sodium Bicarb 1mEq/kg</option>
            <option value="1">Solu-Medrol 1mg/kg</option>
            <option value=".5">Toradol .5mg/kg</option>
            <option value=".1">Versed .1mg/kg</option>
            <option value=".15">Zofran .15mg/kg</option>
        </select>
    </div>

    <div id="weight">
        <input id="number" type="text" placeholder="Weight" min="1" max="100">
        <select for="dropdown" id="weightType">
            <option value="1">Kg</option>
            <option value="2.2">Lb</option>
        </select>
    </div>

   <div id="totalDose">
        <input id="dose" name="dose" type="text" READONLY placeholder="Dose">
    </div>

Answer 1

There needs to be a point in time where the calculation should happen. That point in time corresponds to some action that the user will take and will be in the form of an "event".

Below, I've added a button for the user to "click" (which will be the event) that triggers the calculation.

See the inline comments for more details.

// Get reference to the output area (no need to input element - just populate the div) and the other elements
const output = document.querySelector("#totalDose");
const med = document.querySelector("#med");
const weight = document.querySelector("#weight");
const btn = document.querySelector("button");

// Set up a "click" event handler for the button
btn.addEventListener("click", function(event){
  // Set the output element to the result of the math:
  output.textContent = med.value * weight.value;
});

.title { display: inline-block; width: 150px; }

<div>
    <span class="title">Select Medication:</span>
    <select id="med">
      <option value="NaN">Select Medication</option>
      <option value=".2">Adenosine .2mg/kg</option>
      <option value=".15">Albuterol .15mg/kg</option>
      <option value="5">Aminophylline 5mg/kg</option>
      <option value="5">Amiodarone 5mg/kg</option>
      <option value="5">Aspirin 5mg/kg</option>
      <option value=".1">Ativan .1mg/kg</option>
      <option value=".02">Atropine .02mg/kg</option>
      <option value=".5">Atrovent .5mg/kg</option>
      <option value="1">Benadryl 1mg/kg</option>
      <option value=".01">Brethine .01mg/kg</option>
      <option value="4">Dextrose 10% 4ml/kg</option>
      <option value=".01">Epinephrine 1/10 .01mg/kg</option>
      <option value=".01">Epinephrine 1/1 .01mg/kg</option>
      <option value="1">Fentanyl 1mcg/kg</option>
      <option value="1">Ketamine 1mg/kg</option>
      <option value="1">Labetalol 1mg/kg/hr</option>
      <option value="2">Levophed 2mcg/kg/min</option>
      <option value="1">Lidocaine 1mg/kg</option>
      <option value="50">Magnesium Sulfate 50mg/kg</option>
      <option value=".1">Morphine .1mg/kg</option>
      <option value="2">Narcan 2mg</option>
      <option value=".25">Pepcid .25mg/kg</option>
      <option value="1">Rocuronium 1mg/kg</option>
      <option value="1">Sodium Bicarb 1mEq/kg</option>
      <option value="1">Solu-Medrol 1mg/kg</option>
      <option value=".5">Toradol .5mg/kg</option>
      <option value=".1">Versed .1mg/kg</option>
      <option value=".15">Zofran .15mg/kg</option>
    </select>
</div>
<div>
    <span class="title">Select weight:</span>
    <input id="number" type="text" placeholder="Weight" min="1" max="100">
    <select id="weight">
      <option value="1">Kg</option>
      <option value="2.2">Lb</option>
    </select>
</div>
<button type="button">Calculate</button>
<div id="totalDose"></div>