My task is checking what an user keys in. If he keys in "Mars", he gets the value.
PLanet: <input type="text" id="form_1">
<input type="submit" onClick="send()" value="Send">
<script>
var planetEntered = document.getElementById('form_1').value;
var plantesLength = new Array(3);
plantesLength['Mars'] = 52;
plantesLength['Venera'] = 30;
plantesLength['Earth'] = 10;
plantesLength['Merkyriy'] = 60;
alert(plantesLength['Merkyriy']);
function send() {
switch(form_1) {
case 'Mars':
alert(plantesLength['Mars']);
break;
case 'Venera':
alert(plantesLength['Venera']);
break;
case 'Earth':
alert(plantesLength['Earth']);
break;
case 'Merkyriy':
alert(plantesLength['Merkyriy']);
break;
default:
alert("К сожалению, мы не нашли ни одну программу.");
break;
}
}
The function returns default-block. How to fix? Thanks.
try this
you have to get the input values inside the send function.
Demo Link http://jsbin.com/ejaSUTiH/1/
PLanet: <input type="text" id="form_1">
<input type="submit" onClick="send()" value="Send">
<script>
var plantesLength = new Array(3);
plantesLength['Mars'] = 52;
plantesLength['Venera'] = 30;
plantesLength['Earth'] = 10;
plantesLength['Merkyriy'] = 60;
alert(plantesLength['Merkyriy']);
function send() {
var planetEntered = document.getElementById('form_1').value;
console.log(planetEntered);
switch(planetEntered) {
case 'Mars':
alert(plantesLength['Mars']);
break;
case 'Venera':
alert(plantesLength['Venera']);
break;
case 'Earth':
alert(plantesLength['Earth']);
break;
case 'Merkyriy':
alert(plantesLength['Merkyriy']);
break;
default:
alert("К сожалению, мы не нашли ни одну программу.");
break;
}
}
</script>
You've to declare a variable inside the function send(): And set
planetEntered in switch case for checking:
function send() {
var planetEntered = document.getElementById('form_1').value; // Here
switch(planetEntered) { // Change
}
}
JS Fiddle Demo
You don't assign the value of the input box in the send() method so it's value is the default (empty) when send() is called.
Related
I'm making a calculator for a game I play and whenever I run it, it just returns "NaN" for two values, only one of the values actually returns as it should. The two values that return NaN are the ones that run through switch statements and I found that the values you get from the switch statements are undefined so I think that's where it goes wrong. I tried looking for other questions like this on StackOverflow and I found some but their answers didn't work for me.
var iron_cost = 0
var string_cost = 0
var spider_e_cost = 0
var tami_1_amount = 0
var tami_2_amount = 0
var tami_1_tier = 0
var tami_2_tier = 0
var ta_per_min_1 = 0
var ta_per_min_2 = 0
var cpt_tpc = 0
var cph_tpc = 0
var cpd_tpc = 0
function calculate_tpc() {
var string_cost = document.getElementById("string_tpc").value;
var spider_e_cost = document.getElementById("spider_eye_tpc").value;
var iron_cost = document.getElementById("iron_tpc").value;
var tami_1_tier = document.getElementById("minions_tier_1_tpc").value;
var tami_2_tier = document.getElementById("minions_tier_2_tpc").value;
var tami_1_amount = document.getElementById("minions_1_tpc").value;
var tami_2_amount = document.getElementById("minions_2_tpc").value;
var step1 = string_cost * 3.16;
var step2 = iron_cost * 0.2;
var step3 = step1 + step2 + spider_e_cost;
switch (tami_1_tier) {
case 1:
var ta_per_min_1 = 2;
break;
case 2:
var ta_per_min_1 = 2;
break;
case 3:
var ta_per_min_1 = 2.3;
break;
case 4:
var ta_per_min_1 = 2.3;
break;
case 5:
var ta_per_min_1 = 2.6;
break;
case 6:
var ta_per_min_1 = 2.6;
break;
case 7:
var ta_per_min_1 = 3.15;
break;
case 8:
var ta_per_min_1 = 3.15;
break;
case 9:
var ta_per_min_1 = 4.1;
break;
case 10:
var ta_per_min_1 = 4.1;
break;
case 11:
var ta_per_min_1 = 6;
break;
}
switch (tami_2_tier) {
case 1:
var ta_per_min_2 = 2;
break;
case 2:
var ta_per_min_2 = 2;
break;
case 3:
var ta_per_min_2 = 2.3;
break;
case 4:
var ta_per_min_2 = 2.3;
break;
case 5:
var ta_per_min_2 = 2.6;
break;
case 6:
var ta_per_min_2 = 2.6;
break;
case 7:
var ta_per_min_2 = 3.15;
break;
case 8:
var ta_per_min_2 = 3.15;
break;
case 9:
var ta_per_min_2 = 4.1;
break;
case 10:
var ta_per_min_2 = 4.1;
break;
case 11:
var ta_per_min_2 = 6;
break;
}
var step4 = ta_per_min_1 * tami_1_amount;
var step5 = ta_per_min_2 * tami_2_amount;
var step6 = step4 + step5;
var step7 = step6 * step3;
var step8 = step7 * 60;
var step9 = step8 * 24;
document.getElementById("cpt_tpc").innerHTML = step3;
document.getElementById("cph_tpc").innerHTML = step8;
document.getElementById("cpd_tpc").innerHTML = step9;
document.getElementById("test1").innerHTML = ta_per_min_1;
document.getElementById("test2").innerHTML = ta_per_min_2;
}
html,
body {
text-align: center;
}
;
<html>
<head>
<link rel="stylesheet" type="text/css" href="interface.css" />
<body>
<h1>Calculator</h1>
<br /> String Price: <input type="text" id="string_tpc" value="0">
<br /> Spider Eye Price: <input type="text" id="spider_eye_tpc" value="0">
<br /> Iron Price: <input type="text" id="iron_tpc" value="0">
<br /> Minions Tier 1: <input type="text" id="minions_tier_1_tpc" value="0"> Minion Amount 1: <input type="text" id="minions_1_tpc" value="0">
<br /> Minions Tier 2: <input type="text" id="minions_tier_2_tpc" value="0"> Minion Amount 2: <input type="text" id="minions_2_tpc" value="0">
<br />
<button onclick="calculate_tpc()">Calculate</button>
<br /> Current Coins per Tarantula: <span id="cpt_tpc">0</span>
<br /> Coins per hour: <span id="cph_tpc">0</span>
<br /> Coins per day: <span id="cpd_tpc">0</span>
<script type="text/javascript" src="main.js"></script>
</body>
</head>
</html>
The main problem is to use strings from input. The further effect is to get no values from the switch statements, because the value is a string and in all cases, you have numbers. The comparison is here strict, like ===.
For unknown values, you could return the function and omit calculation with not given values.
'use strict';
function calculate_tpc() {
var string_cost = +document.getElementById("string_tpc").value;
var spider_e_cost = +document.getElementById("spider_eye_tpc").value;
var iron_cost = +document.getElementById("iron_tpc").value;
var tami_1_tier = +document.getElementById("minions_tier_1_tpc").value;
var tami_2_tier = +document.getElementById("minions_tier_2_tpc").value;
var tami_1_amount = +document.getElementById("minions_1_tpc").value;
var tami_2_amount = +document.getElementById("minions_2_tpc").value;
var step1 = string_cost * 3.16;
var step2 = iron_cost * 0.2;
var step3 = step1 + step2 + spider_e_cost,
ta_per_min_1,
ta_per_min_2;
switch (tami_1_tier) {
case 1:
case 2:
ta_per_min_1 = 2;
break;
case 3:
case 4:
ta_per_min_1 = 2.3;
break;
case 5:
case 6:
ta_per_min_1 = 2.6;
break;
case 7:
case 8:
ta_per_min_1 = 3.15;
break;
case 9:
case 10:
ta_per_min_1 = 4.1;
break;
case 11:
ta_per_min_1 = 6;
break;
default: return;
}
switch (tami_2_tier) {
case 1:
case 2:
ta_per_min_2 = 2;
break;
case 3:
case 4:
ta_per_min_2 = 2.3;
break;
case 5:
case 6:
ta_per_min_2 = 2.6;
break;
case 7:
case 8:
ta_per_min_2 = 3.15;
break;
case 9:
case 10:
ta_per_min_2 = 4.1;
break;
case 11:
ta_per_min_2 = 6;
break;
default: return;
}
var step4 = ta_per_min_1 * tami_1_amount;
var step5 = ta_per_min_2 * tami_2_amount;
var step6 = step4 + step5;
var step7 = step6 * step3;
var step8 = step7 * 60;
var step9 = step8 * 24;
document.getElementById("cpt_tpc").innerHTML = step3;
document.getElementById("cph_tpc").innerHTML = step8;
document.getElementById("cpd_tpc").innerHTML = step9;
//document.getElementById("test1").innerHTML = ta_per_min_1;
//document.getElementById("test2").innerHTML = ta_per_min_2;
}
<h1>Calculator</h1>
<br /> String Price: <input type="text" id="string_tpc" value="0">
<br /> Spider Eye Price: <input type="text" id="spider_eye_tpc" value="0">
<br /> Iron Price: <input type="text" id="iron_tpc" value="0">
<br /> Minions Tier 1: <input type="text" id="minions_tier_1_tpc" value="0"> Minion Amount 1: <input type="text" id="minions_1_tpc" value="0">
<br /> Minions Tier 2: <input type="text" id="minions_tier_2_tpc" value="0"> Minion Amount 2: <input type="text" id="minions_2_tpc" value="0">
<br />
<button onclick="calculate_tpc()">Calculate</button>
<br /> Current Coins per Tarantula: <span id="cpt_tpc">0</span>
<br /> Coins per hour: <span id="cph_tpc">0</span>
<br /> Coins per day: <span id="cpd_tpc">0</span>
var deviceName = '';
if(deviceName == 'sampleOne'){
newName = 'One'
}
if(deviceName == 'sampleTwo'){
newName = 'Two'
}
if(deviceName == 'sampletThree'){
newName = 'Three'
}
I have this simple if statement for Javascript.
How it works?
When a data inputed is sampleOne the output will be One. That's it, very simple right?
Take note that this code is working fine. But my problem is I have so many sample and I think using this kind of If statement is a bad idea because it will be too long. Is there a way to shorten this if statament?
If you have a lot of these you can make an object that maps the deviceName to the newName. Then you can just look it up:
let lookup = {
'sampleOne': 'One',
'sampleTwo': 'Two' ,
'sampleThree': 'Three'
}
let deviceName = 'sampleTwo'
let newname = lookup[deviceName]
console.log(newname)
You can use switch statement:
var deviceName = 'sampleFour';
var newName;
switch (deviceName) {
case 'sampleOne':
newName = 'One';
break;
case 'sampleTwo':
newName = 'Two';
break;
case 'sampleThree':
newName = 'Three';
break;
case 'sampleFour':
newName = 'Four';
break;
case 'sampleFive':
newName = 'Five';
}
console.log(newName);
var deviceName = "sampleOne";
newName =deviceName.split('sample')[1];
console.log(newName );
If your value starts with sample just use this logic
You can use switch statement. Find an example below:
<html>
<body>
<input id="myInput" type="text">
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var text;
var deviceName = document.getElementById("myInput").value;
switch(deviceName ) {
case "sampleOne":
text = "One";
break;
case "sampleTwo":
text = "Two";
break;
case "sampletThree":
text = "Three";
break;
default:
text = "No Match";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
You can also use a Switch instead of IF condition. Switch can be used if you want to do multiple operations in conditions.
var deviceName = 'sampleOne';
switch(deviceName)
{
case 'sampleOne':
newName = 'One';
break;
case 'sampleTwo':
newName ='Two';
break;
case 'sampleThree':
newName ='Three';
break;
default:
break;
}
Still getting the hang of Javascript so forgive me if this seems like basic stuff.
I've set up a slider on a web page and the CSS/HTML function perfectly but I'm trying to display a year value to correspond with each value of the slider from 1 to 6.
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = 133;
slider.oninput = function() {
switch (this.value) {
case 1:
output.innerHTML = 133;
break;
case 2:
output.innerHTML = 88;
break;
case 3:
output.innerHTML = 60;
break;
case 4:
output.innerHTML = 44;
break;
case 5:
output.innerHTML = 36;
break;
case 6:
output.innerHTML = 26;
break;
default:
output.innerHTML = 133;
}
output.innerHTML = this.value;
}
<div class="slidecontainer">
<input type="range" min="1" max="6" value="1" class="slider" id="myRange">
<p><span id="demo"></span> BC</p>
</div>
Currently it outputs 1 to 6 so it does function and I can set the default value to 133 before input, it just doesn't push out the values I need once the slider is moved.
Is a switch statement the correct tool for this job and, if so, where have I gone wrong?
this.value returns a string. You need to make it return a number in order for your comparison to work. Or compare against strings. Either way, the below example works. Look how I added parseInt(this.value) inside your switch operator.
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = 133;
slider.oninput = function() {
switch (parseInt(this.value)) {
case 1:
output.innerHTML = 133;
break;
case 2:
output.innerHTML = 88;
break;
case 3:
output.innerHTML = 60;
break;
case 4:
output.innerHTML = 44;
break;
case 5:
output.innerHTML = 36;
break;
case 6:
output.innerHTML = 26;
break;
default:
output.innerHTML = 133;
}
}
<div class="slidecontainer">
<input type="range" min="1" max="6" value="1" class="slider" id="myRange">
<p><span id="demo"></span> BC</p>
</div>
How to I restrict a number entering into input field (numeric) greater than another number using JavaScript?
I used:
function numberalert(e) {
var matrictotal = document.getElementById("matrictotal").value;
var matricobtained = document.getElementById("matricobtained").value;
var intertotal = document.getElementById("intertotal").value;
var interobtained = document.getElementById("interobtained").value;
var bachelortotal = document.getElementById("bachelortotal").value;
var bachelorobtained = document.getElementById("bachelorobtained").value;
var mphilltotal = document.getElementById("mphilltotal").value;
var mphillobtained = document.getElementById("mphillobtained").value;
if (matricobtained > matrictotal || interobtained > intertotal || bachelorobtained > bachelortotal || mphillobtained > mphilltotal) {
alert("pleses provide obtained marks less then total marks");
e.returnValue = false;
e.preventDefault();
} else {
return true;
}
}
But after alert it allows number place in input field.
First, just get the object that represents each object then pass in the two methods into a helped method to do the actual comparison. If the values are not what you are looking for, then set the objects value to "" and highlight the textbox to show which one is wrong.
function numberalert(e) {
var matrictotal = document.getElementById("matrictotal");
var matricobtained = document.getElementById("matricobtained");
var intertotal = document.getElementById("intertotal");
var interobtained = document.getElementById("interobtained");
var bachelortotal = document.getElementById("bachelortotal");
var bachelorobtained = document.getElementById("bachelorobtained");
var mphilltotal = document.getElementById("mphilltotal");
var mphillobtained = document.getElementById("mphillobtained");
checkValue(matrictotal, matricobtained);
checkValue(intertotal, interobtained);
checkValue(bachelortotal, bachelorobtained);
checkValue(mphilltotal, mphillobtained);
}
function checkValue(total, obtained){
if (obtained.value > total.value) {
alert("Please provide obtained marks less then total marks: " + obtained.id);
obtained.value = "";
obtained.classList.add("error");
} else {
obtained.classList.remove("error");
return true;
}
}
.error {
border: 2px solid #FF0000;
}
<label for="matrictotal">matrictotal</label>
<input type="text" id="matrictotal" value="10">
<label for="matricobtained">matricobtained</label>
<input type="text" id="matricobtained" value="10">
<br />
<label for="intertotal">intertotal</label>
<input type="text" id="intertotal" value="10">
<label for="interobtained">interobtained</label>
<input type="text" id="interobtained" value="10">
<br />
<label for="bachelortotal">bachelortotal</label>
<input type="text" id="bachelortotal" value="10">
<label for="bachelorobtained">bachelorobtained</label>
<input type="text" id="bachelorobtained" value="10">
<br />
<label for="mphilltotal">mphilltotal</label>
<input type="text" id="mphilltotal" value="10">
<label for="mphillobtained">mphillobtained</label>
<input type="text" id="mphillobtained" value="10">
<button onclick=numberalert(this)>Check values</button>
Note : In Javascript there is no strictly greater than or strictly less than comparator .
In case if you need strictly greater than use
(a !==b && a > b) (or) (!(a < b))
Similarly for strictly less than use
(a !== b && a < b) (or) (!(a>b))
var toCheckNumber = 100;
validate = function(el, event) {
var errorText = document.getElementById('errorText');
errorText.innerHTML = "";
var x = event.which;
var value = el.value;
var number = 0;
switch (x) {
case 48: number =0;break;
case 49: number = 1; break;
case 50: number = 2; break;
case 51: number = 3; break;
case 52: number = 4; break;
case 53: number = 5; break;
case 54: number = 6; break;
case 55: number = 7; break;
case 56: number = 8; break;
case 57: number = 9; break;
case 8: number = -1; break;
case 46: number = -1; break;
default : event.preventDefault(); return ;
}
var tempval = (number !== -1) ? value * 10 + number : value;
if (!(tempval < toCheckNumber)) {
event.preventDefault();
errorText.innerHTML = "Enter number less than " + toCheckNumber;
}
}
<input type="number" onkeydown="validate(this,event)" onchange="document.getElementById('errorText').innerHTML=''">
<div id="errorText" style="color:red"></div>
I am attempting to change an image with a javascript function. I thought it was easy, but can't get it to work. I can't seem to find my error. Here is the javascript:
function rollDice() {
rollCount = rollCount + 1;
dice1 = Math.floor(Math.random() * 6));
switch (dice1) {
case 0:
document.getElementById("dice1").src = "Photos/redpipdice1.png";
break;
case 1:
document.getElementById("dice1").src = "Photos/redpipdice2.png";
break;
case 2:
document.getElementById("dice1").src = "Photos/redpipdice3.png";
break;
case 3:
document.getElementById("dice1").src = "Photos/redpipdice4.png";
break;
case 4:
document.getElementById("dice1").src = "Photos/redpipdice5.png";
break;
case 5:
document.getElementById("dice1").src = "Photos/redpipdice6.png";
break;
}
}
It is linked to the html with this:
<div class = "dice-images inline">
<img id = "dice1" src = "Photos/redpipdice1.png" />
<p>Click dice to hold</p>
<div class = "button">
<button id = "roll-dice" type="button" onclick = "rollDice()">ROLL!</button>
</div>
<img id="dice1" src="Photos/redpipdice1.png" />
<button id="roll-dice" type="button">ROLL!</button>
document.getElementById(`roll-dice`).addEventListener(`click`, () => {
document.getElementById(`dice1`).src = `Photos/redpipdice${getRandomInt(1, 6)}.png`;
rollCount++;
});
function getRandomInt(min, max) {
return min + Math.floor(Math.random() * (max - min + 1));
}