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>

submit any of the text of the selected option using html

When the form is submit I can only get the number assigned to the value. I want to submit any of the texts that is between the select options.
For example, when I select Bird and Dove I want to receive Bird and Dove not 3 and 3
$("#select1").change(function() {
if ($(this).data('options') === undefined) {
/*Taking an array of all options-2 and kind of embedding it on the select1*/
$(this).data('options', $('#select2 option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#select2').html(options);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form method="POST" action="process.php">
<select name="select1" id="select1">
<option value="0">-Select-</option>
<option value="1">Cars</option>
<option value="2">Phones</option>
<option value="3">Birds</option>
</select>
<select name="select2" id="select2">
<option value="0">-Select-</option>
<option value="1">BMW</option>
<option value="1">Benz</option>
<option value="1">Toyota</option>
<option value="2">iPhone</option>
<option value="2">Samsung</option>
<option value="2">Motorola</option>
<option value="3">Eagle</option>
<option value="3">Hawk</option>
<option value="3">Dove<option>
</select><br>
<label>Postal code</label>
<input type="number" name="zipcode" placeholder="postal code">
<button>Search</button>
</form>

When the form is submit the value of the selected option is sent. The problem is because you're using this value to match the child option elements to the parent.
To fix this you need to use value as it was intended, ie. to hold the value you want to send to the server when the form is submit, and use a different method for grouping the option elements between select. I'd suggest using a data attribute for this instead, like this:
$("#select1").change(function() {
if (!$(this).data('options')) {
$(this).data('options', $('#select2 option').clone());
}
var category = $(this).find('option:selected').data('category');
var options = $(this).data('options').filter(function() {
return $(this).data('category') == category;
});
$('#select2').html(options);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" action="process.php">
<select name="select1" id="select1">
<option data-category="0" value="">-Select-</option>
<option data-category="1" value="Cars">Cars</option>
<option data-category="2" value="Phones">Phones</option>
<option data-category="3" value="Birds">Birds</option>
</select>
<select name="select2" id="select2">
<option data-category="0" value="Cars">-Select-</option>
<option data-category="1" value="BMW">BMW</option>
<option data-category="1" value="Benz">Benz</option>
<option data-category="1" value="Toyota">Toyota</option>
<option data-category="2" value="iPhone">iPhone</option>
<option data-category="2" value="Samsung">Samsung</option>
<option data-category="2" value="Motorola">Motorola</option>
<option data-category="3" value="Eagle">Eagle</option>
<option data-category="3" value="Hawk">Hawk</option>
<option data-category="3" value="Dove">Dove</option> <!-- note I fixed your typo here, missing / -->
</select><br>
</form>

Just change the value from number to text.
example
<option value="Hawk">Hawk</option>
<option value="Dove">Dove<option>
Done!

Unable to fetch user input from drop-down list

I've been trying to fetch user input from a simple drop-down list to fill it into a <p> tag but can't seem to get it done.
The following is my javascript:
<script>
function changeText() {
var textDDL = document.getElementById("DDL1");
var text = textDDL.options[textDDL.selectedIndex].value;
var test = document.getElementById("test");
test.innerHTML = text;
}
</script>
The following is my HTML code:
<p class="first">
<label for="first">From</label>
<input list="countriesDL" name="country" class="form-control" type="text" id="DDL1">
<datalist id="countriesDL">
<option value="Afghanistan" class="form-control"></option>
<option value="Albania"></option>
<option value="Algeria"></option>
<option value="Aland Islands"></option>
<option value="American Samoa"></option>
<option value="Anguilla"></option>
<option value="Andorra"></option>
<option value="Angola"></option>
<option value="Antilles - Netherlands"></option>
<option value="Antigua and Barbuda"></option>
<option value="Antarctica"></option>
<option value="Argentina"></option>
<option value="Armenia"></option>
<option value="Australia"></option>
<option value="Taiwan"></option>
</datalist>
</p>
<button id="info2Btn" type="button" class="btn btn-warning leggo" style="color:black;" onClick="changeText()">Let's Go</button>
The codes would be triggered by a button press. I've tried reloading the page upon button press to see if it applies the user input, I've tried calling the function upon clicking the button. Can't seem to see what's wrong with it.

[UPDATED] Is this what you are trying?
function changeText() {
var textDDL = document.getElementById("DDL1");
var text = textDDL.value;
var test = document.getElementById("text");
test.innerHTML = text;
}
<p class="first">
<label for="first">From</label>
<input list="countriesDL" name="country" class="form-control" type="text" id="DDL1">
<datalist id="countriesDL">
<option value="Afghanistan" class="form-control"></option>
<option value="Albania"></option>
<option value="Algeria"></option>
<option value="Aland Islands"></option>
<option value="American Samoa"></option>
<option value="Anguilla"></option>
<option value="Andorra"></option>
<option value="Angola"></option>
<option value="Antilles - Netherlands"></option>
<option value="Antigua and Barbuda"></option>
<option value="Antarctica"></option>
<option value="Argentina"></option>
<option value="Armenia"></option>
<option value="Australia"></option>
<option value="Taiwan"></option>
</datalist>
</p>
<button id="info2Btn" type="button" class="btn btn-warning leggo" style="color:black;" onClick="changeText()">Let's Go</button>
<p id="text"></p>

Try
function changeText() {
document.getElementById("test").innerHTML = document.getElementById("DDL1").value;
}

Adding the values of form elements

I'm having a difficulty adding form elements together. If you could check out my code and fill me in on what I'm doing wrong, I'd greatly appreciate it. Here is a jsFiddle link of the code also: http://jsfiddle.net/jaruesink/6Z6hz/1/embedded/result/
<html><head><script src="http://code.jquery.com/jquery-latest.js">
</script></head><body>
<h1>How Much?</h1>
<form id="quickcalc">
Softcover Only<br>
<select id="SoftcoverOnly">
<option value="0" selected>Select Package</option>
<option value="360">Level A ($360)</option>
<option value="440">Level B ($440)</option>
<option value="495">Level C ($495)</option>
<option value="790">Level D ($790)</option>
<option value="1100">Level E ($1,110)</option>
<option value="1390">Level F ($1,390)</option>
<option value="1950">Level G ($1,950)</option>
</select><br><br>
Hardcover Only<br>
<select id="HardcoverOnly">
<option value="0" selected>Select Package</option>
<option value="430">Level A ($430)</option>
<option value="495">Level B ($495)</option>
<option value="650">Level C ($650)</option>
<option value="950">Level D ($950)</option>
<option value="1300">Level E ($1,300)</option>
<option value="1575">Level F ($1,575)</option>
<option value="2100">Level G ($2,100)</option>
</select><br><br>
Combo Hard/Soft<br>
<select id="ComboHard/Soft">
<option value="0" selected>Select Package</option>
<option value="590">Level A ($590)</option>
<option value="685">Level B ($685)</option>
<option value="825">Level C ($825)</option>
<option value="1050">Level D ($1,050)</option>
<option value="1375">Level E ($1,375)</option>
<option value="1650">Level F ($1,650)</option>
<option value="2225">Level G ($2,225)</option>
</select><br><br>
Additional Services<br>
<select id="AdditionalServices" multiple size="3">
<option value="0" disabled>Ctrl+Click for Multiple</option>
<option value="100">Warehouseing ($100)</option>
<option value="75">Amazon Backup ($75)</option>
<option value="250">PR Writing ($250)</option>
<option value="75">Ingram Advance ($75)</option>
<option value="30">TOC Creation ($30)</option>
<option value="75">Index Creation ($75)</option>
<option value="50">Printed Galley ($50)</option>
<option value="65">Ebook Package ($65)</option>
<option value="30">Casebinding ($30)</option>
<option value="40">Dustjacket ($40)</option>
</select><br><br>
Marketing Packages<br>
<select id="MarketingPackages">
<option value="0" selected>Select Package</option>
<option value="400">Bronze ($400)</option>
<option value="700">Silver ($700)</option>
<option value="1300">Gold ($1300)</option>
</select><br><br>
Your Total:<br>
<input type="text" readonly id="totalPrice" value="">
</form>
<div></div>
<script>
$("#quickcalc").change(function () {
var total = "";
$("#quickcalc option:selected").each(
function(){total += parseInt($(this).val())}
);
$("#totalPrice").val("$"+total);
}).change();
</script>
</body></html>

Try starting off with var total = 0;
http://jsfiddle.net/6Z6hz/2/

You're still concatenating strings. Change total=""; to total=0;

Try var total = 0;
instead of var total = "";
You must have an integer, but you now have a string!