PDA

View Full Version : method for selecting one of three sets of vars



spudnik
Mar 7th, 2017, 08:53 PM
Hi, i have three sets of variables, i want to be able to select these via a dropdown, they are as follows:


var select = document.getElementById("city");
if (select.value === "london") {
var grain = 100;
var Water = 65;
var Salt = 2;
var pulse = 1.5;
var Oil = 5;
var Sugar = 0;

} else if (select.value === "paris") {
var grain = 100;
var Water = 75;
var Salt = 2;
var pulse = 1.5;
var Oil = 5;
var Sugar = 1;

} else (select.value === "rome")
var grain = 100;
var Water = 68;
var Salt = 2.2;
var pulse = 2;
var Oil = 3;
var Sugar = 0;

this doesn't work, i tried using if else, any suggestions would be most welcome.

Sempervivum
Mar 7th, 2017, 10:29 PM
Syntax error here:

else (select.value === "rome")"if" and curly braces missing.

sunfighter
Mar 7th, 2017, 10:31 PM
This is a re-write passing the value from the SELECT:


<!doctype html>
<html lang="nl">
<head>
<meta charset="utf-8">

<title></title>

</head>
<body>
<select id="city" onchange="my_function(this.value)">
<option value="">Pick a City</option>
<option value="london">London</option>
<option value="paris">Paris</option>
<option value="rome">Rome</option>
</select>
<div id="The_Answers"></div>


<script>
function my_function(city){
if (city === "london") {
var grain = 100;
var Water = 65;
var Salt = 2;
var pulse = 1.5;
var Oil = 5;
var Sugar = 0;
} else if (city === "paris") {
var grain = 100;
var Water = 75;
var Salt = 2;
var pulse = 1.5;
var Oil = 5;
var Sugar = 1;
} else if (city === "rome"){
var grain = 100;
var Water = 68;
var Salt = 2.2;
var pulse = 2;
var Oil = 3;
var Sugar = 0;
}
document.getElementById("The_Answers").innerHTML = "grain is "+ grain
+ "<br>Water is "+ Water
+ "<br>Salt is "+ Salt
+ "<br>pulse is "+ pulse
+ "<br>Oil is "+ Oil
+ "<br>Sugar is "+ Sugar;
}
</script>
</body>
</html>

spudnik
Mar 7th, 2017, 11:05 PM
Thanks, i still cant get it to work, i'll try something else.

spudnik
Mar 7th, 2017, 11:09 PM
Thank you very much, that works superbly.


cheers.

spudnik
Mar 8th, 2017, 10:28 PM
Just one more thing. is there a way to retain the selected var values so they can be used in another function?

Sempervivum
Mar 9th, 2017, 12:12 AM
1. (not so good): Make the variables global:

var grain, Water, Salt, pulse, Oil, Sugar
function my_function(city){
if (city === "london") {
grain = 100;
Water = 65;
Salt = 2;
pulse = 1.5;
Oil = 5;
Sugar = 0;
} else if (city === "paris") {
grain = 100;
// and so on
}
// Variables now available here

2. (better) Call the second function inside the first one:

function my_function(city){
if (city === "london") {
var grain = 100;
var Water = 65;
var Salt = 2;
var pulse = 1.5;
var Oil = 5;
var Sugar = 0;
} else if (city === "paris") {
var grain = 100;
var Water = 75;
var Salt = 2;
var pulse = 1.5;
var Oil = 5;
var Sugar = 1;
} else if (city === "rome"){
var grain = 100;
var Water = 68;
var Salt = 2.2;
var pulse = 2;
var Oil = 3;
var Sugar = 0;
}
document.getElementById("The_Answers").innerHTML = "grain is "+ grain
+ "<br>Water is "+ Water
+ "<br>Salt is "+ Salt
+ "<br>pulse is "+ pulse
+ "<br>Oil is "+ Oil
+ "<br>Sugar is "+ Sugar;
secondFunction(Salt, pulse);
}
3. (better than 1 when you need the values outside the first function): Keep the values in data attributes:

<select id="city" onchange="my_function(this)">
<option value="">Pick a City</option>
<option value="london">London</option>
<option value="paris">Paris</option>
<option value="rome">Rome</option>
</select>
<div id="The_Answers"></div>


<script>
function my_function(sel){
city = sel.value;
if (city === "london") {
var grain = 100;
var Water = 65;
var Salt = 2;
var pulse = 1.5;
var Oil = 5;
var Sugar = 0;
} else if (city === "paris") {
var grain = 100;
var Water = 75;
var Salt = 2;
var pulse = 1.5;
var Oil = 5;
var Sugar = 1;
} else if (city === "rome"){
var grain = 100;
var Water = 68;
var Salt = 2.2;
var pulse = 2;
var Oil = 3;
var Sugar = 0;
}
sel.setAttribute("data-grain", grain);
sel.setAttribute("data-Water", Water);
// and so on

document.getElementById("The_Answers").innerHTML = "grain is "+ grain
+ "<br>Water is "+ Water
+ "<br>Salt is "+ Salt
+ "<br>pulse is "+ pulse
+ "<br>Oil is "+ Oil
+ "<br>Sugar is "+ Sugar;
}
var selcity = document.getElementById("city");
secondFunction(selcity.getAttribute("data-grain"), selcity.getAttribute("data-pulse");
</script>

Sempervivum
Mar 9th, 2017, 12:45 AM
PS: Consider keeping the values in an object:

var values = {"london": {
grain: 100,
Water: 65,
Salt: 2,
pulse: 1.5,
Oil: 3,
Sugar: 0},
"paris": {
grain: 100,
// and so on

Sugar: 0}
}
function my_function(city){
var currentvalues = values[city];
document.getElementById("The_Answers").innerHTML = "grain is "+ currentvalues.grain
+ "<br>Water is "+ currentvalues.Water
+ "<br>Salt is "+ currentvalues.Salt
+ "<br>pulse is "+ currentvalues.pulse
+ "<br>Oil is "+ currentvalues.Oil
+ "<br>Sugar is "+ currentvalues.Sugar;
}
Thus data and logic is separated and when modifying or extending the data you need to modify the object "values" only and can leave the remaining script unchanged.

spudnik
Mar 9th, 2017, 01:00 AM
Hi thanks for the reply, i'm not that familiar with objects, i shall look into this, i've not tried the other methods yet but will test them now.

cheers