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.
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>
I'm having some trouble getting my change() event working in jQuery. I am making a small program that converts temperatures to Kelvin, and I want the span that holds my value after conversion to update 1) every time the temperature to convert changes and 2) every time a different temperature scale is selected from the radio buttons.
Relevant Code:
$(document).ready(function() {
$('input[type=radio]').checkboxradio();
var temp = parseFloat()
$('input.listener').change(function() {
var name = $(this).attr("name");
var val = $(this).val();
switch (name) {
case 'unit':
var temperature = $('input#temp').val();
switch (val) {
case 'f':
$('span#output').html(((temperature - 32) / 1.8) + 273.15);
break;
case 'c':
$('span#output').html(temperature + 273.15);
break;
case 'r':
$('span#output').html(temperature / 1.8);
break;
}
case 'temp':
var u = $('input[name=unit]:checked').val();
switch (u) {
case 'f':
$('span#output').html(((val - 32) / 1.8) + 273.15);
break;
case 'c':
$('span#output').html(val + 273.15);
break;
case 'r':
$('span#output').html(val / 1.8);
break;
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="widget">
<fieldset>
<legend>Select a Unit to Convert to Kelvin: </legend>
<label for="fRadio">Fahrenheit</label>
<input id="fRadio" class="listener" type="radio" name="unit" value="f">
<label for="cRadio">Celsius</label>
<input id="cRadio" class="listener" type="radio" name="unit" value="c">
<label for="rRadio">Rankine</label>
<input id="rRadio" class="listener" type="radio" name="unit" value="r">
</fieldset>
</div>
<h2>Temperature Converter</h2>
<p>Type a value in the Fahrenheit field to convert the value to Kelvin:</p>
<p>
<label>Temperature</label>
<input id="temp" class="listener" type="number" value="32">
</p>
<p>Kelvin: <span id="output"></span></p>
My guess is I'm making a pretty dumb small mistake, but I can't seem to figure it out. Thanks for any and all help, suggestions, and solutions.
Two mistakes with your code:
Forgetting breaks; for the parent switch statement.
Forgetting name="temp" on the temperature field.
I changed the final temperature to a variable and made that the text of the output just so that there would be so many $('span#output').html(temperature);
Also, you should use the oninput event to detect a change for the number field.
$(document).ready(function() {
//$('input[type=radio]').checkboxradio();
var temp = parseFloat();
$('input.listener').on('change', updateTemp);
$('input.listener').on('input', updateTemp);
function updateTemp() {
var name = $(this).attr("name");
var val = $(this).val();
var final;
switch (name) {
case 'unit':
var temperature = $('input#temp').val();
switch (val) {
case 'f':
final = ((temperature - 32) / 1.8) + 273.15;
break;
case 'c':
final = temperature + 273.15;
break;
case 'r':
final = temperature / 1.8;
break;
}
break;
case 'temp':
var u = $('input[name=unit]:checked').val();
switch (u) {
case 'f':
final = ((val - 32) / 1.8) + 273.15;
break;
case 'c':
final = val + 273.15;
break;
case 'r':
final = val / 1.8;
break;
}
break;
}
$("#output").text(final);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="widget">
<fieldset>
<legend>Select a Unit to Convert to Kelvin: </legend>
<label for="fRadio">Fahrenheit</label>
<input id="fRadio" class="listener" type="radio" name="unit" value="f">
<label for="cRadio">Celsius</label>
<input id="cRadio" class="listener" type="radio" name="unit" value="c">
<label for="rRadio">Rankine</label>
<input id="rRadio" class="listener" type="radio" name="unit" value="r">
</fieldset>
</div>
<h2>Temperature Converter</h2>
<p>Type a value in the Fahrenheit field to convert the value to Kelvin:</p>
<p>
<label>Temperature</label>
<input id="temp" class="listener" type="number" name="temp" value="32">
</p>
<p>Kelvin: <span id="output"></span></p>
You should set one of the radio buttons as default with checked="checked". Then try following:
$(document).ready(function () {
$('input.listener').change(function () {
if ($(this).attr("type") == 'radio') {
//radio button changed
var u = $(this).val();
} else {
var u = $("input[type='radio']:checked").val();
}
var temperature = $('#temp').val();
switch (u) {
case 'f':
$('span#output').html(((temperature - 32) / 1.8) + 273.15);
break;
case 'c':
$('span#output').html(temperature + 273.15);
break;
case 'r':
$('span#output').html(temperature / 1.8);
break;
}
});
});
You do not have break; after
case 'unit':
and when var name = "temp"
var val = $(this).val();
the value of var val above would be a number in string format, so when you do val + something in case 'temp' the number is getting appended instead getting added or substracted. Use parseInt(val) to convert the value of input box to integer in case of 'temp'.
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));
}
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.