Develop Reference

Multiplying select options by text-box user inputs in JavaScript

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>

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>

Several issues in a page's javascript I'm trying to build, ignoring "If" statement and equation not working, VSCode not giving any errors

I'm very new to javascript as you may be able to tell, I'm trying to create a function that will replace a piece of text with either 1 value or the result of an equation based on what is selected via a dropdown menu. I don't know if I'm just being dense and it's something small I messed up or if it's something more complex that I'm missing.
Thank you in advance for any assistance.
<!DOCTYPE html>
<html>
<body>
<label for="gval">G Value:</label>
<input type="text" id="gval" name="gval">
<label for="sval">S Value:</label>
<input type="text" id="sval" name="sval">
<label for="bval">B Value:</label>
<input type="text" id="bval" name="bval">
<label for="dval">D Value:</label>
<input type="text" id="dval" name="dval">
<select id="Level">
<option value="default" selected>1-18</option>
<option value="1">Level 1</option>
<option value="2">Level 2</option>
<option value="3">Level 3</option>
<option value="4">Level 4</option>
<option value="5">Level 5</option>
<option value="6">Level 6</option>
<option value="7">Level 7</option>
<option value="8">Level 8</option>
<option value="9">Level 9</option>
<option value="10">Level 10</option>
<option value="11">Level 11</option>
<option value="12">Level 12</option>
<option value="13">Level 13</option>
<option value="14">Level 14</option>
<option value="15">Level 15</option>
<option value="16">Level 16</option>
<option value="17">Level 17</option>
<option value="18">Level 18</option>
</select>
<span Id="HPVAL">640-247</span>
<script>
var e = document.getElementById("Level");
function onChange() {
var Result = BVALUE+GVALUE*((LVALUE-1)*((0.66+(SVALUE/100-0.05))+((1-(0.66+(SVALUE/100-0.05)))/17)*(LVALUE-1)))
var LVALUE = e.value;
var text = e.options[e.selectedIndex].text;
var HPVALVAR = document.getElementById('HPVAL');
var SVALUE = document.getElementById('sval').value;
var GVALUE = document.getElementById('gval').value;
var BVALUE = document.getElementById('bval').value;
var DVALUE = document.getElementById('dval').value;
const span = (HPVALVAR);
if (LVALUE="default") {
span.innerHTML = DVALUE;
}
else {
span.innerHTML = Result;
}
}
e.onchange = onChange;
onChange();
</script>
</body>
</html>
The way it is meant to function:
it shows a default value you choose an option from the dropdown if the option is the default then it goes back to whatever the default text is supposed to be (I'm not sure how to store values away for later yet so I just have it connected to a text box which I manually enter the info into)
if you choose a value that isn't the default it runs an equation based on values in the other boxes and the value of the current dropdown option, it then replaces the span text with the results of that equation.

You should use == for value or === for type and value comparison.
= is an assignment operator and returns true in if statement.
You can read more about it in the official doc: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#comparison_operators
<!DOCTYPE html>
<html>
<body>
<label for="gValue">G Value:</label>
<input type="text" id="gValue" name="gValue"><br/>
<label for="sValue">S Value:</label>
<input type="text" id="sValue" name="sValue"><br/>
<label for="bValue">B Value:</label>
<input type="text" id="bValue" name="bValue"><br/>
<label for="dValue">D Value:</label>
<input type="text" id="dValue" name="dValue"><br/>
<select id="level">
<option value="default" selected>1-18</option>
<option value="1">Level 1</option>
<option value="2">Level 2</option>
<option value="3">Level 3</option>
<option value="4">Level 4</option>
<option value="5">Level 5</option>
<option value="6">Level 6</option>
<option value="7">Level 7</option>
<option value="8">Level 8</option>
<option value="9">Level 9</option>
<option value="10">Level 10</option>
<option value="11">Level 11</option>
<option value="12">Level 12</option>
<option value="13">Level 13</option>
<option value="14">Level 14</option>
<option value="15">Level 15</option>
<option value="16">Level 16</option>
<option value="17">Level 17</option>
<option value="18">Level 18</option>
</select>
<br/>
<p>RESULT: <b><span id="hpValue">640-247</span></b></p>
<script>
var levelElement = document.getElementById("level");
level.addEventListener('change',
function(e) {
var levelValue = levelElement.value;
var levelText = levelElement.options[levelElement.selectedIndex].text;
var hpElem = document.getElementById('hpValue');
var gValue = document.getElementById('gValue').value;
var sValue = document.getElementById('sValue').value;
var bValue = document.getElementById('bValue').value;
var dValue = document.getElementById('dValue').value;
var result = bValue + gValue * ((levelValue - 1) * ((0.66 + (sValue / 100 - 0.05)) + ((1 - (0.66 + (sValue / 100 - 0.05))) / 17) * (levelValue - 1)))
levelValue == "default" ? hpElem.textContent = dValue : hpElem.textContent = result;
})
</script>
</body>
</html>

Display message when one value is selected

Not a complicated one but i have very limited coding knowledge.
Im looking for a message to be display when a value from a select menu (Less than $10,000) is selected and also prevents the form from submitting.
<select name="levelofdebt" class="form-control" id="levelofdebt" required>
<option value="" disabled selected="selected">Select total debt</option>
<option value="$10,000 or less">Less than $10,000</option>
<option value="$10-15k">$10,000 - $15,000</option>
<option value="$15-20k">$15,000 - $20,000</option>
<option value="$20-30k">$20,000 - $30,000</option>
<option value="$30-40k">$30,000 - $40,000</option>
<option value="$40-50k">$40,000 - $50,000</option>
<option value="$50-60k">$50,000 - $60,000</option>
<option value="$60-100k">$60,000 - $100,000</option>
<option value="$100k +">$100,000 +</option>
</select>
thanks in advance

function selectchange(){
if($("#levelofdebt").val() == '$10,000 or less')
{
alert('Amount Less than $10,000');
return false; // prevents page reload
}
else{
// Do something
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="levelofdebt" class="form-control" id="levelofdebt" required onchange="return selectchange();">
<option value="" disabled selected="selected">Select total debt</option>
<option value="$10,000 or less">Less than $10,000</option>
<option value="$10-15k">$10,000 - $15,000</option>
<option value="$15-20k">$15,000 - $20,000</option>
<option value="$20-30k">$20,000 - $30,000</option>
<option value="$30-40k">$30,000 - $40,000</option>
<option value="$40-50k">$40,000 - $50,000</option>
<option value="$50-60k">$50,000 - $60,000</option>
<option value="$60-100k">$60,000 - $100,000</option>
<option value="$100k +">$100,000 +</option>
</select>

Reset first select list when second one is reset to 0

I've got some example code, what I want is when the value in the second select list is set to 0 the first one also resets to 0, at the moment they reset each other when a value is selected in one. Any help appreciated thanks:
HTML:
<select name="Standard" id="std" size="6" onClick="selectCheck(this,'del'); return true;">
<option value="0">Select one</option>
<option value="Eggs" selected>Eggs</option>
<option value="Bacon">Bacon</option>
<option value="Toast">Toast</option>
<option value="Ham">Ham</option>
<option value="Home">Home Fries</option>
<option value="Jelly">Jelly</option>
</select>
<select name="Deluxe" id="del" size="6" onClick="selectCheck(this,'std'); return true;">
<option value="0">Select one</option>
<option value="Omelet">Omelet</option>
<option value="Canadian">Canadian Bacon</option>
<option value="Muffin">Muffin</option>
<option value="Steak">Steak</option>
<option value="Cottage">Cottage Fries</option>
<option value="Preserves">Preserves</option>
</select>
JS:
function selectCheck(me,other) {
var ind = me.selectedIndex;
if (ind > 0) {
document.getElementById(other).selectedIndex = 0;
}
}

Look for the specific ID
if (ind > 0 && other !='del') {
document.getElementById(other).selectedIndex = 0;
}
DEMO

<select name="Standard" id="std" size="6">
<option value="0">Select one</option>
<option value="Eggs" selected>Eggs</option>
<option value="Bacon">Bacon</option>
<option value="Toast">Toast</option>
<option value="Ham">Ham</option>
<option value="Home">Home Fries</option>
<option value="Jelly">Jelly</option> </select>
<select name="Deluxe" id="del" size="6" onClick="selectCheck(this,'std'); return true;">
<option value="0">Select one</option>
<option value="Omelet">Omelet</option>
<option value="Canadian">Canadian Bacon</option>
<option value="Muffin">Muffin</option>
<option value="Steak">Steak</option>
<option value="Cottage">Cottage Fries</option>
<option value="Preserves">Preserves</option>
</select>
<script>
function selectCheck(me,other) { var ind = me.selectedIndex; if (ind<1) { document.getElementById(other).selectedIndex = 0; } }
</script>

How to pass the selected max and min price value to java script function inside of select tag in html?

I have a search form with select options. The options will have two values, But I want two select option for Max and Min price value.
<input type="hidden" id="budget_min" name="filter_budget_min" value="0" />
<select onchange="updatePriceLimit(this)">
<option value="0">- Min -</option>
<option value="100000">1Lac</option>
<option value="200000">2lacs</option>
<option value="300000">3lacs</option>
<option value="400000">4lacs</option>
<option value="500000">5lacs</option>
<option value="600000">6lacs</option>
<option value="700000">7lacs</option>
<option value="800000">8lacs</option>
<option value="900000">9lacs</option>
<option value="1000000">10lacs</option>
<option value="1100000">11lacs</option>
<option value="1200000">12lacs</option>
<option value="1300000">13lacs</option>
<option value="5000000">50lacs</option>
<option value="6000000">60lacs</option>
<option value="7000000">70lacs</option>
<option value="8000000">80lacs</option>
<option value="9000000">90lacs</option>
<option value="10000000">1cr</option>
</select>
<script>
function updatePriceLimit(select) {
var limit = select.value.split('0');
document.getElementById('budget_min').value = limit[0];
}
<select onchange="updatePriceLimit(this)">
<option value="0">- Max -</option>
<option value="100000">1Lac</option>
<option value="200000">2lacs</option>
<option value="300000">3lacs</option>
<option value="400000">4lacs</option>
<option value="500000">5lacs</option>
<option value="600000">6lacs</option>
<option value="700000">7lacs</option>
<option value="800000">8lacs</option>
<option value="900000">9lacs</option>
<option value="1000000">10lacs</option>
<option value="1100000">11lacs</option>
<option value="1200000">12lacs</option>
<option value="1300000">13lacs</option>
<option value="5000000">50lacs</option>
<option value="6000000">60lacs</option>
<option value="7000000">70lacs</option>
<option value="8000000">80lacs</option>
<option value="9000000">90lacs</option>
<option value="10000000">1cr</option>
</select>
<script>
function updatePriceLimit(select) {
var limit = select.value.split('1');
document.getElementById('budget_max').value = limit[1];
}
When I am using following code, it is working perfectly
<select onchange="updatePriceLimit(this)">
<option value="0-0">- Price Range -</option>
<option value="100000-1000000">Below 10 Lacs</option>
<option value="1000000-3000000">10 Lacs - 30 lacs</option>
<option value="3000000-6000000">30 Lacs - 60 Lacs</option>
<option value="6000000-9000000">60 Lacs - 90 Lacs</option>
<option value="9000000-12000000">90 Lacs - 1.20 Cr</option>
<option value="12000000-15000000">1.20 Cr- 1.50 Cr</option>
<option value="12000000-15000000">1.20 Cr - 1.50 Cr</option>
<option value="15000000-20000000">1.50 Cr - 2 Cr</option>
<option value="20000000-25000000">2 Cr - 2.5 Cr</option>
<option value="25000000-30000000">2.5 Cr - 3 Cr</option>
<option value="30000000-40000000">3 Cr - 4 Cr</option>
</select>
<script>
function updatePriceLimit(select) {
var limit = select.value.split('-');
document.getElementById('budget_min').value = limit[0];
document.getElementById('budget_max').value = limit[1];
}
Any ideas, please do me favor.
Thanks

Update your script like this:
function updatePriceLimit(select,budget) {
var limit = select.value;
document.getElementById(budget).value = limit;
}
Your HTML:
<select onchange="updatePriceLimit(this,'budget_min')">
<select onchange="updatePriceLimit(this,'budget_max')">