We Keep Coding

javascript switch (option) with multiple variables

I have made this function here to calculate prices from choices in the select menu. I have made a switch but I dont understand where to input my function to trigger it (on html). The 2 other functions changeit() and changerepas() are onchange functions that will give you the basic price. (they are not linked to the question) (Note: This is my first switch ever, so it might look noobish to most of you. )
function taxesrepas(option){
var soustot;
var taxes;
var taxer;
var taxetotal = taxes + taxer;
var total = taxetotal + soustot;
var pricee;
var pricer;
var soustot = pricee + pricer;
switch (option){
case "spaghetti":
taxer = 0.69;
pricer = 8.95
break;
case "lasagne":
taxer = 0.75;
pricer = 9.95;
break;
case "salade":
taxes = 0.45;
pricee = 5.95;
break;
case "escargot":
taxes = 0.38;
pricee = 4.95;
break;
}
document.getElementById("taxes").innerHTML = taxetotal;
document.getElementbyid("total").innerHTML = total;
document.getElementbyid("soustot").innerHTML = soustot;
}
<select name="entree" id="entree" onChange="changeit(this.value)">
<option value="hidden" selected>Choisir...</option>
<option value="salade">Salade</option>
<option value="escargot">Escargot</option>
</select>
<img display="inline" id="imgselect" src="" alt="0.00$"/>
<h3 id= "choix1"></h3>
<p>Repas</p>
<select name="repas" id="repas" onChange="changerepas(this.value)">
<option value="hidden1" selected>Choisir...</option>
<option value="spaghetti">Spaghetti</option>
<option value="lasagne">Lasagne</option>
</select>
<h3 id="choix"></h3>
<h3 id="taxes"></h3>
<h3 id="soustotal"></h3>
<h3 id="total"></h3>

Maybe change the onChange to
function(){
taxesrepas(this.value);
changeit(this.value);
}

How can i take value from input select type and use it in javascript?

So I have this project where I have to make a clothing store and I want to do the following:
I have this code in html:
<select class="sizeb" style="display: none;">
<option value="xxs">XXS</option>
<option value="xs">XS</option>
<option value="s">S</option>
<option value="m">M</option>
<option value="l">L</option>
<option value="xl">XL</option>
<option value="xxl">XXL</option>
</select>
and with JavaScript I want to take the option value, check it's value and create a var price; then check and set a price:
var x = <somehow to get the value>;
if (x == 'xxs')
price = 5;
else if(x == 'xs')
price = 10;
and display it later this way:
document.getElementById("PriceTag").innerHTML = "Pret: " + price + " RON";
Any help is appreciated.

First, you just get a reference to the HTML element and assign that to a variable:
var select = document.querySelector(".sizeb");
Then you get the value:
var val = select.value;
Then you do your logic and calculations:
var x = <somehow to get the value>;
if (x == 'xxs'){
price = 5;
} else if(x == 'xs') {
price = 10;
}
And, then display the result:
document.getElementById("PriceTag").innerHTML = "Pret: " + price + " RON";
NOTE: You have your select to be hidden initially. If that's the case, no one will ever be able to select a value from it.
Now, you also have to decide "when" you want all this to be done. That could be when the value in the select changes. BUt, if that's the case, you should add a first option of something like --- Select One ---, because if the user wants the first selection, they won't do anything, which won't trigger the change event. So, putting it all together, we get:
// Get a reference to the select
var select = document.querySelector(".sizeb");
// Set up an event handler that runs when the value in the select changes:
select.addEventListener("change", function(){
// Then you get the value:
var x = select.value;
var price = null;
// Then you do your logic and calculations.
// And if will work, but for this a switch is better
switch (x) {
case 'xxs' :
price = 5;
break;
case 'xs' :
price = 10;
break;
case 's' :
price = 15;
break;
case 'm' :
price = 20;
break;
case 'l' :
price = 25;
break;
case 'xl' :
price = 30;
break;
case 'xxl' :
price = 35;
break;
}
document.getElementById("PriceTag").innerHTML = "Pret: " + price + " RON";
});
<select class="sizeb">
<option value="">--- Select One ---</option>
<option value="xxs">XXS</option>
<option value="xs">XS</option>
<option value="s">S</option>
<option value="m">M</option>
<option value="l">L</option>
<option value="xl">XL</option>
<option value="xxl">XXL</option>
</select>
<div id="PriceTag"></div>

