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>

How to add code to calculate the price and concatenate it to the orderMessage

This is the whole program and all the "//" are the things my professor wants me to do to the program, help on the whole thing would be amazing but just helping me get a start will be great too. I dont really understand what I need to do and what to add in to make it work. Ive tried a few things and it hasnt worked
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>JavaScript Project T-Shirt Order</title>
<script>
/*
* Function OrderTShirt
*
* Inputs:
* selectedColor - initialized from the select tag with id="colorChoice"
* selectedStyle - initialized from the select tag with id="style"
* selectedSize - initialized from the select tag with id="size"
*
* Output:
* alert of the order message
*
*/
function OrderTShirt(){
//initialize the input
var selectedColor = document.getElementById("colorChoice").value;
var selectedStyle = document.getElementById("style").value;
var selectedSize = document.getElementById("size").value;
//create the orderMessage to alert - you may want to move/change this code
var orderMessage = "Your order is: Color = " + selectedColor
+ "; Style = " + selectedStyle
+ "; Size = " + selectedSize+"\n";
//Add code to calculate the price and concatenate it to the orderMessage
var price = document.getElementById()
//For example, "The order is: Color = gray; Style=T-Shirt; Size = XL \nThe price is $7"
//If the style and size are not available, then concatenate the message that
// the selection is not available instead of a price.
// a t-shirt in any size is $7 except 2XL which is $10.
// a v-neck in adult sizes is $12.50 except the 2XL is not available
// a tech shirt in adult sizes is $13
alert(orderMessage);
}
</script>
</head>
<body>
<p>
<table>
<tr/>
<tr><th>Colors</th><th>Styles</th><th>Sizes</th></tr>
<tr><td>
<select id="colorChoice">
<option value="gray">Gray</option>
<option value="gold">Gold</option>
<option value="red">Red</option>
<option value="pink">Pink</option>
<option value="white">White</option>
<option value="navy">Navy</option>
<option value="maroon">Maroon</option>
<option value="black">Black</option>
<option value="royalblue">Royal Blue</option>
<option value="limegreen">Lime Green</option>
<select>
</td><td>
<select id="style">
<option value="T-Shirt">T-Shirt</option>
<option value="Tech Shirt">Moisture Wicking Tech Shirt</option>
<option value="Ladies V-Neck">Ladies V-Neck - Adult sizes only</option>
</select>
</td><td>
<select id="size">
<option value="XS">Adult Extra Small</option>
<option value="S">Adult Small</option>
<option value="M">Adult Medium</option>
<option value="L">Adult Large</option>
<option value="XL">Adult Extra Large</option>
<option value="2XL">Adult 2X</option>
</select>
</td></tr>
<tr/><tr><td>
<input type="button"
value="Order T-Shirt"
onclick="OrderTShirt();">
</td><td/><td/>
</table>
<p>
</body>
</html>

This snippet is what I think you are looking for. I made another function called getPrice that will calculate the price for you. It checks the style of the shirt, and then following the examples you gave it checks what the size is and then gives a price, or "Unavailable" if there are none in stock.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>JavaScript Project T-Shirt Order</title>
<script>
/*
* Function OrderTShirt
*
* Inputs:
* selectedColor - initialized from the select tag with id="colorChoice"
* selectedStyle - initialized from the select tag with id="style"
* selectedSize - initialized from the select tag with id="size"
*
* Output:
* alert of the order message
*
*/
function OrderTShirt(){
//initialize the input
var selectedColor = document.getElementById("colorChoice").value;
var selectedStyle = document.getElementById("style").value;
var selectedSize = document.getElementById("size").value;
//create the orderMessage to alert - you may want to move/change this code
var orderMessage = "Your order is: Color = " + selectedColor
+ "; Style = " + selectedStyle
+ "; Size = " + selectedSize+"\n";
//Add code to calculate the price and concatenate it to the orderMessage
var price = getPrice(selectedColor, selectedStyle, selectedSize);
if(price === "Unavailable") {
orderMessage += "This shirt is not available";
} else {
orderMessage += "Price = " + price;
}
//For example, "The order is: Color = gray; Style=T-Shirt; Size = XL \nThe price is $7"
//If the style and size are not available, then concatenate the message that
// the selection is not available instead of a price.
// a t-shirt in any size is $7 except 2XL which is $10.
// a v-neck in adult sizes is $12.50 except the 2XL is not available
// a tech shirt in adult sizes is $13
alert(orderMessage);
}
function getPrice(color, style, size) {
var price;
if(style === "T-Shirt") {
if(size === "2XL") {
price = 10;
}else {
price = 7;
}
}
else if(style === "Ladies V-Neck") {
if(size === "2XL") {
// Unavailable
price = "Unavailable"
}else {
price = 12.50;
}
}
else if(style === "Tech Shirt") {
price = 13;
}
return price;
}
</script>
</head>
<body>
<table>
<tr>
<th>Colors</th>
<th>Styles</th>
<th>Sizes</th>
</tr>
<tr>
<td>
<select id="colorChoice">
<option value="gray">Gray</option>
<option value="gold">Gold</option>
<option value="red">Red</option>
<option value="pink">Pink</option>
<option value="white">White</option>
<option value="navy">Navy</option>
<option value="maroon">Maroon</option>
<option value="black">Black</option>
<option value="royalblue">Royal Blue</option>
<option value="limegreen">Lime Green</option>
</select>
</td>
<td>
<select id="style">
<option value="T-Shirt">T-Shirt</option>
<option value="Tech Shirt">Moisture Wicking Tech Shirt</option>
<option value="Ladies V-Neck">Ladies V-Neck - Adult sizes only</option>
</select>
</td>
<td>
<select id="size">
<option value="XS">Adult Extra Small</option>
<option value="S">Adult Small</option>
<option value="M">Adult Medium</option>
<option value="L">Adult Large</option>
<option value="XL">Adult Extra Large</option>
<option value="2XL">Adult 2X</option>
</select>
</td>
</tr>
<tr>
<td>
<button onclick="OrderTShirt();">Order T-Shirt</button>
</td>
</tr>
</table>
</body>
</html>

