Develop Reference

How do I use an input to define decimals for other inputs?

I am trying to set the number of decimals of many inputs by using a specific input.
Here is what I am doing:
window.oninput = function(event) {
var campo = event.target.id;
// DECIMALS
if (campo == "decimalTemp") {
var i = decimalTemp.value;
ºC.value.toFixed = i;
ºK.value.toFixed = i;
ºF.value.toFixed = i;
ºRa.value.toFixed = i;
}
// TEMPERATURE
if (campo == "ºC") {
ºK.value = (ºC.value * 1 + 273.15).toFixed(i);
ºF.value = (ºC.value * 1.8 + 32).toFixed(i);
ºRa.value = ((ºC.value * 1 + 273.15) * 1.8).toFixed(i);
} else if (campo == "ºK") {
ºC.value = (ºK.value * 1 - 273.15).toFixed(2);
ºF.value = (ºK.value * 1.8 - 459.889).toFixed(2);
ºRa.value = (ºK.value * 1.8).toFixed(2);
} else if (campo == "ºF") {
ºC.value = ((ºF.value * 1 - 32) / 1.8).toFixed(2);
ºK.value = ((ºF.value * 1 + 459.67) / 1.8).toFixed(2);
ºRa.value = (ºF.value * 1 + 459.67).toFixed(2);
} else if (campo == "ºRa") {
ºC.value = (ºRa.value / 1.8 - 273.15).toFixed(2);
ºK.value = (ºRa.value / 1.8).toFixed(2);
ºF.value = (ºRa.value * 1 - 459.67).toFixed(2);
}
};
<h3>Temperature <input type="number" min="0" max="12" value="0" id="decimalTemp" name="decimal" placeholder="Decimal"> <small>Decimals<small></h3>
Celsius (ºC) <input id="ºC" type="number" min="-273.15" value="20">
<br> Kelvin (K) <input id="ºK" type="number" min="0" value="293">
<br> Farenheit (ºF) <input id="ºF" type="number" min="-459.67" value="68">
<br> Rankine (ºRa) <input id="ºRa" type="number" min="0" value="528">
In summary, I would like to know if this construction is correct:
var i = decimalTemp.value;
ºC.value.toFixed = i;
I already tried something like:
ºC.value.toFixed(i);
But didn't work. Any idea where am I wrong?

How to use this true/false flag to make switching radio buttons disable other radio buttons effects

