We Keep Coding

How can javascript collect values from the same classname in select-option?

I made table for the individual summation of the same classnames as like '30', '60'...
<td>
<select onchange='summation()' class='30' name='Cr'>
<option value=0>>15.0</option>
<option value=1>10.0/15.0</option>
<option value=2><5.0</option>
<option value=3>5.0/10.0</option>
</td>
<td>
<select onchange='summation()' class='30' name='WBC'>
<option value=0><2000</option>
<option value=1>2000~4000</option>
<option value=2> >10000</option>
<option value=3>4000~10000</option>
</td>
<td>
<select onchange='summation()' class='90' name='post-BUN'>
<option value=0>>24</option>
<option value=1><20</option>
<option value=2>20/24</option>
</td>
<td>
<select onchange='summation()' class='180' name='HBsAg'>
<option value=0>posi</option>
<option value=3>nega</option>
</td>
In Browser, that code's displaying below
I made javascript as below. Classname ='30' values are the collection of object.
function summation() {
var x = document.getElementsByClassName("30");
???????????
document.getElementById("30").innerHTML = x.valueOf();
How can I get the summation of the classname="30" from the that code?
When option selected, I want the sum of the values of the classname '30'. In here, 3 and 2 selected, the sum will be 5. I want That sum "5"

I think this is probably what you want, but it's a tiny bit unclear from the requirements. (I'm unsure why you run the "summation" function on the last two selects when you are not including them in the calculation.)
From a code point of view, querySelectorAll is used to find all elements with the same class. The advantage of this vs getElementsByClassName is that you can then easily loop over the items with a forEach as I have done.
Note that I had to alter your class names slightly because JavaScript complains about an invalid selector when the class name starts with a number. But this is a trivial change.
function summation() {
var x = document.querySelectorAll(".select30");
var total = 0;
x.forEach(function(item) {
total += parseInt(item.value);
});
console.log("Total: " + total);
}
<table>
<tr>
<td>
<select onchange='summation()' class='select30' name='Cr'>
<option value=0>>15.0</option>
<option value=1>10.0/15.0</option>
<option value=2><5.0</option>
<option value=3>5.0/10.0</option>
</td>
<td>
<select onchange='summation()' class='select30' name='WBC'>
<option value=0>
<2000</option>
<option value=1>2000~4000</option>
<option value=2> >10000</option>
<option value=3>4000~10000</option>
</td>
<td>
<select onchange='summation()' class='select90' name='post-BUN'>
<option value=0>>24</option>
<option value=1>
<20</option>
<option value=2>20/24</option>
</td>
<td>
<select onchange='summation()' class='select180' name='HBsAg'>
<option value=0>posi</option>
<option value=3>nega</option>
</td>
</tr>
</table>

After agreeing with ADyson and trying to do without a class name and but with data attribute here is what I have done.
const selectItems = document.querySelectorAll("select"); // selecting all select elements
selectItems.forEach(selectItem => { // looping through all select elements
selectItem.addEventListener("change", function() { // calling a function on change
let dataNumber = this.dataset.num;
summation(dataNumber); // passing the value of data-num to find next elements which has same data-num
});
});
function summation(dataNumber) {
const allElements = document.querySelectorAll("[data-num]"); // selecting all elements that has data-num attribute
const allElementsWithSameDataNumber = []; // to store all elements that has same data-num
allElements.forEach(select => {
if (select.dataset.num === dataNumber) {
allElementsWithSameDataNumber.push(select);
}
});
// Calculating the value of same data-number's select elements
let value = 0;
allElementsWithSameDataNumber.forEach(cur => {
value = parseInt(cur.value) + value;
});
console.log(value);
}
<select data-num="30" name="Cr">
<option value="10">10</option>
<option value="1">1</option>
</select>
<select data-num="30" name="WBC">
<option value="3">3</option>
<option value="2"> >2</option>
</select>
<select data-num="180" name="WBC">
<option value="3">3</option>
<option value="2"> >2</option>
</select>
<select data-num="180" name="WBC">
<option value="8">8</option>
<option value="2"> >2</option>
</select>

JS calculated value is not shown

I have developed a small page where an user can add 2 items (bron / afzuigunit) and see what the total cost of this configuration will be.
It can be found here
The 2 options
<tr>
<td>Plasma bron</td>
<td width="20px"></td>
<td><select id="bron" onchange="calculate()">
<option value="0_0">Kies uw plasmabron</option>
<option value="Geen_0">Geen</option>
<option value="PowerMax 45XP_50">PowerMax 45XP</option>
<option value="PowerMax 65_100">PowerMax 65</option>
<option value="PowerMax 85_150">PowerMax 85</option>
<option value="PowerMax 105_200">PowerMax 105</option>
<option value="PowerMax 125_250">PowerMax 125</option>
</select></td>
</tr>
<tr>
<td>Afzuigunit</td>
<td width="20px"></td>
<td><select id="afzuig" onchange="calculate()">
<option value="0_0">Kies uw afzuiging</option>
<option value="Geen_0">Geen / waterbak</option>
<option value="Donaldson_1000">Donaldson</option>
</select></td>
</tr>
I have used _ to use the correct value in my JS code
<script>
function calculate()
{
var bron = (document.getElementById("bron").value).split('_');
var afzuig = (document.getElementById("afzuig").value).split('_');
document.getElementById('verkoop').value = ((20000 * 1) + (bron[1] * 1) + (afzuig[1] * 1));
}
</script>
This part should display the correct price
<h3 class="my-4 text-center text-success">Uw prijs: € <span id="verkoop">20.000</span>,-</h3>
For some reason the is no change in price when an option is selected. Also no error is shown. Any suggestions?

