Switch case simple example not reflecting value in paragraph - javascript

I have got a simple switch case example in javascript. Though, the value in paragraph should be reflected as the third option in switch-case, it is showing nothing or blank paragraph. Pl, help!
<html>
<head></head>
<body>
<p id="para1"></p>
<script>
var i = 3;
switch(i){
case 1: {
document.getElementById('para1').value = "The value is one.";
break;
}
case 2: {
document.getElementById('para1').value = "The value is two.";
break;
}
case 3: {
document.getElementById('para1').value = "The value is three.";
break;
}
default:{
document.getElementById('para1').value = "The value is undefined."
}
}
</script>
</body>
</html>


p tag in not input element hence it doesn't have value. You should use innerHTML to set the value.
<html>
<head></head>
<body>
<p id="para1"></p>
<script>
var i = 3;
switch(i){
case 1: {
document.getElementById('para1').innerHTML = "The value is one.";
break;
}
case 2: {
document.getElementById('para1').innerHTML = "The value is two.";
break;
}
case 3: {
document.getElementById('para1').innerHTML = "The value is three.";
break;
}
default:{
document.getElementById('para1').innerHTML = "The value is undefined."
}
}
</script>
</body>
</html>


Use innerHTML instead of value:
<html>
<head></head>
<body>
<p id="para1"></p>
<script>
var i = 3;
switch(i){
case 1: {
document.getElementById('para1').innerHTML = "The value is one.";
break;
}
case 2: {
document.getElementById('para1').innerHTML = "The value is two.";
break;
}
case 3: {
document.getElementById('para1').innerHTML = "The value is three.";
break;
}
default:{
document.getElementById('para1').innerHTML = "The value is undefined."
}
}
</script>
</body>
</html>


var i = 3;
switch(i){
case 1: {
document.getElementById('para1').innerHTML = "The value is one.";
break;
}
case 2: {
document.getElementById('para1').innerHTML = "The value is two.";
break;
}
case 3: {
document.getElementById('para1').innerHTML = "The value is three.";
break;
}
default:{
document.getElementById('para1').innerHTML = "The value is undefined."
}
}
<p id="para1">test</p>

Related

JavaScript calculator just returns "NaN"

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>

Is it possible to put in a atoomnumber and out a atoomname in javascript?