Ive tried following this:
var changed = function() {
if (document.getElementById('wolf').checked) {
wolfActive = true;
turtleActive = false;
lizardActive = false;
} else if (document.getElementById('lizard').checked) {
lizardActive = true;
wolfActive = false;
turtleActive = false;
} else if (document.getElementById('turtle').checked) {
turtleActive = true;
lizardActive = false;
wolfActive = false;
}
}
But i can't get each radiobuttons effect to be false when a different radio button is selected ( having a hard time understanding how it works)
This is my JavaScript:
var Turtle = 1;
var Turtlelv = 1;
var TurtleCexp = 0;
var TurtleMexp = 100;
var NextMaxTurtleExp = TurtleMexp;
var Turtleregen = 0.5;
var Lizard = 1;
var Lizardlv = 1;
var LizardCexp = 0;
var LizardMexp = 100;
var NextMaxLizardExp = LizardMexp;
var Wolf = 1;
var Wolflv = 1;
var WolfCexp = 0;
var WolfMexp = 100;
var NextMaxWolfExp = WolfMexp;
var Strength = 2;
var Magic = 1;
var Wolfstrength = 1
var ManaPoints = 10
function Wolfandstrength() {
if (document.getElementById("wolf-radio").checked) {
Strength = Strength + Wolfstrength
document.getElementById("Strength").innerHTML = Strength;
} else {
Strength = Strength - Wolfstrength
document.getElementById("Strength").innerHTML = Strength;
}
}
function wolfXpUp() {
if (document.getElementById("wolf-radio").checked && WolfCexp < WolfMexp)
{
setTimeout(wolfXpUp, 100)
WolfCexp = WolfCexp + 1;
document.getElementById("WolfCexp").innerHTML = WolfCexp;
}
if (WolfCexp >= WolfMexp) {
Wolflv = Wolflv + 1;
WolfCexp = 0;
Wolf = Wolf + 1;
Wolfstrength = Wolfstrength + 1;
Strength = Strength + 1;
NextMaxWolfExp= NextMaxWolfExp *1.5;
}
document.getElementById("Strength").innerHTML = Strength;
document.getElementById('WolfMexp').innerHTML = NextMaxWolfExp;
document.getElementById('Wolflv').innerHTML = Wolflv;
document.getElementById('WolfCexp').innerHTML = WolfCexp;
document.getElementById('Wolf').innerHTML = Wolf;
}
function lizardXpUp() {
if (document.getElementById("lizard-radio").checked && LizardCexp <
LizardMexp) {
setTimeout(lizardXpUp, 200)
LizardCexp = LizardCexp + 1;
document.getElementById("LizardCexp").innerHTML = LizardCexp;
}
if (LizardCexp >= LizardMexp) {
Lizardlv = Lizardlv + 1;
LizardCexp = 0;
Lizard = Lizard + 1;
Lizardmagic = Lizardmagic + 1;
Magic = Magic + 1;
NextMaxLizardExp= NextMaxLizardExp *1.5;
}
document.getElementById("Magic").innerHTML = Magic;
document.getElementById('LizardMexp').innerHTML =
NextMaxLizardExp;
document.getElementById('Lizardlv').innerHTML = Lizardlv;
document.getElementById('LizardCexp').innerHTML = LizardCexp;
document.getElementById('Lizard').innerHTML = Lizard;
}
function turtleXpUp() {
if (document.getElementById("turtle-radio").checked && Turtleexp <
TurtleMexp) {
setTimeout(turtleXpUp, 200)
TurtleCexp = TurtleCexp + 1;
document.getElementById("TurtleCexp").innerHTML = TurtleCexp;
}
if (TurtleCexp >= TurtleMexp) {
Turtlelv = Turtlelv + 1;
TurtleCexp = 0;
Turtle = Turtle + 1;
Tmanapoints = Tmanapoints + 1;
ManaPoints = ManaPoints + 1;
NextMaxLizardExp= NextMaxLizardExp *1.5;
}
document.getElementById("ManaPoints").innerHTML = ManaPoints;
document.getElementById('TurtleMexp').innerHTML = NextMaxTurtleExp;
document.getElementById('Turtlelv').innerHTML = Turtlelv;
document.getElementById('TurtleCexp').innerHTML = TurtleCexp;
document.getElementById('Turtle').innerHTML = Turtle;
}
document.getElementById("wolf-radio").addEventListener("change", wolfXpUp)
document.getElementById("wolf-radio").addEventListener("change",
Wolfandstrength)
document.getElementById("lizard-radio").addEventListener("change",
lizardXpUp)
document.getElementById("lizard-radio").addEventListener("change",
Wolfandstrength);
document.getElementById("Strength").innerHTML = Strength;
document.getElementById("Magic").innerHTML = Magic;
document.getElementById("ManaPoints").innerHTML = ManaPoints;
HTML code: ( can change if needed its not perfect)
font size="+2"> <b> Pets </b></font>
<div id="turtle" class="control">
<label class="radio">
<input type="radio" name="Pets" id="turtle-radio">
</label><img src="turtle.png" alt="turtle" height="100" width="100"> Lv
<span id="Turtlelv">1</span> <span id="TurtleCexp">0</span> / <span
id="TurtleMexp">100</span>
<br />
<br />
<div id="lizard" class="control">
<label class="radio">
<input type="radio" name="Pets" id="lizard-radio">
</label><img src="lizard.png" alt="lizard" height="42" width="42">
Lv <span
id="Lizardlv">1</span> <span id="LizardCexp">0</span> / <span
id="LizardMexp">100</span>
<br />
<div id="wolf" class="control">
<label class="radio">
<input type="radio" name="Pets" id="wolf-radio">
</label><img src="wolf.png" alt="wolf" height="60" width="60">
Lv <span id="Wolflv">1</span> <span
id="WolfCexp">0</span> / <span id="WolfMexp">100</span></div>
<br />
<span id="Strength">0</span>
<br />
<span id="Magic">0</span>
<br />
<span id="ManaPoints">0</span>
I expect from using that true/false function in my what i've already tried box to help me disable radio buttons functions/ stat buffs while a diffrent radio button is selected. But the actual output when you switch from the turtle radio button to lizard radio button it takes away 1 strength when strength should be untouched unless the wolf radio button is selected.

Summing up input values inside a forEach function