Because you're not changing the value. You're changing the inner text of the span. Instead of .value, use .innerText
document.getElementById('verkoop').innerText = //same code here

How do I display the value of an option on a drop down in an output box when a button with an assigned function is clicked on?

How do I display the value of an option on a drop down in an output box when a button with an assigned function is clicked on?
I am new to programming and don't really understand.
/* This function is meant to take the value of the selected option and
display it in the output textbox */
function scoringValue() {
var chosenOne = document.getElementById("totalPoints").value + document.getElementById("options").value;
document.getElementById("totalPoints").value = chosenOne;
}
I am confused on assigning values below here
<p>
Scoring:
<select id="options">
<option value="3">1</option>
<option value="2">2</option>
<option value="7">3</option>
<option value="6">4</option>
<option value="8">5</option>
</select>
<input type="button" id="findScore" value="Score" onclick="return scoringValue()" />
Total Points: <input type="text" id="totalPoints" value=0 disabled="disabled" class="output" />

You need to parseInt values in your code, because they exists as string. So if you will sum two strings "2" + "2", the result will be "22". So the answer is: use parseInt to transform the string to a number to sum them properly. Here is an example:
function scoringValue() {
var chosenOne = parseInt(document.getElementById("totalPoints").value, 10) +
parseInt(document.getElementById("options").value, 10);
document.getElementById("totalPoints").value = chosenOne;
}
<p>Scoring:<select id="options">
<option value="3">3</option>
<option value="2">2</option>
<option value="7">7</option>
<option value="6">6</option>
<option value="8">8</option>
</select>
<input type="button" id="findScore" value="Score" onclick="scoringValue()" />
Total Points: <input type="text" id="totalPoints" value=0
disabled="disabled" class="output" />

You can use parseInt to convert you values from string to int and then perform your calculation.
Example:
function scoringValue() {
var totalPoints = parseInt(document.getElementById("totalPoints").value, 10);
var optionsValue = parseInt(document.getElementById("options").value, 10);
var chosenOne = totalPoints + optionsValue;
document.getElementById("totalPoints").value = chosenOne;
}

Other radio buttons not clickable after using Javascript function to select certain Radio based on if statement