Dropdown box - onchange and onselect

I want help, i am very new to html..
On selecting option from dropdown menu, I want html to put the values in word..
e.g. When I select "1" from drop down, it must show "one"
When I select "2' from drop down, it must show "two"
How to do that??
<HTML>
<Table border=10>
<TR>
<TD>Select Number</TD>
<TD><Select>
<option>1</option>
<option>2</option>
<option>3</option>
</Select></TD>
</TR>
<tr>
<td>In Words</td>
<td><input type="text" readonly></td>
</tr>
</Table>
</HTML>
Please make a script and show me...

A non-jQuery solution:
Firstly, give your select- and input-tags id's, and your options values (value=""). Then add a onchange=""-listener in the select-tag and make a function that carries out what you want to do (i.e. checking the selected value and displaying it in your input field), like so:
function showValue() {
var x = document.getElementById("mySelect").value;
document.getElementById("mySelection").value = "You selected: " + x;
}
<Table border=10>
<tr>
<td>Select Number</td>
<td><Select onchange="showValue()" id="mySelect">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</Select></td>
</tr>
<tr>
<td>In Words</td>
<td><input type="text" id="mySelection"></td>
</tr>
</Table>

If I understand what you want, you'll need some javascript to find what you selected, and take that 'string' and shove it in an element for the user to see.
Here is a working example. Try making one these next time you ask a question. Welcome to Stack Overflow.
http://jsfiddle.net/sheriffderek/6vp5Lskn/
HTML
<select name='my_select' id='my_select'>
<option value='1'>Option 1</option>
<option value='2'>Option 2</option>
<option value='3'>Option 3</option>
<option value='4'>Option 4</option>
<option value='5'>Option 5</option>
</select>
<div id="outcome">
You have selected: <span></span>
</div>
javascript (jQuery)
var selectedOption; // define this variable
// when the select is changed...
$('#my_select').on('change', function() {
// get the option that was selected
selectedOption = $( "#my_select option:selected" ).text();
// put the option in the place you want it
$('#outcome span').html(selectedOption);
});

How to bring back the value to default of text area?

I have code here that if the checkbox is checked, it will multiply the value of the checkbox and the value of the dropdown list and will display product to the text area. My problem is even if the checkbox is not check, when you change the value of the dropbox it still execute the operation and display the product of the values. And also if I unchecked the checkbox, it doesn't bring back the value of the text area to 0. Below is the code
<table align=center border=1>
<tr colspan=3>
<td colspan=3><h2>Specialty Cakes</h2></td>
</tr>
<tr>
<td><center><img src=special\blackforest_small.jpg ><br>Black Forest</center></td>
<td><input type="checkbox" id="check1" name="check1" value="550.00"onclick="special1()">Buy P550.00</input><br><input type="text" id="total1" name="total1" value="P0.00"size="8"></input><br>
QTY: <select id="qty1" name="qty1" onchange="special1()">
<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>
</select>
</td>
</tr>
</table>
<script>
function special1(){
var m = document.getElementById("check1").checked;
var x = document.getElementById("check1").value;
var y = document.getElementById("qty1").value;
var z = 0;
if (m = true){
z = "P" + x * y;
}
document.getElementById("total1").value = z;
}
</script>

Please change this
if (m = true){
z = "P" + x * y;
}
to like below
if (m == true){
z = "P" + x * y;
}
you should use "==" operator for comparison

School assignment onChange

I have a small problem that hopefully someone can help with. I am a student in a Web Programming Class, the instructor has given the assignment to: Add an "onChange" event handler to the shipping field in the form to run the "shipping_price()" function whenever the user changes the selected shipping method.
Here is the code he offered:
<td colspan="3" align="right"><span class="fmlabel">Shipping:</span>
<select name="shipping">
<option value="0">Select a Shipping Method
<option value="7.95">3-5 days ($7.95)
<option value="9.95">2 days ($9.95)
<option value="12.95">Next Day ($12.95)
</select>
</td>
What I put here is all the information he gave for this part of the assignment, any help would be great.
Edit:
I took the suggested help and put this in:
function shipping_price()
{
var ship=document.getElementById("shipping");
document.order.total.value=(shipping+sub_total);
}
<tr>
<td colspan="3" align="right"><span class="fmlabel">Shipping:</span>
<select name="shipping" onChange="shipping_price">
<option value="0">Select a Shipping Method
<option value="7.95">3-5 days ($7.95)
<option value="9.95">2 days ($9.95)
<option value="12.95">Next Day ($12.95)
</select>
</td>
<td><input class="numbers" name="sub8" id="sub8" size="7" value="0.00" disabled></td>
</tr>
This works if I change the value of the shipping field, but will not put the "option value=" into the shipping field.

There are many ways to do this .There are many site for reading deeply.The below is one of the method.When the value in the select is changed to the new value. Then the functionfirst() will call and the functionfirst() will the alert the selected value.
<script>
function functionfirst(){
var myselect = document.getElementById("shipping");
alert(myselect.options[myselect.selectedIndex].value);
}
</script>
<td colspan="3" align="right"><span class="fmlabel">Shipping:</span>
<select id="shipping" name="shipping" onchange="functionfirst()">
<option value="0">Select a Shipping Method</option>
<option value="7.95">3-5 days ($7.95)</option>
<option value="9.95">2 days ($9.95)</option>
<option value="12.95">Next Day ($12.95)</option>
</select>
</td>