I'm trying to add up range input values but for reasons I don't know it starts from 0 when I change the next inputs value. Could it be that I'm calling the function inside a forEach function? Any help would be appreciated.
<input class="time-range" type="range" min="0" max="1440" value="0" step="15">
<input class="time-range" type="range" min="0" max="1440" value="0" step="15">
<input class="time-range" type="range" min="0" max="1440" value="0" step="15">
var d=document,
range = d.querySelectorAll(".time-range"),
time_total_hrs = d.querySelectorAll(".time_total .hours"),
time_total_min = d.querySelectorAll(".time_total .minutes"),
timeMax = 1440,
timeInput = 0,
timeLeft,num,hours,rhours,minutes,rminutes,current;
function getCurrent(){
if (defined(slide)){
return current = d.querySelector(".slide.active");
}
}
getCurrent()
function timeConvert(num) {
hours = (num / 60);
rhours = Math.floor(hours);
minutes = (hours - rhours) * 60;
rminutes = Math.round(minutes);
return num + " min = " + rhours + " h and " + rminutes + " min.";
}
function updateTotalTime(){
var tot = 0;
for (i = 0; i < range.length; i++){
tot = tot + parseInt(range[i].value, 10);
}
console.log("total time is: "+tot+"");
return tot;
}
function updateTimeLeft(){
timeLeft = parseInt(timeMax) - parseInt(updateTotalTime());
timeConvert(timeLeft);
console.log("time left:"+timeLeft+"")
for (i = 0; i < time_total_hrs.length; i++){
time_total_hrs[i].innerHTML = rhours;
time_total_min[i].innerHTML = rminutes;
}
}
function updateTimeSelected(){
timeConvert(timeInput);
current.querySelector(".time_current .hours").innerHTML = rhours;
current.querySelector(".time_current .minutes").innerHTML = rminutes;
}
function setWarning(){
for (i = 0; i < time_total.length; i++){
time_total[i].classList.add("warning");
}
}
function removeWarning(){
for (i = 0; i < time_total.length; i++){
time_total[i].classList.remove("warning");
}
}
[].forEach.call(range, function(el, i, els) {
el.addEventListener('input', function() {
timeInput = this.value;
updateTotalTime();
updateTimeLeft();
updateTimeSelected();
[].forEach.call(els, function(el) {
if (el !== this) {
el.setAttribute("max", timeLeft);
if (timeLeft === 0){
el.style.opacity = "0.5";
el.setAttribute("disabled", "true");
setWarning()
} else if (timeLeft > 0){
el.removeAttribute("disabled");
removeWarning()
} else {
}
} else {
}
}, this);
});
});

It's tricky to work out what you're trying to do and what's not working for you. I wonder if it's better to stop thinking in terms of "looping over everything" and start thinking along the lines of "I have some ranges, let's add the values together.
var ranges = Array.prototype.slice.call(document.querySelectorAll(".time-range"));
// ...
var total = ranges.reduce(function (subTotal, input) {
return subTotal + parseInt(input.value, 10);
}, 0);
You'd then have the total number of minutes and you can do whatever you like with that.
var ranges = Array.prototype.slice.call(document.querySelectorAll(".time-range"));
var hoursElement = document.querySelector(".time_total .hours");
var minutesElement = document.querySelector(".time_total .minutes");
function minsToHoursMins(raw) {
var hours = Math.floor(raw / 60);
var minutes = raw - (hours * 60);
return [hours, minutes];
}
document.querySelector(".time-range-holder").addEventListener("input", function () {
var total = ranges.reduce(function (subTotal, input) {
return subTotal + parseInt(input.value, 10);
}, 0);
var timeParts = minsToHoursMins(total);
hoursElement.innerHTML = timeParts[0];
minutesElement.innerHTML = timeParts[1];
});
<div class="time-range-holder">
<input class="time-range" type="range" min="0" max="1440" value="0" step="15">
<input class="time-range" type="range" min="0" max="1440" value="0" step="15">
<input class="time-range" type="range" min="0" max="1440" value="0" step="15">
</div>
<div class="time_total">
<p>Hours: <span class="hours"></span></p>
<p>Minutes: <span class="minutes"></span></p>
</div>

let inputs = [...document.querySelectorAll('input')]
let button = document.querySelector('button')
const SUM = () => inputs.reduce((prev, { value }) => +prev + +value, 0)
button.addEventListener('click', () => console.log(SUM()))
<input value="1"/>
<input value="1"/>
<input value="1"/>
<button>SUM</button>

javaScript got stuck with converting bytes