Here is the code i already attempted but it didnt work out:
This code is made by a 14 year old boy (me) so dont worry about the maintenance.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AAPNE berekenen</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="title" id="title">Dit zijn de resultaten:</h1>
<form id="Form">
Atoomnummer: <br>
<input id="Atoomnummer" type="text" placeholder="Type the Atoomnumber"> <br>
Massa: <br>
<input id="Massa" type="text" placeholder="Type the massa of the atoom"> <br>
</form>
<button type="button" onclick="berekenen();" >Bereken atoom</button>
<button type="button" onclick="Writing();" >Krijg antwoorden</button>
<script src="script.js"></script>
</body>
</html>
CSS:
body {
background-color: rgba(145, 248, 248, 0.562);
border: 2px solid black;
}
button {
padding: 10px;
padding-right: 10px;
margin: 20px;
}
input {
padding: 10px;
margin: 5px;
}
Javascript
var Atoomnaam;
var Atoomnummer;
var Protonen;
var Neutronen;
var Elektronen;
var TextInput;
var index;
var Naam = [
"Calcium(Ca)","Scandium(Se)","Titaan(Ti)","Vanadium(V)","Chroom(Cr)","Mangaan(Mn)","Ijzer(Fe)","Kobalt(Co)"
,"Nikkel(Ni)","Koper(Cu)","Zink(Zn)","Galium(Ga)","Germanium(Ge)","Arseen(As)","Seleen(Se)","Broom(Br)","Krypton(Kr)","Rubidium(Rb)","Strontium(Sr)","Yttrium(Y)","Zirkonium(Zr)","Niobium(Nb)"
,"Molybdeen(Mo)","Technetium(Te)","Ruthenium(Ru)","Rhodium(Rh)","Palladium(Pd)","Zilver(Ag)","Cadmiun(Cd)","Indium(In)","Tin(Sn)","Antimoon(Sb)","Telluur(Te)","Jood(I)","Xenon(Xe)"
,"Cesium(Cs)","barium(Ba)","lanthaan(La)","Cerium(Ce)","Praseodymium(Pr)","Neodymium(Nd)","Promethium(Pm)","Samarium(Sm)","Europium(Eu)","Gadolinium(Gd)","Terbium(Tb)","Dysprosium(Dy)"
,"Holium(Ho)","Erbium(Er)","Thulium(Tm)","Ytterbium(Yb)","Lutetium(Lu)","Halfnium(Hf)","Tantaal(Ta)","Wolfraam(W)","Renium(Re)","Osmiun(Os)","Iridium(Ir)","Platina(Pt)","Goud(Au)","Kwik(Hg)"
,"Thallium(Tl)","Lood(Pb)","Bismut(Bi)","Pololnium(Po)","Astaat(At)","Radon(Rn)","francium(Fr)","Radium(Ra)","Actinimiun(Ac)","Thorium(Th)","Protactinium(Pa)","Uraan(U)","Neptunium(Np)"
,"Plutonium(Pu)","Americium(Am)","Curium(Cm)","berkelium(Bk)","Californium(Cf)","Einsteinium(Es)","Fermium(Fm)","Menselevium(Md)","Nobelium(No)","Lawrencien(Lr)","Rutherfordium(Rf)"
,"Dubnium(Db)","Seaborgium(Sg)","Bohrium(Bh)","Hassium(Hs)","Meitnerium(Mt)","Darmstadtium(Ds)","Roentgenium(Rg)"];
var TempMassa;
var Massa;
var Temp1;
var Temp2;
var Temp3;
var AtoomNum;
function NaamOfAtoom (AtoomNum) {
switch (AtoomNum) {
case 0:
Atoomnaam ="Dit molecuul bestaat niet";
break;
case 1:
Atoomnaam = "Waterstof(H)"
case 2:
Atoomnaam = "Helium(He)";
break;
case 3:
Atoomnaam = "Lithium(Li)";
break;
case 4:
Atoomnaam = "Beryllium(Be)";
break;
case 5:
Atoomnaam = "Boor(B)";
break;
case 6:
Atoomnaam = "Koolstof(C)";
break;
case 7:
Atoomnaam = "Stikstof(N)";
break;
case 8:
Atoomnaam = "Zuurstof(O)";
break;
case 9:
Atoomnaam = "Fluor(F)";
break;
case 10:
Atoomnaam = "Neon(Ne)";
break;
case 11:
Atoomnaam = "Natrium(Na)";
break;
case 12:
Atoomnaam = "Magnesium(Mg)";
break;
case 13:
Atoomnaam = "Aluminium(Al)";
break;
case 14:
Atoomnaam = "Silicium(Si)";
break;
case 15:
Atoomnaam = "Fosfor(P)";
break;
case 16:
Atoomnaam = "Zwafel(S)";
break;
case 17:
Atoomnaam = "Chloor(Cl)";
break;
case 18:
Atoomnaam = "Argon(Ar)";
break;
case 19:
Atoomnaam = "Kalium(K)"
};
};
function berekenen () {
Protonen = document.getElementById("Atoomnummer").value;
AtoomNum = document.getElementById("Atoomnummer").value;
Elektronen = document.getElementById("Atoomnummer").value;
Massa = document.getElementById("Massa").value;
Neutronen = Massa - Protonen;
}
function Writing() {
console.log(Atoomnaam, AtoomNum, Atoomnummer);
alert("Protoon(en) = " + Protonen + "," + " Neutroon(en) = " + Neutronen + "," + " Elektron(en) = " + Elektronen + "," + " Naam = " + Atoomnaam)
}
Disclaimer: Javascript isnt done yet but it doesnt work and i want it first working then i can do the rest of the atoms, Dont worry if you cant ready it, its writing in Dutch.

I made a plunker with a working solution:
https://plnkr.co/edit/QyAglTqoVx8k5RhZbenV?p=preview
Yeah, it needs put NaamOfAtoom(AtoomNum) inside that berekenen() function to fill that Atoomnaam variable, and change the switch.
Basically, when you did that switch, the cases are numbers, but AtoomNum is a string (you can type letter also), so it didn't entered any case options.
So was equivalent to 12 === '12' returning false. switch is strict comparing === instead of only ==.
Adding a parseInt(number) solved switch part.

Too long if statement in Javascript

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;
}

(JS) Using IF/Switch statements to change slider value

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>

Getting value of a form doesn't work

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.

Categories