This is my first post after having come to the forum for years ;)
My problem is that if the "wybierz-diete" changes, the sum value does not change
HTML:
<select id="wybierz-diete">
<option value="fit">Fit</option>
<option value="sport">Sport</option>
<option value="economy">Economy</option>
</select>
<div id="fit" class="fit wybranadieta">
ilość kalori:
<select id="ilosc-kalori1" onchange="calculateTotal()">
<option value="1200">1200</option>
<option value="1500">1500</option>
<option value="2000">2000</option>
</select>
jak długo?:
<select name="a1" id="a1" onchange="calculateTotal()">
<option value="f_a1" class="f_a1">1 dzien</option>
<option value="f_a20" class="f_a20">20 dni</option>
<option value="f_a30" class="f_a30">30 dni</option>
<option value="f_b1" class="f_b1">1 dzien</option>
<option value="f_b20" class="f_b20">20 dni</option>
<option value="f_b30" class="f_b30">30 dni</option>
<option value="f_c1" class="f_c1">1 dzien</option>
<option value="f_c20" class="f_c20">20 dni</option>
<option value="f_c30" class="f_c30">30 dni</option>
</select>
</div>
JavaScript:
var fit_a= new Array();
fit_a["f_a1"]=42;
fit_a["f_a20"]=800;
fit_a["f_a30"]=1200;
fit_a["f_b1"]=45;
fit_a["f_b20"]=870;
fit_a["f_b30"]=1300;
fit_a["f_c1"]=48;
fit_a["f_c20"]=940;
fit_a["f_c30"]=1400;
function podliczAfit() {
var podliczAfit=0;
var theForm = document.forms["dieta"];
var selecteda1 = theForm.elements["a1"];
podliczAfit = fit_a[selecteda1.value];
return podliczAfit;
}
function calculateTotal() {
var kosztDiety = podliczAfit();
var divobj = document.getElementById('kosztCalosci');
divobj.style.display='block';
divobj.innerHTML = "Twoje zamówienie wyniesie: $"+kosztDiety;
}
I know that when I will have a solution, I will already have another problem. For example, how to manage when choosing the next diet, a sport, for which I have not written any code yet.
Related
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>
i got a form with a select form elements for month.
<select id="month" name="month">
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
<option>Mar
<option>Apr
<option>May
<option>Jun
<option>Jul
<option>Aug
<option>Sept
<option>Oct
<option>Nov
<option>Dec
</select>
How do i use javascript to get compare the selected value. for example if i select Feb, the javascript will pop up "you selected feb"
var monthSelect = document.getElementById("month")
var opt = monthSelect.options[monthSelect.selectedIndex]
if(opt.text == "Feb")
{
alert("Feb selected")
return false
}
JSFiddle: https://jsfiddle.net/ebrnh047/
Your html:
<select id="month">
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
</select>
Try:
var month = document.getElementById("month");
month.onchange = function() {
if (month.value == "Feb") {
alert("Feb selected");
}
}
This is a way to do it with JavaScript only:
First, your HTML:
<select id="month" name="month">
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
<option value="Mar">Mar</option>
<option value="Apr">Apr</option>
<option value="May">May</option>
<option value="Jun">Jun</option>
<option value="Jul">Jul</option>
<option value="Aug">Aug</option>
<option value="Sep">Sep</option>
<option value="Oct">Oct</option>
<option value="Nov">Nov</option>
<option value="Dec">Dec</option>
</select>
Then, your script:
var monthSelect = document.getElementById("month");
monthSelect.onchange = function(){
var thisValue = this.value;
alert(thisValue);
};
This is the fiddle: https://jsfiddle.net/16sn90tp/
Make sure you execute this code on document ready event( window.onload )
var monthSelect = document.getElementById("month")
monthSelect.onchange = function() {
var opt = monthSelect.options[monthSelect.selectedIndex]
if (opt.text == "Feb") {
alert("Feb selected")
}
}
<select id="month" name="month">
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
<option>Mar
<option>Apr
<option>May
<option>Jun
<option>Jul
<option>Aug
<option>Sept
<option>Oct
<option>Nov
<option>Dec
</select>
Jan Feb
function myFunction() {
var monthSelect = document.getElementById("month").value;
if (monthSelect == "Feb") {
alert("Feb selected");
return false;
}
}
<select id="month" name="month" onchange="myFunction()">
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
</select>
Hi add at first a class called "month" to all of your option tags and one class "monthList" to the select like for example this:
<select class="monthList">
<option class="month">Jan</option>
<option class="month">Feb</option>
<option class="month">Mar</option>
...
</select>
After this you need a little bit of JQuery:
$(".monthList .month").click(function(){
var selectedMonth = $(this).text();
var showText = "you selected " + selectedMonth;
alert(showText);
});
Try this, it should work.
I have a situation where I need the user to enter either a specific number (their monthly bill for example) or, in the case that they dont have a specific number, to choose from a dropdown of averages by state. I am unsure how to write an if/else statement that firsts ask if the specific input is defined, and in lieu of a text input, to check for the dropdown value.
Edit: this is my second attempt at getting something workable, no luck :/
JS
var val = document.getElementById('perKWhCost').value;
var select_value = document.querySelector('#selection').value;
var getMonthlyCost = function(){
if (val){
getMonthlyCost = val;
}
else{
getMonthlyCost = select_value;
}
console.log(getMonthlyCost);
}
var getAnnualSavings = getMonthlyCost * finalAnnualEnergy;
HTML
<div class="form-group">
<label name="monthlyCost" for="inputKWh">Per kWh cost(see energy bill)</label>
<p>This should look like "<em>$0.11/kWh</em>"</p>
<input type="text" value="" class="form-control" id="perKWhCost" placeholder="0.11">
<label for="state">Or select a state</label>
<select name="Cost" id="selection">
<option value=".11">Alabama</option>
<option value=".19">Alaska</option>
<option value=".11">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value=".20">Connecticut</option>
<option value=".13">Delaware</option>
<option value=".13">District Of Columbia</option>
<option value=".12">Florida</option>
<option value=".11">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value=".11">Illinois</option>
<option value=".11">Indiana</option>
<option value=".11">Iowa</option>
<option value=".12">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value=".18">Maine</option>
<option value="MD">Maryland</option>
<option value=".19">Massachusetts</option>
<option value=".15">Michigan</option>
<option value=".12">Minnesota</option>
<option value="MS">Mississippi</option>
<option value=".09">Missouri</option>
<option value="MT">Montana</option>
<option value=".09">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value=".16">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value=".09">North Dakota</option>
<option value=".12">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value=".14">Pennsylvania</option>
<option value=".18">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value=".10">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value=".17">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
<input type="button" value="Calculate!" id="submit" class="btn btn-default btn-lg" onclick="doMath();">
</form>
Note: the JS above is part of the function doMath which is not fully shown here. Additionally, ignore that not every selection has a decimal value yet, that will be changed in the working code.
This is the gist of what I need. I need to check if there is a value in the text field, if there is I want getMonthlyCost to store that value (preferably only if its a number). If there is no input in the text box I want the code to check the selector dropdown and take the users selection and pass that value to getMonthlyCost.
You could do something like this
var getMonthlyCost = function(){
var val = document.getElementById('perKWhCost').value;
var select_value = document.getElementById('selection');
var parsedValue=parseFloat(val);//parse if user entered valid float or nothing
if (parsedValue!=NaN & val!=""){// check parsed value
return val;
}
else{
if(select_value.selectedIndex != null) { //check if user has selected DropDown and get selected value if yes
return select_value.options[select_value.selectedIndex].value;}
else {//nothing entered}
}
}
function doMath() {
var getAnnualSavings = getMonthlyCost * 12;
console.log(getAnnualSavings);
}
It looks like you assigned "getMonthlyCost" as a function and assumed it was not one in the call when trying to get the "getMonthlyCost". The code below should work
var getMonthlyCost = function(){
var val = document.getElementById('perKWhCost').value;
var select_value = document.querySelector('#selection').value;
var returnValue = !!val ? val : select_value;
console.log(returnValue);
return returnValue;
}
var getAnnualSavings = getMonthlyCost() * finalAnnualEnergy;
Or you could do
var monthlyCost = document.getElementById("perKWCost").value || document.querySelector("#selection").value;
var annualSavings = monthlyCost * finalAnnualEnergy;
monthlyCost will take the take the first one if both are defined and if the first one is "", undefined or null, it will take the second one;
I hope this helps
Example: https://jsfiddle.net/12znp29s/
Documentation: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR_()
I want to show The licorice flavor, chocolate color, and topping chosen. I.e. "Green apple, white, christmas sprinkles."
please help not sure if i should have given each option a numeric value. I just did it just because. Feel free to change it to text or whatever you feel will work. I would love some advice on structuring if you see anything. Thank you in advance.
<div class="Licorice Flavors">
<select id="Licorice">
<option selected disabled>Licorice Flavor</option>
<option value="1">Green Apple</option>
<option value="2">Blue Raspberry</option>
<option value="3">Red Raspberry</option>
<option value="4">Watermelon</option>
<option value="5">Chocolate</option>
<option value="6">Orange</option>
<option value="7">Piña Colada</option>
</select>
</div>
<div class="Chocolate Color">
<select id="Chocolate">
<option selected disabled>Chocolate Color</option>
<option value="8">White Chocolate</option>
<option value="9">Dark Chocolate</option>
</select>
</div>
<div class="Toppings">
<select id="Toppings">
<option selected disabled>Toppings</option>
<option value="10">Christmas Sprinkles</option>
<option value="11">Rainbow Sprinkles</option>
<option value="12">Valentine's Day</option>
</select>
</div>
Add to Cart
<div id="result"></div>
<script type="text/javascript">
document.getElementById('link').onclick = function() {
var a = parseInt(document.getElementById('Licorice').value);
var b = parseInt(document.getElementById('Chocolate').value);
var c = parseInt(document.getElementById('Toppings').value);
var answer = (a,b,c);
document.getElementById('result').innerText = answer;
};
</script>
Close. Try this:
var answer = [a,b,c].join(" ");
document.getElementById('result').innerText = answer;
Check this if you can use jquery or this if you are using javascript only
Using the code from the link
<script>
function myNewFunction(sel)
{
alert(sel.options[sel.selectedIndex].text);
}
</script>
<select id="box1" onChange="myNewFunction(this);" >
<option value="98">dog</option>
<option value="7122">cat</option>
<option value="142">bird</option>
</select>
I guesh you want to do this.
document.getElementById('link').onclick = function() {
var a = parseInt(document.getElementById('Licorice').value);
var b = parseInt(document.getElementById('Chocolate').value);
var c = parseInt(document.getElementById('Toppings').value);
var answer = "("+a + "," + b + ","+ c +")";
document.getElementById('result').innerText = answer;
};
<div class="Licorice Flavors">
<select id="Licorice">
<option selected disabled>Licorice Flavor</option>
<option value="1">Green Apple</option>
<option value="2">Blue Raspberry</option>
<option value="3">Red Raspberry</option>
<option value="4">Watermelon</option>
<option value="5">Chocolate</option>
<option value="6">Orange</option>
<option value="7">Piña Colada</option>
</select>
</div>
<div class="Chocolate Color">
<select id="Chocolate">
<option selected disabled>Chocolate Color</option>
<option value="8">White Chocolate</option>
<option value="9">Dark Chocolate</option>
</select>
</div>
<div class="Toppings">
<select id="Toppings">
<option selected disabled>Toppings</option>
<option value="10">Christmas Sprinkles</option>
<option value="11">Rainbow Sprinkles</option>
<option value="12">Valentine's Day</option>
</select>
</div>
Add to Cart
<div id="result"></div>
Try this:
document.getElementById('link').onclick = function() {
var a = document.getElementById('Licorice').value;
var b = document.getElementById('Chocolate').value;
var c = document.getElementById('Toppings').value;
var answer = [a,b,c].join(", ");
document.getElementById('result').innerText = answer;
};
Fiddle
Here is my code complete code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Date Picker</title>
</head>
<body>
<strong>Departing:</strong><br/>
<select name='dateSingleMonthDeparting' onChange='changeDate(this.options[selectedIndex].value);'>
<option value='na'>Month</option>
<option value='1'>January</option>
<option value='2'>February</option>
<option value='3'>March</option>
<option value='4'>April</option>
<option value='5'>May</option>
<option value='6'>June</option>
<option value='7'>July</option>
<option value='8'>August</option>
<option value='9'>September</option>
<option value='10'>October</option>
<option value='11'>November</option>
<option value='12'>December</option>
</select>
<select name='dateSingleDayDeparting' id='day'>
<option value='na'>Day</option>
</select>
<select name='dateSingleYearDeparting' id='year'>
<option value='na'>Year</option>
</select><br/>
<strong>Returning:</strong><br/>
<select name='dateSingleMonthReturning' onChange='changeDate(this.options[selectedIndex].value);'>
<option value='na'>Month</option>
<option value='1'>January</option>
<option value='2'>February</option>
<option value='3'>March</option>
<option value='4'>April</option>
<option value='5'>May</option>
<option value='6'>June</option>
<option value='7'>July</option>
<option value='8'>August</option>
<option value='9'>September</option>
<option value='10'>October</option>
<option value='11'>November</option>
<option value='12'>December</option>
</select>
<select name='dateSingleDayReturning' id='day'>
<option value='na'>Day</option>
</select>
<select name='dateSingleYearReturning' id='year'>
<option value='na'>Year</option>
</select>
<script>
function changeDate(i){
var e = document.getElementById('day');
while(e.length>0){
e.remove(e.length-1);
var j=-1;
if(i=="na"){
k=0;
}else if(i==2){
k=28;
}else if(i==4||i==6||i==9||i==11){
k=30;
}else{
k=31;
}
}
while(j++<k){
var s=document.createElement('option');
var e=document.getElementById('day');
if(j==0){
s.text="Day";
s.value="na";
try{
e.add(s,null);
}catch(ex){
e.add(s);
}
}
else{
s.text=j;
s.value=j;
try{
e.add(s,null);
}catch(ex){
e.add(s);
}
}
}
}
var currentTime = new Date();
y = currentTime.getFullYear()+1;
while (y-->1909){
var s = document.createElement('option');
var e = document.getElementById('year');
s.text=y;
s.value=y;
try{
e.add(s,null);
}catch(ex){
e.add(s);
}
}
</script>
</body>
</html>
I have two datepickers. When I change the first one it works perfectly, but if I change the second one the functions will work in the first datepciker
I want them to have their own function for each datepicker. What will I do to make this happen? I already tried to make put something like this getElementById('day day2') but it doesn't work.
Your select have assigned the ids day and year twice in your markup. That is wrong. ID should be unique.
Please change those IDs to day1, year1, day2 and year2. Then pass those ids as parameters into the function like this changeDate(this.value, "day1", "year1") and this changeDate(this.value, "day2", "year2").
Now define changeDate as
function changeDate(i, day, year) {
var e = document.getElementById( day ); // please note that day is the variable passed
...................
}
As an unrelated side note, this.options[selectedIndex].value is same as this.value