I am working on a car service reservation system and there are three different vehicle options. I am trying to code it to where if there are a certain number of passengers listed, the vehicle automatically switches to something that accommodates more people and disables the first vehicle.
I have accomplished this but there are problems. I'm using arrays and functions to define the amount of passengers. I am then using a variable that adds the values these functions spit out to create a total number of passengers. Then I have set up an if statement to say if the value is greater than four, change to this radio input and disable the first one.
The problem occurs when this happens I am no longer able to select the third vehicle option and I don't know why.
I also attempted to set the total passenger value to where if it is less than five, the first vehicle is automatically selected. This did not work either.
Ultimately I would like it to act in such a way that if over 14 passengers are selected, the user receives an error (this is working fine). If less than 5 passengers are selected, the first vehicle is selected. If over 4 passengers are selected, the second vehicle is selected and the third is still an option. If more than 8 passengers are selected, both the first and third vehicle are disabled.
Hopefully my code is not overly ill formatted. I am fairly new to Javascript and have been piecing tutorials together. Here is a jsfiddle of the part of the form that is not working.
Here is the Javascript code:
var adults_teenagers2 = new Array();
adults_teenagers2["1"] = 1;
adults_teenagers2["2"] = 2;
adults_teenagers2["3"] = 3;
adults_teenagers2["4"] = 4;
adults_teenagers2["5"] = 5;
adults_teenagers2["6"] = 6;
adults_teenagers2["7"] = 7;
adults_teenagers2["8"] = 8;
adults_teenagers2["9"] = 9;
adults_teenagers2["10"] = 10;
adults_teenagers2["11"] = 11;
adults_teenagers2["12"] = 12;
adults_teenagers2["13"] = 13;
adults_teenagers2["14"] = 14;
function AmountAdultsTeenagers() {
var AdultsTeenagersNumberAmount = 0;
var theForm = document.forms["resForm"];
var AdultsTeenagersNumber = theForm.elements["adults_teenagers"];
AdultsTeenagersNumberAmount = adults_teenagers2[AdultsTeenagersNumber.value];
return AdultsTeenagersNumberAmount;
}
var children2 = new Array();
children2["0"] = 0;
children2["1"] = 1;
children2["2"] = 2;
children2["3"] = 3;
children2["4"] = 4;
children2["5"] = 5;
children2["6"] = 6;
children2["7"] = 7;
children2["8"] = 8;
function Amountchildren() {
var childrenNumberAmount = 0;
var theForm = document.forms["resForm"];
var childrenNumber = theForm.elements["children"];
childrenNumberAmount = children2[childrenNumber.value];
return childrenNumberAmount;
}
var infants2 = new Array();
infants2["0"] = 0;
infants2["1"] = 1;
infants2["2"] = 2;
infants2["3"] = 3;
infants2["4"] = 4;
infants2["5"] = 5;
infants2["6"] = 6;
infants2["7"] = 7;
infants2["8"] = 8;
function Amountinfants() {
var infantsNumberAmount = 0;
var theForm = document.forms["resForm"];
var infantsNumber = theForm.elements["infants"];
infantsNumberAmount = infants2[infantsNumber.value];
return infantsNumberAmount;
}
function calculateTotal() {
var over = AmountAdultsTeenagers() + Amountchildren() + Amountinfants();
if(over>'14')
{
alert('Sorry, no vehicle can accomodate more than 14 passengers.');
document.getElementById("firstPageSubmit").disabled = true;
}
else {
document.getElementById("firstPageSubmit").disabled = false;
}
if(over<'5') {
document.getElementById("towncar").checked = true;
}
if(over>'4')
{
document.getElementById("towncar").disabled = true;
document.getElementById("stretch_limousine").disabled = false;
document.getElementById("passenger_van").checked = true;
}
else {document.getElementById("towncar").disabled = false;
}
}
and the HTML:
<form method="post" class="res_form" id="resForm" name="res_form" onSubmit="return quoteCheck();">
<ul>
<li id="steps">Step 1 of 3 - Select Type of Service/Get Quote</li>
<li class="form_notice"><span>Reservations must be at least 48 hrs prior for towncars and 72 hrs for any other vehicle.</span></li>
<li><fieldset class="res_form_fs" id="passengers">
<legend>Passengers:</legend>
<label for="adults_teenagers" class="selectLabel">Adults/Teenagers:
<select name="adults_teenagers" id="adults_teenagers" onchange="calculateTotal()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
</select></label>
<label for="children" class="selectLabel">Children:
<select name="children" id="children" onchange="calculateTotal()">
<option value="0">None</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select></label>
<label for="infants" class="selectLabel">Infants:
<select name="infants" id="infants" onchange="calculateTotal()">
<option value="0">None</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select></label>
</fieldset>
</li>
<li>
<fieldset class="res_form_fs">
<legend>Select Vehicle:</legend>
<p class="radioT"><input type="radio" value="Towncar" onclick="calculateTotal()" name="vehicle" id="towncar" class="radio" unchecked /></p><p class="nonradioT"><span class="radioOption"><label for="towncar">Towncar</label></span></p><br />
<p class="radioT"><input type="radio" value="Passenger Van" onclick="calculateTotal()" name="vehicle" id="passenger_van" class="radio" unchecked /></p><p class="nonradioT"><span class="radioOption"><label for="passenger_van">Passenger Van</label></span></p><br />
<p class="radioT"><input type="radio" value="Stretch Limousine" onclick="calculateTotal()" name="vehicle" id="stretch_limousine" class="radio" unchecked /></p><p class="nonradioT"><span class="radioOption"><label for="stretch_limousine">Stretch Limousine</label></span></p>
</fieldset>
</li>
<li><input name="submit" type="submit" id="firstPageSubmit" class="ressubmitButton" value="Continue to Make Reservation" /></li>
</ul>
</form>

Here i change name all select option as same and now it's work. Please see in below JSFiddle:
<select name="adults_teenagers">
http://jsfiddle.net/ketan156/cthbg27h/8/
edit:
change in if condition: following is new JSFiddle:
http://jsfiddle.net/ketan156/cthbg27h/10/
is is ok? as per my understanding you like to get it.
As You need i edited JSFiddle:
http://jsfiddle.net/ketan156/cthbg27h/11/

multiply dropdown list value with a constant

I am trying to multiply the value from the dropdown list by a certain value say $10 and the value ALL multiply it by $7 and for the value to appear in the text box. I am totally new at scripting and would appreciate any help.
<!DOCTYPE html>
<html>
<body>
Amount:<br>
<select><br>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="ALL">ALL</option>
</select>
<br>
<td>Total: <input id="quantity" name="quantity" type="text" value="$0.00" size="3" /></td>
</form>

Just give an id to your select field like "mySelect" use the following javascript code:
var selectElement = document.getElementById("mySelect");
selectElement.addEventListener('change',myFunction);
function myFunction() {
var value = document.getElementById("mySelect").value;
if(value=="ALL")
value=7;
var fixedAmount=10;
document.getElementById("quantity").value = '$'+fixedAmount*value;
}