so I've got a bit of the problem. I am trying to make a function in wich : human clicks on input box with mouse and types some random numbers in bytes and that number should be convert and shown in two other boxes such as MegaBytes and KiloBytes. So my problem is that Javascript shows me error :
Cannot set property 'value' of null
at convert (script.js:7)
at HTMLInputElement.onkeyup
here is my code so far:
function convert(inputas)
{
var i;
if(inputas == "B")
{
i = document.getElementById("baitas").value / 1000;
document.getElementById("kiloBaitas").value = i;
}
else if(inputas == "KB")
{
i = document.getElementById("kiloBaitas").value * 1024;
document.getElementById("baitas").value = i.toFixed(2);
}
}
HTML code:
<input type="text" id="baitas" onkeyup="convert('B')placeholder="Bits">
<input type="text" id="kilobaitas"
`onkeyup="convert('KB')"placeholder="Kilobits">
<input type="text" id="megabaitas" onkeyup="convert('MB')"
placeholder="Mbits">
<script src="script.js"></script>

when comparing your javascript with the html. the kilobaitis element is not spelt with a consistent case.

JavaScript is case sensitive.
function convert(inputas) {
var i;
if (inputas == "B") {
i = document.getElementById("baitas").value / 1000;
document.getElementById("kilobaitas").value = i;
} else if (inputas == "KB") {
i = document.getElementById("kiloBaitas").value * 1024;
document.getElementById("baitas").value = i.toFixed(2);
}
}
<input type="text" id="baitas" onkeyup="convert('B')" placeholder=" Bits ">
<input type="text " id="kilobaitas" onkeyup="convert('KB')" placeholder="Kilobits ">
<input type="text " id="megabaitas" onkeyup="convert('MB')" placeholder="Mbits ">

(function() {
var elems = [],
elemsId = ['baitas','kilobaitas','megabaitas'];
function fix(a){ return ( a * 100 | 0 ) / 100 }
function convert(inputas)
{
var i;
switch(inputas)
{
case 0:
i = elems[0].value;
elems[1].value = fix( i / 1024 );
elems[2].value = fix( i / 1048576 );
break;
case 1:
i = elems[1].value;
elems[0].value = i * 1024;
elems[2].value = fix( i / 1024 );
break;
case 2:
i = elems[2].value;
elems[0].value = i * 1048576;
elems[1].value = i * 1024;
break;
}
}
for (var i=0; i < elemsId.length; i++)
{
elems[i] = document.getElementById( elemsId[i] );
elems[i].addEventListener('keyup', convert.bind(null, i) )
}
}());
<input type="text" id="baitas" placeholder=" Bits">
<input type="text" id="kilobaitas" placeholder=" Kilobits">
<input type="text" id="megabaitas" placeholder=" Mbits">

Calculating a student grade in JavaScript

I've got an HTMl form to input student names and grades in which should use JavaScript to calculate a grade that is then printed on the screen. My HTMl works fine if I comment the meat of my JavaScript out, but not if I don't. The error is somewhere in the code that I commented out, but I just can't find it (or them).
The HTML form will submit, alert the user, and show my message correctly as long as it is fed a concrete grade and score instead of trying to fetch it through getGrade() and getScore(). This is why I know the bug is in the JavaScript.
I've run the page in the JavaScript console to look for bugs, but there are no red flag errors.
This is my first HTML/JavaScript program, and I not very good at it. Anyway, it's a day late and in less than two hours, it will be two days late, so if anyone could help, I'd appreciate it hugely. Here's the code, sorry if it's too much:
<!DOCTYPE html>
<html>
<head>
<title>Joe Peterson's Assignment 7</title>
<script>
function calculateGrade(){
document.getElementById("form1").style.display = "none";
document.getElementById("p1").style.display = "block";
var fname = document.getElementById("LastName").value;
var lname = document.getElementById("FirstName").value;
var valMidterm = document.getElementById("MidtermScore").value;
var valFinal = document.getElementById("FinalScore").value;
var lMidterm = document.getElementById("MidtermLetter").value;
var lFinal = document.getElementById("FinalLetter").value;
var homeworkArray = document.getElementById("HomeworkScores").value.split(',');
var classworkArray = document.getElementById("ActivityScores").value.split(',');
/*
var s1 = new Student(fname, lname);
for (var i = 0; i < classworkArray.length; i++)
s1.addGradedActivity(classworkArray[i]);
for (var i = 0; i < homeworkArray.length; i++)
s1.addGradedHomework(homeworkArray[i]);
s1.setMidterm(valMidterm, lMidterm);
s1.setFinal(valFinal, lFinal);
var grade = s1.getGrade();
var score = s1.getScore();
*/
document.getElementById("span1").innerHTML = (grade);
document.getElementById("span2").innerHTML = (score);
document.getElementById("fname").innerHTML = (fname);
document.getElementById("lname").innerHTML = (lname);
alert(document.getElementById("FirstName").value);
return false;
}
/*
function Coursework(){
var sum = 0;
var num = 0;
this.addScore = function(score){
if (score < 0) {score = 0;}
if (score > 100) {score = 100;}
sum += score;
num++;
}
this.getAverage = function(){
return (sum/num);
}
}
function Exam(){
var score = 0;
var grade = "";
this.Exam = function(Score, Grade)
{
if (Score < 0) {Score = 0;}
if (Score > 100) {Score = 100;}
score = Score;
if (Grade != "A" && Grade != "B" && Grade !="C"
&& Grade !="D" && Grade != "F")
{
console.log("You have submitted a bad grade for an Exam, value of:G.");
Grade = "F";
}
grade = Grade;
}
this.getScore = function(){
return score;
}
this.getGrade = function(){
return grade;
}
}
function Student(){
var firstName;
var lastName;
var midterm;
var finalExam;
var homework = new Coursework();
var inclass = new Coursework();
this.Student = function(first, last){
firstName = first;
lastName = last;
}
this.setMidterm = function(score, grade){
midterm = new Exam(score, grade);
}
this.setFinal = function(score, grade){
finalExam = new Exam(score, grade);
}
this.addGradedHomework = function(score){
homework.addScore(score);
}
this.addGradedActivity = function(score){
inclass.addScore(score);
}
this.getFinalGrade = function(totalScore)
{
var grade = totalGrade(totalScore);
var grade2 = "F";
var midGrade = this.convertGrade(midterm.getGrade());
var finGrade = this.convertGrade(finalExam.getGrade());
if (midGrade < finGrade)
{
grade2 = midterm.getGrade();
}
else
{
grade2 = finalExam.getGrade();
}
if (convertGrade(grade) > convertGrade(grade2))
return(grade);
else
return(grade2);
}
this.totalGrade = function(totalScore)
{
var totalGrade = "F";
if (totalScore >= 90)
totalGrade = "A";
else if (totalScore >= 80)
totalGrade = "B";
else if (totalScore >= 70)
totalGrade = "C";
else if (totalScore >= 60)
totalGrade = "D";
else
totalGrade = "F";
return (totalGrade);
}
this.convertGrade = function(letter)
{
var num = 0;
if (letter === "A")
num = 4;
else if (letter === "B")
num = 3;
else if (letter === "C")
num = 2;
else if (letter === "D")
num = 1;
else
num = 0;
return(num);
}
this.getScore = function()
{
var totalScore = 0;
totalScore += inclass.getAverage() * .15;
totalScore += homework.getAverage() * .25;
totalScore += midterm.getScore() * .25;
totalScore += finalExam.getScore() * .35;
return totalScore;
}
this.getGrade = function()
{
var totalScore = 0;
totalScore += inclass.getAverage() * .15;
totalScore += homework.getAverage() * .25;
totalScore += midterm.getScore() * .25;
totalScore += finalExam.getScore() * .35;
var grade = getFinalGrade(totalScore);
return grade;
}
}
*/
</script>
</head>
<body>
<p><h1>Joe Peterson's Assignment 7</h1></p>
<form name="input" id="form1" onsubmit="return calculateGrade()" style="display:form">
First name: <input type="text" name="FirstName" id="FirstName" value="Joe"><br>
Last name: <input type="text" name="LastName" id="LastName" value="Peterson"><br>
Homework Scores (separate with commas): <input type="text" name="HomeworkScores" id="HomeworkScores" value="90, 80, 98"><br>
Activity Scores (separate with commas): <input type="text" name="ActivityScores" id="ActivityScores" value="71, 65, 96"><br>
Midterm Exam Percentage: <input type="text" name="MidtermScore" id="MidtermScore" value="91"><br>
Midterm Exam Letter Grade: <input type="text" name="MidtermLetter" id="MidtermLetter" value="A"><br>
Final Exam Percentage: <input type="text" name="FinalScore" id="FinalScore" value="75"><br>
Final Exam Letter Grade: <input type="text" name="FinalLetter" id="FinalLetter" value="C"><br>
<input type="submit" value="Submit">
</form>
<p id="p1" style="display:none">Final course grade for <span id="fname">Joe</span> <span id="lname">Peterson</span> is: <span id="span1">X</span> (<span id="span2">yy</span>%)</p>
</body>
</html>