You can:
1-Add an listener to the select like this
<select onchange="someFunction(this)" class="sizeb" style="display: none;>
2-create a function like this:
function someFunction(element){
va price = element.value;
document.getElementById("PriceTag").innerHTML = "Pret: " + price + " RON";
}

First function calls on html button onclick, but not any others

I've just begun learning javascript, and I'm running into an issue where only one of my 3 currently coded buttons will either recognize a click, or run the function associated when I click it. This first example of code works wonderfully;
The HTML
<div id="commonchecks">
<h3>Common Checks:</h3>
<p>Type of Check:</p>
<select id="CheckType">
<option value="Strength">Strength</option>
<option value="Stamina">Stamina</option>
<option value="Agility">Agility</option>
<option value="Intelligence">Intelligence</option>
<option value="Charisma">Charisma</option>
<option value="Perception">Perception</option>
</select>
<p>Complexity:</p>
<select id="Complexity">
<option value="Simple">Simple</option>
<option value="Complex">Complex</option>
</select>
<p>Circumstantial Factors (+/-):</p>
<input type="number" id="bxCircumstantialFactors" value="-2">
<h3 class="details">Check Details:</h3>
<p id="success" class="details">It was a XXXXXXX!</p>
<p id="rolltotal" class="details">You rolled a(n) XX.</p>
<p id="rollstandards" class="details">You needed a(n) XX or higher.</p>
<p id="experience" class="details">Experience Payout: 00 exp!</p>
<p id="duplicate">DUPLICATE!</p>
<button onclick="CheckRoll()" class="button" id="RollCheckButton">Roll</button>
</div>
And the javascript
function CheckRoll() {
//Loading Variables Up From User Input
numStrength = Number(document.getElementById("bxStrength").value);
numStamina = Number(document.getElementById("bxStamina").value);
numAgility = Number(document.getElementById("bxAgility").value);
numIntelligence = Number(document.getElementById("bxIntelligence").value);
numCharisma = Number(document.getElementById("bxCharisma").value);
numPerception = Number(document.getElementById("bxPerception").value);
numCircumstantialFactors = Number(document.getElementById("bxCircumstantialFactors").value);
//Making the Roll
numRoll = Math.floor(Math.random() * 20 + 1);
if (document.getElementById("duplicate").style.visibility === "visible"){
document.getElementById("duplicate").style.visibility = "hidden";
}
//Checking to see if the roll was a duplicate
if (numRoll === prevRoll) {
document.getElementById("duplicate").style.visibility = "visible";
}
//Checking the complexity of the check
switch (document.getElementById("Complexity").value){
case "Simple":
numBaseAddition = 10;
numStatModifier = 2;
break;
case "Complex":
numBaseAddition = 0;
numStatModifier = 1;
break;
}
//Checking the stat associated and marking it as the calculated stat
switch (document.getElementById("CheckType").value) {
case "Strength":
numRelevantStatValue = numStrength;
break;
case "Stamina":
numRelevantStatValue = numStamina;
break;
case "Agility":
numRelevantStatValue = numAgility;
break;
case "Intelligence":
numRelevantStatValue = numIntelligence;
break;
case "Charisma":
numRelevantStatValue = numCharisma;
break;
case "Perception":
numRelevantStatValue = numPerception;
break;
}
//Determining how much value of a stat effects your chances of success
numStatAddition = numRelevantStatValue / numStatModifier;
//Determining your factor of success
numSuccessFactor = numBaseAddition + numStatAddition + numCircumstantialFactors;
//If success factor is a 20 or higher, set it to 19 since one can always roll a 1
if (numSuccessFactor >= 20){
numSuccessFactor = 19;
}
//Calculating the number you need to beat
numFailureFactor = 20 - numSuccessFactor;
//If failure factor is a 20 or higher, set it to 19 since one can always roll a 20
if (numFailureFactor >= 20) {
numFailureFactor = 19;
}
//Calculating amount of experience possible to be earned
numExperience = numFailureFactor * 5;
//Reporting on the successfulness or not
if (numRoll >= numFailureFactor + 1){
document.getElementById("success").innerHTML = "It was a SUCCESS!";
}
if (numRoll === 20){
document.getElementById("success").innerHTML = "It was a CRITICAL SUCCESS!";
}
if (numRoll < numFailureFactor + 1){
document.getElementById("success").innerHTML = "It was a FAILURE!";
numExperience = 0;
}
if (numRoll === 1){
document.getElementById("success").innerHTML = "It was a CRITICAL FAILURE!";
numExperience = 0;
}
//Reporting the dice roll
document.getElementById("rolltotal").innerHTML = "You rolled a(n) " + numRoll + ".";
//Reporting the standards
document.getElementById("rollstandards").innerHTML = "You needed a(n) " + (numFailureFactor + 1) + " or higher.";
//Reporting experience gain
document.getElementById("experience").innerHTML = "Experience Payout: " + numExperience + " exp!";
//Saving last roll
prevRoll = numRoll;
However, on a much simpler function, it won't work for whatever reason. I've tried putting the javascript into firefox's debugger, and it didn't reveal any syntax mistakes. Here's the section that won't work.
The HTML
<p class="blocksection">Block Type:</p>
<select id="blocktype">
<option value="Unarmed">Unarmed</option>
<option value="Armed">Armed</option>
</select>
<p class="blocksection" id="blockreporter">Your Block total is a(n) XX!</p>
<p class="blocksection" id="blockduplicate">DUPLICATE!</p>
<button onclick="BlockRoll()" class="button" id="blockbutton">Block!</button>
And the javascript
function BlockRoll() {
numStamina = Number(document.getElementById("bxStamina").value);
if (document.getElementById("blocktype").value === "Unarmed") {
document.getElementById("blockreporter").InnerHTML = "Your Block total is a(n) " + Math.floor(Math.random() * 6 + 1) + "!";
}
else {
document.getElementById("blockreporter").InnerHTML = "Your Block total is a(n) " + (Math.floor(Math.random() * 6 + 1) + (numStamina/2)) + "!";
}
}
I'm not used to this language, but I know c# well enough and they appear relatively similar. Is there a really simple mistake that I'm making somewhere?
Thanks

You're calling element.InnerHTML in your second example which is incorrect, as the correct value is innerHTML (note the lowercase i.)
If you hit F12 (in most browsers) the developer console will come up and show you common errors like these.

JavaScript Doesn't Output Any Value

Recently I've started learning JavaScript in use with HTML. I wanted to create a simple calculator for a game I am using. You select a type of ore, the amount of the ore left in the asteroid, the value mined each cycle, and the duration of one cycle, and the script is supposed to return the volume of ore to be mined and number of cycles required as well as their total duration.
I've tried several things, like enclosing the function in try statement, but that didn't work either. I am asking for your help trying to figure out what I did wrong and point me in the right way. Thanks in advance.
<html>
<head>
<title>Mining Calculator - IndX: Industry Extension</title>
<script type="text/javascript">
function oreCalc() {
var ore = document.getElementById("ores").value;
var volume;
var amount = document.getElementById("amnt").value;
var yield = document.getElementById("yield").value;
var cycle = document.getElementById("cycle").value;
try{
switch(ore){
case "veldspar":
volume = 0.1;
break;
case "scordite":
volume = 0.15;
break;
case "pyroxeres":
volume = 0.3;
break;
case "plagioclase":
volume = 0.35;
break;
case "omber":
volume = 0.6;
break;
case "kernite":
volume = 1.2;
break;
case "jaspet":
volume = 2;
break;
case "hemorphite":
volume = 3;
break;
case "gneiss":
volume = 5;
break;
case "dark_ochre":
volume = 8;
break;
case "spodumain":
volume = 16;
break;
case "crokite":
volume = 16;
break;
case "arkonor":
volume = 16;
break;
case "mercoxit":
volume = 40;
break;
}
var rockvolume = amount * volume;
var cycles = rockvolume / yield;
var seconds = cycles * cycle;
var minutes;
while(seconds > 60)
{
seconds -= 60;
minutes++;
}
var text = "The asteroid has " + rockvolume + " m3 of ore. \n You'll mine it in " + Math.ceil(cycles) +
" cycles. \n It will take you " + minutes + "min " + Math.ceil(seconds) "s to mine.";
document.getElementById("output").innerHTML = text;
}
catch(err){
var text = "Input all required fields";
document.getElementById("output").innerHTML = text;
}
}
</script>
</head>
<body>
<table><tr><td>Ore:</td><td>
<select name="ores" id="ores" onchange="oreCalc()">
<option value="veldspar">Veldspar</option>
<option value="scordite">Scordite</option>
<option value="pyroxeres">Pyroxeres</option>
<option value="plagioclase">Plagioclase</option>
<option value="omber">Omber</option>
<option value="kernite">Kernite</option>
<option value="jaspet">Jaspet</option>
<option value="hemorphite">Hemorphite</option>
<option value="gneiss">Gneiss</option>
<option value="dark_ochre">Dark Ochre</option>
<option value="spodumain">Spodumain</option>
<option value="crokite">Crokite</option>
<option value="arkonor">Arkonor</option>
<option value="mercoxit">Mercoxit</option>
</select></td><td rowspan="4"><p id="output"></p></td></tr>
<tr><td>Amount:</td><td>
<input type="number" name="amount" id="amnt" oninput="oreCalc()">
</td></tr>
<tr><td>Yield:</td><td>
<input type="number" name="yield" id="yield" oninput="oreCalc()">
</td></tr>
<tr><td>Cycle duration:</td><td><input type="number" name="cycle" id="cycle" oninput="oreCalc()"></td></tr>
</table>
</body>
</html>

To track down these sorts of problems you need to use your browser's error console.
In Firefox it's Menu -> Developer -> Web Console
In Chrome it's Menu -> More Tools -> Javascript Console
In IE I think you hit F12 a click console.
I'm using Firefox and I see the following error on your page:
SyntaxError: missing ; before statement ore.html:66
And if you go to around line 66 you'll see:
var text = "The asteroid has " + rockvolume + " m3 of ore. \n You'll mine it in " + Math.ceil(cycles) +
" cycles. \n It will take you " + minutes + "min " + Math.ceil(seconds) "s to mine.";
Note the missing "+" after Math.ceil(seconds) but before "s to mine."? Add the plus sign and it should now work.
Btw, it's often better to use an external file for Javascript. I find it makes it much easier to manage and track down issues.

Javascript Drop Down Menu Currency Converter

Hello everyone I need you guys help with this
It's suppose to convert the value you entered after you choose an option and click convert.
HTML CODE:/(I'm not sure how to use drop down menus with java script)
<html>
<body>
<form>
<select name="converts" id="Selection">
<option>Chose Option</option>
<option value="1" >Currency 1 to Currency2</option>
<option value="2" >Currency 2 to Currency1</option>
</select>
<br><br>
Value <input type="text" id="value"><br>
Conversion <input type="text" id="conversion"><br><br>
<input type="Button" onclick="Conversion()" value="Convert">
</form>
</body>
</html>
JAVASCRIPT CODE:
<script type="text/javascript">
function Conversion()
{
var val = document.getElementById ("value").value;
var madeSelection = document.getElementById ("Selection").value;
if(madeSelection==1( var ans= +value * 1.37); )){
if(madeSelection==2 ( var ans= +value * 1.30; )){
}
}
conversion.value = ans;
}
</script>

There are several problems that are causing this to be non-functional:
You declare a variable called val that you are not using. Everywhere else in your code, it is called value.
var val = document.getElementById ("value").value;
Older browsers may not deal with a value property of a select element
var madeSelection = document.getElementById ("Selection").value;
Your if statements are malformed (and nested for some reason), and some of the operations are weird.
if(madeSelection==1( var ans= +value( 0.37); )){
if(madeSelection==2 ( var ans= +value * 0.30; )){
...
When properly formatted, your code is:
if (madeSelection == 1(var ans = +value(0.37);)) {
if (madeSelection == 2(var ans = +value * 0.30;)) {
if (madeSelection == 3(var ans = +value * 2.70;)) {
if (madeSelection == 4(var ans = +value * 0.80;)) {
if (madeSelection == 5(var ans = +value * 3.38;)) {
if (madeSelection == 6(var ans = +value * 1.25;)) {}
}
}
}
}
}
When more properly written, it should be:
if (madeSelection == 1) {
var ans = +value(0.37);
}
if (madeSelection == 2) {
var ans = +value * 0.30;
}
if (madeSelection == 3) {
var ans = +value * 2.70;
}
if (madeSelection == 4) {
var ans = +value * 0.80;
}
if (madeSelection == 5) {
var ans = +value * 3.38;
}
if (madeSelection == 6) {
var ans = +value * 1.25;
}
although:
the ans variable, along with all of your other variables should be declared at the top of the function (because that's where they're actually declared anyway, look up variable hoisting).
I'm not sure why you're prefixing the righthand assigment with the +.
value is not a function, but you're apparently attempting to use it as one if madeSelection == 1.
Finally, you're referencing a variable called conversion which has not been defined. This will still probably work as you have an input with an id of conversion and most (but not all) browsers will store the id as a global variable pointing to the element.
Also, when you have many if statements, you may wan't to consider using a switch statement instead.
All together, it should look more like this:
function Conversion() {
var value = document.getElementById("value").value,
conversion = document.getElementById("conversion"),
madeSelection = document.getElementById("Selection"), // get the select
selection = madeSelection.options[madeSelection.selectedIndex].value, // get the selected option
ans = 0;
value = parseFloat(value);
if (!isNaN(value)) {
switch (selection) {
case "6":
ans = value * 1.25;
break;
case "5":
ans = value * 3.38;
break;
case "4":
ans = value * 0.8;
break;
case "3":
ans = value * 2.7;
break;
case "2":
ans = value * 0.3;
break;
case "1":
ans = value * 0.37;
break;
default:
ans = 0;
break;
}
}
conversion.value = ans;
}
<select name="converts" id="Selection">
<option>Choose Option</option>
<option value="1" >EC to US</option>
<option value="2" >EC to Euro</option>
<option value="3" >US to EC</option>
<option value="4" >US to Euro</option>
<option value="5" >Euro to EC</option>
<option value="6" >Euro to US</option>
</select>
<br />
<label for="value">Value</label>
<input type="text" id="value"><br>
<label for="conversion">Conversion</label>
<input type="text" id="conversion"><br><br>
<input type="Button" onclick="Conversion()" value="Convert">

This should work for you:
function Conversion() {
var val = document.getElementById("value").value,
madeSelection = document.getElementById("Selection").value,
ans
if (madeSelection == 1) ans = val * 0.37;
if (madeSelection == 2) ans = val * 0.30;
if (madeSelection == 3) ans = val * 2.70;
if (madeSelection == 4) ans = val * 0.80;
if (madeSelection == 5) ans = val * 3.38;
if (madeSelection == 6) ans = val * 1.25;
document.getElementById("conversion").value = ans;
}
<form>
<select name="converts" id="Selection">
<option>Chose Option</option>
<option value="1">EC to US</option>
<option value="2">EC to Euro</option>
<option value="3">US to EC</option>
<option value="4">US to Euro</option>
<option value="5">Euro to EC</option>
<option value="6">Euro to US</option>
</select>
<br>
<br>Value
<input type="text" id="value">
<br>Conversion
<input type="text" id="conversion">
<br>
<br>
<input type="Button" onclick="Conversion()" value="Convert">
</form>

Instead a lot IF statements you should use SWITCH.
This is the right way
JS
function Conversion()
{
var val = parseInt(document.getElementById ("value").value);
var madeSelection = parseInt(document.getElementById ("Selection").value);
switch(madeSelection)
{
case 1:
var converted = val * 0.37; //EC to US
break;
case 2:
var converted = val * 0.30; //EC to EUR
break;
case 3:
var converted = val * 2.70; //US to EC
break;
//ETC....
default:
alert('You chose wrong option'); // if user chose wrong option, send him message
break;
}
document.getElementById ("conversion").value = converted;
return false; //prevent for submit form
}
Here is fiddle : http://jsfiddle.net/1cdkvpms/