We Keep Coding

Insert Input Value into Label Text Javascript

I have 3 range inputs:
When the user starts to drag the range thumb, I'd love the of related input value to be printed in the label before main text. For this I wrote a funtion, but nothng works
let rangeForm = document.querySelectorAll('.form-range');
let rangeValue = document.querySelectorAll('.input-value');
window.onload = () => {
rangeForm.forEach((input) => input.value = '0');
}
function findTotal() {
var tot = 0;
rangeForm.forEach((input) => tot += parseInt(input.value, 10));
document.getElementById('total-cost').innerHTML = tot;
}
function changeLabel() {
rangeValue.forEach((label) => label.inhherHTML = `${parseInt(input.value, 10)}`);
}
<label for="storiesNumber" class="form-label"><p class="input-value"></p>some text</label>
<input type="range" oninput="findTotal();changeLabel()" class="form-range" min="0" max="100" id="storiesNumber">
<label for="postsNumber" class="form-label"><p class="input-value"></p>another text</label>
<input type="range" oninput="findTotal();changeLabel()" class="form-range" min="0" max="100" id="postsNumber">
<label for="reelsNumber" class="form-label"><p class="input-value"></p>more text</label>
<input type="range" oninput="findTotal();changeLabel()" class="form-range" min="0" max="100" id="reelsNumber">

Check out this snippet, I guess it fits your purpose:
let rangeForm = document.querySelectorAll('.form-range');
let rangeValue = document.querySelectorAll('.input-value');
window.onload = () => {
rangeForm.forEach((input) => input.value = '0');
}
function findTotal() {
var tot = 0;
rangeForm.forEach((input) => tot += parseInt(input.value, 10));
document.getElementById('total-cost').innerHTML = tot;
}
function changeLabel(input) {
document.querySelector("label[for="+input.id+"] > .input-value").innerText = `${parseInt(input.value, 10)}`
}
<label for="storiesNumber" class="form-label">
some text: <b class="input-value"></b>
</label>
<input type="range" oninput="findTotal();changeLabel(this)" class="form-range" min="0" max="100" id="storiesNumber">
<br>
<label for="postsNumber" class="form-label">
another text: <b class="input-value"></b>
</label>
<input type="range" oninput="findTotal();changeLabel(this)" class="form-range" min="0" max="100" id="postsNumber">
<br>
<label for="reelsNumber" class="form-label">
more text: <b class="input-value"></b>
</label>
<input type="range" oninput="findTotal();changeLabel(this)" class="form-range" min="0" max="100" id="reelsNumber">
<br>
Total: <b id="total-cost">...</b>

External paths not linking to each other?

This is going to sound like a pointless question, but I decided to try out GitHub pages and put something up so that it can go into a portfolio one day. However, all of a sudden the JavaScript isn't linking. I've used the same method I've always used. I thought how about I create a folder to put the HTML, CSS, & JS into but nothing. The css connects just fine. Keep in mind I am using Visual Studio Code for this project.
document.getElementById("ft1").addEventListener("keyup", function() {
var feet = document.getElementById("ft1");
var meters = document.getElementById("m1");
var result9 = feet.value / 3.2808;
meters.value = result9;
});
document.getElementById("ft2").addEventListener("keyup", function() {
var feet1 = document.getElementById("ft2");
var inch = document.getElementById("inch1");
var result10 = feet1.value * 12;
inch.value = result10;
});
document.getElementById("ft3").addEventListener("keyup", function() {
var feet2 = document.getElementById("ft3");
var cm = document.getElementById("cm1");
var result11 = feet2.value / 0.032808;
cm.value = result11;
});
document.getElementById("ft4").addEventListener("keyup", function() {
var feet3 = document.getElementById("ft4");
var yard = document.getElementById("yard1");
var result12 = feet3.value * 0.33333;
yard.value = result12;
});
document.getElementById("ft5").addEventListener("keyup", function() {
var feet4 = document.getElementById("ft5");
var km = document.getElementById("km1");
var result13 = feet4.value / 3280.8;
km.value = result13;
});
document.getElementById("ft6").addEventListener("keyup", function() {
var feet5 = document.getElementById("ft6");
var miles = document.getElementById("miles1");
var result14 = feet5.value * 0.00018939;
miles.value = result14;
});
document.getElementById("meter1").addEventListener("keyup", function() {
var m1 = document.getElementById("meter1");
var feet = document.getElementById("output1");
var result15 = m1.value * 3.2808;
feet.value = result15;
});
document.getElementById("meter2").addEventListener("keyup", function() {
var m2 = document.getElementById("meter2");
var inches = document.getElementById("output2");
var result16 = m2.value * 39.370;
inches.value = result16;
});
document.getElementById("meter3").addEventListener("keyup", function() {
var m3 = document.getElementById("meter3");
var cm = document.getElementById("output3");
var result17 = m3.value / 0.01;
cm.value = result17;
});
document.getElementById("meter4").addEventListener("keyup", function() {
var m4 = document.getElementById("meter4");
var yards = document.getElementById("output4");
var result18 = m4.value * 1.0936;
yards.value = result18;
});
document.getElementById("meter5").addEventListener("keyup", function() {
var m5 = document.getElementById("meter5");
var km = document.getElementById("output5");
var result19 = km.value / 1000;
km.value = result19;
});
document.getElementById("meter6").addEventListener("keyup", function() {
var m6 = document.getElementById("meter6");
var miles = document.getElementById("output6");
var result20 = m6.value * 0.00062137;
miles.value = result20;
});
document.getElementById("inches1").addEventListener("keyup", function() {
var inch1 = document.getElementById("inches1");
var feet01 = document.getElementById("output7");
var result21 = inch1.value * 0.083333;
feet01.value = result21;
});
document.getElementById("inches2").addEventListener("keyup", function() {
var inch2 = document.getElementById("inches2");
var meters02 = document.getElementById("output8");
var result22 = inch2.value / 39.370;
meters02.value = result22;
});
document.getElementById("inches3").addEventListener("keyup", function() {
var inch3 = document.getElementById("inches3");
var cm03 = document.getElementById("output9");
var result23 = inch3.value / 0.39370;
cm03.value = result23;
});
document.getElementById("inches4").addEventListener("keyup", function() {
var inch4 = document.getElementById("inches4");
var yards04 = document.getElementById("output10");
var result24 = inch4.value * 0.027778;
yards04.value = result24;
});
document.getElementById("inches5").addEventListener("keyup", function() {
var inch5 = document.getElementById("inches5");
var km05 = document.getElementById("output11");
var result25 = inch5.value / 39370;
km05.value = result25;
});
document.getElementById("inches6").addEventListener("keyup", function() {
var inch6 = document.getElementById("inches6");
var mile06 = document.getElementById("output12");
var result26 = inch6.value * 0.000015783;
mile06.value = result26;
});
document.getElementById("centi1").addEventListener("keyup", function() {
var cm11 = document.getElementById("centi1");
var feet11 = document.getElementById("ans1");
var result27 = cm11.value * 0.032808;
feet11.value = result27;
});
document.getElementById("centi2").addEventListener("keyup", function() {
var cm22 = document.getElementById("centi2");
var meters11 = document.getElementById("ans2");
var result28 = cm22.value / 100;
meters11.value = result28;
});
document.getElementById("centi3").addEventListener("keyup", function() {
var cm33 = document.getElementById("centi3");
var inches11 = document.getElementById("ans3");
var result29 = cm33.value * 0.39370;
inches11.value = result29;
});
document.getElementById("centi4").addEventListener("keyup", function() {
var cm44 = document.getElementById("centi4");
var yards11 = document.getElementById("ans4");
var result30 = cm44.value * 0.010936;
yards11.value = result30;
});
document.getElementById("centi5").addEventListener("keyup", function() {
var cm55 = document.getElementById("centi5");
var km11 = document.getElementById("ans5");
var result31 = cm55.value / 100000;
km11.value = result31;
});
document.getElementById("centi6").addEventListener("keyup", function() {
var cm66 = document.getElementById("centi6");
var miles11 = document.getElementById("ans6");
var result32 = cm66.value * 0.0000062137;
miles11.value = result32;
});
document.getElementById("yards1").addEventListener("keyup", function() {
var yard1 = document.getElementById("yards1");
var fty = document.getElementById("op1");
var result33 = yard1.value * 3;
fty.value = result33;
});
document.getElementById("yards2").addEventListener("keyup", function() {
var yard2 = document.getElementById("yards2");
var ytm = document.getElementById("op2");
var result34 = yard2.value / 1.0936;
ytm.value = result34;
});
document.getElementById("yards3").addEventListener("keyup", function() {
var yard3 = document.getElementById("yards3");
var yti = document.getElementById("op3");
var result35 = yard3.value * 36;
yti.value = result35;
});
document.getElementById("yards4").addEventListener("keyup", function() {
var yard4 = document.getElementById("yards4");
var ytc = document.getElementById("op4");
var result36 = yard4.value / 0.010936;
ytc.value = result36;
});
document.getElementById("yards5").addEventListener("keyup", function() {
var yard5 = document.getElementById("yards5");
var ytk = document.getElementById("op5");
var result37 = yard5.value / 1093.6;
ytk.value = result37;
});
document.getElementById("yards6").addEventListener("keyup", function() {
var yard6 = document.getElementById("yards6");
var ytmi = document.getElementById("op6");
var result38 = yard6.value * 0.00056818;
ytmi.value = result38;
});
document.getElementById("kilometer1").addEventListener("keyup", function() {
var kilom1 = document.getElementById("kilometer1");
var kmtf = document.getElementById("kmtf");
var result39 = kilom1.value * 3280.8;
kmtf.value = result39;
});
document.getElementById("kilometer2").addEventListener("keyup", function() {
var kilom2 = document.getElementById("kilometer2");
var kmtm = document.getElementById("kmtm");
var result40 = kilom2.value * 1000;
kmtm.value = result40;
});
document.getElementById("kilometer3").addEventListener("keyup", function() {
var kilom3 = document.getElementById("kilometer3");
var kmti = document.getElementById("kmti");
var result41 = kilom3.value * 39370;
kmti.value = result41;
});
document.getElementById("kilometer4").addEventListener("keyup", function() {
var kilom4 = document.getElementById("kilometer4");
var kmtc = document.getElementById("kmtc");
var result42 = kilom4.value * 100000;
kmtc.value = result42;
});
document.getElementById("kilometer5").addEventListener("keyup", function() {
var kilom5 = document.getElementById("kilometer5");
var kmty = document.getElementById("kmty");
var result43 = kilom5.value * 1093.6;
kmty.value = result43;
});
document.getElementById("kilometer6").addEventListener("keyup", function() {
var kilom6 = document.getElementById("kilometer6");
var kmtmi = document.getElementById("kmtmi");
var result44 = kilom6.value * 0.62137;
kmtmi.value = result44;
});
document.getElementById("miles01").addEventListener("keyup", function() {
var miles111 = document.getElementById("miles01");
var feet111 = document.getElementById("milestft1");
var result45 = miles111.value * 5280;
feet111.value = result45;
});
document.getElementById("miles02").addEventListener("keyup", function() {
var miles222 = document.getElementById("miles02");
var meters222 = document.getElementById("milestmt2");
var result46 = miles222.value / 0.00062137;
meters222.value = result46;
});
document.getElementById("miles03").addEventListener("keyup", function() {
var miles333 = document.getElementById("milesti3");
var inches333 = document.getElementById("milesti3");
var result47 = miles333.value * 63360;
inches333.value = result47;
});
document.getElementById("miles04").addEventListener("keyup", function() {
var miles444 = document.getElementById("miles04");
var cm444 = document.getElementById("milestcm4");
var result48 = miles444.value / 0.0000062137;
cm444.value = result48;
});
document.getElementById("miles05").addEventListener("keyup", function() {
var miles555 = document.getElementById("miles05");
var yards555 = document.getElementById("milesty5");
var result49 = miles555.value * 1760;
yards555.value = result49;
});
document.getElementById("miles06").addEventListener("keyup", function() {
var miles006 = document.getElementById("miles06");
var km006 = document.getElementById("milestkm6");
var result50 = miles006.value / 0.62137;
km006.value = result50;
});
body {
background-image: linear-gradient(to right top, #1b283b, #1d2440, #261f42, #321641, #3f073a);
margin: 0;
color: #85929e;
font-family: arial;
text-align: center;
}
.arithmetics {
height: 600px;
width: 850px;
}
.numbers {
font-size: 20px;
height: 30px;
width: 210px;
margin: 20px;
margin-top: 30px;
background: none;
border: none;
border-bottom: 2px solid #85929e;
color: #85929e;
}
.btns {
background: none;
color: #85929e;
border: 2px solid #85929e;
}
.conversions {
width: 800px;
height: 600px;
}
.lists, li {
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<title>Length Converter</title>
<link rel="stylesheet" type="text/css" href="converterstyle.css">
<script type="text/javascript" src="converterscript.js"></script>
</head>
<ul class="lists">
<li>
<div class="conversions">
<h2>Feet Conversion</h2>
<input type="number" id="ft1" class="numbers"><label>feet to meters</label><input type="number" id="m1" class="numbers">
<input type="number" id="ft2" class="numbers"><label>feet to inches</label><input type="number" id="inch1" class="numbers">
<input type="number" id="ft3" class="numbers"><label>feet to cm</label><input type="number" id="cm1" class="numbers">
<input type="number" id="ft4" class="numbers"><label>feet to yards</label><input type="number" id="yard1" class="numbers">
<input type="number" id="ft5" class="numbers"><label>feet to km</label><input type="number" id="km1" class="numbers">
<input type="number" id="ft6" class="numbers"><label>feet to miles</label><input type="number" id="miles1" class="numbers">
</div>
</li>
<li>
<div class="conversions">
<h2>Meter Conversions</h2>
<input type="number" id="meter1" class="numbers"><label>meters to feet</label><input type="number" id="output1" class="numbers">
<input type="number" id="meter2" class="numbers"><label>meters to inches</label><input type="number" id="output2" class="numbers">
<input type="number" id="meter3" class="numbers"><label>meters to cm</label><input type="number" id="output3" class="numbers">
<input type="number" id="meter4" class="numbers"><label>meters to yards</label><input type="number" id="output4" class="numbers">
<input type="number" id="meter5" class="numbers"><label>meters to km</label><input type="number" id="output5" class="numbers">
<input type="number" id="meter6" class="numbers"><label>meters to miles</label><input type="number" id="output6" class="numbers">
</div>
</li>
<li>
<div class="two">
<div class="conversions">
<h2>Inch Conversions</h2>
<input type="number" id="inches1" class="numbers"><label>inches to feet</label><input type="number" id="output7" class="numbers">
<input type="number" id="inches2" class="numbers"><label>inches to meters</label><input type="number" id="output8" class="numbers">
<input type="number" id="inches3" class="numbers"><label>inches to cm</label><input type="number" id="output9" class="numbers">
<input type="number" id="inches4" class="numbers"><label>inches to yards</label><input type="number" id="output10" class="numbers">
<input type="number" id="inches5" class="numbers"><label>inches to km</label><input type="number" id="output11" class="numbers">
<input type="number" id="inches6" class="numbers"><label>inches to miles</label><input type="number" id="output12" class="numbers">
</div>
</li>
</ul>
<ul class="lists">
<li>
<div class="conversions">
<h2>CM Conversions</h2>
<input type="number" id="centi1" class="numbers"><label>cm to feet</label><input type="number" id="ans1" class="numbers">
<input type="number" id="centi2" class="numbers"><label>cm to meters</label><input type="number" id="ans2" class="numbers">
<input type="number" id="centi3" class="numbers"><label>cm to inches</label><input type="number" id="ans3" class="numbers">
<input type="number" id="centi4" class="numbers"><label>cm to yards</label><input type="number" id="ans4" class="numbers">
<input type="number" id="centi5" class="numbers"><label>cm to km</label><input type="number" id="ans5" class="numbers">
<input type="number" id="centi6" class="numbers"><label>cm to miles</label><input type="number" id="ans6" class="numbers">
</div>
</li>
<li>
<div class="conversions">
<h2>Yard Conversions</h2>
<input type="number" id="yards1" class="numbers"><label>yards to feet</label><input type="number" id="op1" class="numbers">
<input type="number" id="yards2" class="numbers"><label>yards to meters</label><input type="number" id="op2" class="numbers">
<input type="number" id="yards3" class="numbers"><label>yards to inches</label><input type="number" id="op3" class="numbers">
<input type="number" id="yards4" class="numbers"><label>yards to cm</label><input type="number" id="op4" class="numbers">
<input type="number" id="yards5" class="numbers"><label>yards to km</label><input type="number" id="op5" class="numbers">
<input type="number" id="yards6" class="numbers"><label>yards to miles</label><input type="number" id="op6" class="numbers">
</div>
</li>
<li>
<div class="conversions">
<h2>KM Conversions</h2>
<input type="number" id="kilometer1" class="numbers"><label>km to feet</label><input type="number" id="kmtf" class="numbers">
<input type="number" id="kilometer2" class="numbers"><label>km to meters</label><input type="number" id="kmtm" class="numbers">
<input type="number" id="kilometer3" class="numbers"><label>km to inches</label><input type="number" id="kmti" class="numbers">
<input type="number" id="kilometer4" class="numbers"><label>km to cm</label><input type="number" id="kmtc" class="numbers">
<input type="number" id="kilometer5" class="numbers"><label>km to yards</label><input type="number" id="kmty" class="numbers">
<input type="number" id="kilometer6" class="numbers"><label>km to miles</label><input type="number" id="kmtmi" class="numbers">
</div>
</li>
</ul>
<ul class="lists">
<li>
<div class="conversions">
<h2>Mile Conversions</h2>
<input type="number" id="miles01" class="numbers"><label>miles to feet</label><input type="number" id="milestft1" class="numbers">
<input type="number" id="miles02" class="numbers"><label>miles to meters</label><input type="number" id="milestmt2" class="numbers">
<input type="number" id="miles03" class="numbers"><label>miles to inches</label><input type="number" id="milesti3" class="numbers">
<input type="number" id="miles04" class="numbers"><label>miles to cm</label><input type="number" id="milestcm4" class="numbers">
<input type="number" id="miles05" class="numbers"><label>miles to yards</label><input type="number" id="milesty5" class="numbers">
<input type="number" id="miles06" class="numbers"><label>miles to km</label><input type="number" id="milestkm6" class="numbers">
</div>
</li>
<li>
</body>
</html>

Have you looked for the path of the JS file? Maybe you move it and didn't update the path. It'll work on the snippet because everything is in the same place. Maybe post a link to the Github project, we could see the tree of your project.

If else in calculated form, calculate cubic meter = height * square meter or cubic meter = length * width * height

In my Form I let the user to enter length height and width of a room to get the calculated values for m2, m3 and Watt. But the user should also be able to put just directly height and m2 to get the Values. I have tried many syntaxes but if else doesn't work correctly.
I know I have to somehow empty the the variables, I tried it by the form reset function.
$(document).ready(function() {
// https://allaboutbasic.com/2017/08/25/how-to-add-auto-calculation-fields-or-calculator-in-contact-form-7-using-jquery/;
var le; // länge
var wi; // breite
var he; // höhe
var m2; // quadrat Meter
var m3; // Kubik Meter
var wt1 = 40; // Watt per Kubik
if (!document.getElementById("le").value || !document.getElementById("wi").value) {
$("#le").on("change", function() {
le = parseInt(this.value, 10);
$("#wi").on("change", function() {
wi = parseInt(this.value, 10);
$("#he").on("change", function() {
he = parseInt(this.value, 10);
m2 = le * wi;
m3 = le * wi * he;
wt = m3 * wt1 / 1000;
// runden ohne dezimalstellen "(toFixed(2)) zwei Stellen"
$("#m2").val(m2.toFixed());
$("#m3").val(m3.toFixed());
$("#wt").val(wt.toFixed(3));
});
});
});
} else {
$("#he").on("change", function() {
he = parseInt(this.value, 10);
$("#m2").on("change", function() {
m2 = parseInt(this.value, 10);
m3 = m2 * he;
wt = m3 * wt1 / 1000;
$("#m2").val(m2.toFixed());
$("#m3").val(m3.toFixed());
$("#wt").val(wt.toFixed(3));
});
});
}
});
function resetcalcform() {
document.getElementById("calcForm").reset();
le = undefined; // unset länge
wi = undefined; // unset breite
he = undefined; // unset höhe
m2 = undefined; // unset quadrat Meter
m3 = undefined; // unset Kubik Meter
};
label {
display: block;
}
input {}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="kaecalc ">
<form id="calcForm" name="data_entry" action="#" autocomplete="off">
<div>
<label class="" for="le">Länge in m</label>
<input type="text" class="2" id="le">
<!-- "text" type um "," als dezimal eingabe zu erlauben -->
</div>
<div>
<label class="" for="wi">Breite in m</label>
<input type="text" id="wi">
</div>
<div>
<label class="" for="he">Höhe in m </label>
<input type="text" id="he">
</div>
<div>
<label class="" for="m2">m2 </label>
<input type="number" id="m2">
</div>
<div>
<label class="" for="m3">m3 </label>
<input type="number" id="m3">
</div>
<div>
<label class="" for="watt">KW der Anlage</label>
<input type="number" id="wt">
</div>
</form>
<!-- button MTS Styles -->
<p align="right"><span class="">
<button id="tdmyb1" class="" role="button" onclick="resetcalcform()"><span class="ui-button-icon-primary ui-icon ui-icon-refresh"></span><span class="ui-button-text">reset</span></button>

var le; // länge
var wi; // breite
var he; // höhe
var m2; // quadrat Meter
var m3; // Kubik Meter
var wt1 = 40; // Watt per Kubik
var wt;
var props ={};
$(document).ready(function() {
// https://allaboutbasic.com/2017/08/25/how-to-add-auto-calculation-fields-or-calculator-in-contact-form-7-using-jquery/;
$("#le,#wi,#he,#m2").on("change", function() {
m2=m3=wt=undefined;
props[this.id] = parseInt(this.value, 10);
if(props.le && props.wi && props.he){
m2 = props.le * props.wi;
m3 = props.le * props.wi * props.he;
wt = m3 * wt1 / 1000;
}else if(props.m2 && props.he){
m2 = props.m2;
m3 = props.m2 * props.he;
wt = m3 * wt1 / 1000;
}else if(props.le && props.wi){
m2 = props.le * props.wi;
}
// runden ohne dezimalstellen "(toFixed(2)) zwei Stellen"
$("#m2").val(m2 && m2.toFixed());
$("#m3").val(m3 && m3.toFixed());
$("#wt").val(wt && wt.toFixed(3));
});
});
function resetcalcform() {
document.getElementById("calcForm").reset();
le = undefined; // unset länge
wi = undefined; // unset breite
he = undefined; // unset höhe
m2 = undefined; // unset quadrat Meter
m3 = undefined; // unset Kubik Meter
wt = undefined;
props ={};
};
label {
display: block;
}
input {}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="kaecalc ">
<form id="calcForm" name="data_entry" action="#" autocomplete="off">
<div>
<label class="" for="le">Länge in m</label>
<input type="text" class="2" id="le">
<!-- "text" type um "," als dezimal eingabe zu erlauben -->
</div>
<div>
<label class="" for="wi">Breite in m</label>
<input type="text" id="wi">
</div>
<div>
<label class="" for="he">Höhe in m </label>
<input type="text" id="he">
</div>
<div>
<label class="" for="m2">m2 </label>
<input type="number" id="m2">
</div>
<div>
<label class="" for="m3">m3 </label>
<input type="number" id="m3">
</div>
<div>
<label class="" for="watt">KW der Anlage</label>
<input type="number" id="wt">
</div>
</form>
<!-- button MTS Styles -->
<p align="right"><span class="">
<button id="tdmyb1" class="" role="button" onclick="resetcalcform()"><span class="ui-button-icon-primary ui-icon ui-icon-refresh"></span><span class="ui-button-text">reset</span></button>

This should solve your case:
$(document).ready(function() {
// https://allaboutbasic.com/2017/08/25/how-to-add-auto-calculation-fields-or-calculator-in-contact-form-7-using-jquery/;
var le; // länge
var wi; // breite
var he; // höhe
var m2; // quadrat Meter
var m3; // Kubik Meter
var wt1 = 40; // Watt per Kubik
function tryGetNumber(id){
var element = document.getElementById(id);
if(element.value){
return parseInt(element.value, 10);
} else {
return null;
}
}
function resetElement(id){
var element = document.getElementById(id);
element.value = null;
}
function recalculate(force_m2, force_m3){
le = tryGetNumber("le");
wi = tryGetNumber("wi");
if(le && wi){
m2 = le * wi;
$("#m2").val(m2.toFixed());
} else {
m2 = force_m2;
}
he = tryGetNumber("he");
if(m2 && he){
m3 = m2 * he;
$("#m3").val(m3.toFixed());
} else {
m3 = force_m3;
}
var wt = null;
if(m3){
wt = m3 * wt1 / 1000;
$("#wt").val(wt.toFixed(3));
}
}
function m2Updated(){
resetElement("le");
resetElement("wi");
m2 = tryGetNumber("m2");
recalculate(m2);
}
function heUpdated(){
m2 = tryGetNumber("m2");
recalculate(m2);
}
function m3Updated(){
resetElement("le");
resetElement("wi");
resetElement("he");
resetElement("m2");
m3 = tryGetNumber("m3");
recalculate(null, m3);
}
$("#le").on("change", recalculate);
$("#wi").on("change", recalculate);
$("#he").on("change", heUpdated);
$("#m2").on("change", m2Updated);
$("#m3").on("change", m3Updated);
});
function resetcalcform() {
document.getElementById("calcForm").reset();
le = undefined; // unset länge
wi = undefined; // unset breite
he = undefined; // unset höhe
m2 = undefined; // unset quadrat Meter
m3 = undefined; // unset Kubik Meter
};
label {
display: block;
}
input {}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="kaecalc ">
<form id="calcForm" name="data_entry" action="#" autocomplete="off">
<div>
<label class="" for="le">Länge in m</label>
<input type="number" class="2" id="le">
<!-- "text" type um "," als dezimal eingabe zu erlauben -->
</div>
<div>
<label class="" for="wi">Breite in m</label>
<input type="number" id="wi">
</div>
<div>
<label class="" for="he">Höhe in m </label>
<input type="number" id="he">
</div>
<div>
<label class="" for="m2">m2 </label>
<input type="number" id="m2">
</div>
<div>
<label class="" for="m3">m3 </label>
<input type="number" id="m3">
</div>
<div>
<label class="" for="watt">KW der Anlage</label>
<input type="number" id="wt">
</div>
</form>
<!-- button MTS Styles -->
<p align="right"><span class="">
<button id="tdmyb1" class="" role="button" onclick="resetcalcform()"><span class="ui-button-icon-primary ui-icon ui-icon-refresh"></span><span class="ui-button-text">reset</span></button>

Dynamic change slider value after onclick on checkboxes+buttons

I have a sort of e-commerce in which you have multiple choice:
the first is by clicking some buttons to change the price of an object.
the second are checkboxes for some services in addition to the first choice (so I can have tot price= button+checkboxes)
Until here it's all good.
Finally, I have a range slider input to calculate the load, and I want that the max range to be = to the total price that is displayed in a div with id="aaa"
As you can see in the code or jsfiddle, the max price doesn't change like the aaa div (the max value remains = 5000)
how can I change it dynamically?
//checkboxes and buttons
var basicPrice = 5000; // This is how we start
function getCheck() {
var currentPrice = basicPrice; // every time
currentPrice = parseFloat($(".event-hook-class.active").data("prezzo")) || basicPrice, // add any "active" boxes
services = [],
total = 0;
console.log(currentPrice)
$("input[id^=service]").each(function() {
if (this.checked) {
total += +this.value;
services.push($("[for=" +this.id + "]").html()); // get the label text
}
});
$("#prezzo").text((currentPrice + total).toFixed(2) + "€");
$("#aaa").text((currentPrice + total).toFixed(2));
$("#serv").html("services: " + services.join(", "));
}
$(document).ready(function() {
$("input[id^=service]").on("click", getCheck);
$(".event-hook-class").on("click",function(e) {
e.preventDefault();
$(".event-hook-class").removeClass("active");
$(this).addClass("active")
$("#prezzo").html($(this).data('prezzo') + ' €');
$("#mq").html($(this).data('mq'));
getCheck(); // will add this and the checkboxes
});
getCheck(); // initialise on page load
});
//slider
$(document).ready(function(){
var zzz = document.getElementById('aaa').innerText;
document.getElementById('slider1').max = zzz;
});
const $mutuo = $("#mutuo"),
$rata = $("#rata"),
$anni = $("#anni"),
$slider1 = $("#slider1"),
$slider2 = $("#slider2"),
$max = $("#aaa").html();
function showAmount1(newAmount){
document.getElementById('mutuo').innerHTML = newAmount;
$mutuo.val($("#mutuo").innerHTML);
update();
}
function showAmount2(newAmount){
document.getElementById('anni').innerHTML = newAmount;
$anni.val($("#anni").innerHTML);
update();
}
function update() {
let interesseannuo = 1.60,
C = $mutuo.html(),
anni = $anni.html(),
i = interesseannuo / 12 / 100,
n = anni * 12,
rata = C * i / (1 - Math.pow(1 + i, -n));
$rata.html(rata.toFixed(2) + " €");
}
update();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="event-hook-class simple-text piano" id="C.1_1" data-prezzo="5000" data-mq="94">
C.1_1 <br> piano 1<br> prezzo 5000 €</button><button type="button" class="event-hook-class simple-text piano" id="D.1_1" data-prezzo="10000" data-mq="94">
D.1_1 <br> piano 1<br> prezzo 10000 €</button><button type="button" class="event-hook-class simple-text piano" id="C_2.1" data-prezzo="15000" data-mq="94">
C_2.1 <br> piano 2<br> prezzo 15000 €</button><br><br><br><br>
<form id="services" name="services-form" data-name="services Form">
<div class="checkbox-field w-checkbox"><input type="checkbox" value="22500" id="service_1" name="checkbox" data-name="Checkbox" class="checkbox 1 w-checkbox-input"><label for="service_1" class="simple-text white w-form-label">design pack</label> 22500 €</div>
<div class="checkbox-field ew w-checkbox"><input type="checkbox" value="2000 " id="service_2" name="checkbox-2" data-name="service_2" class="checkbox 2 w-checkbox-input"><label for="service_2" class="simple-text white w-form-label">security</label> 2000 €</div>
<div class="checkbox-field 2 w-checkbox"><input type="checkbox" value="5000" id="service_3" name="checkbox-2" data-name="service_3" class="checkbox 3 w-checkbox-input"><label for="service_3" class="simple-text white w-form-label">wellness pack</label> 5000 €</div>
<div class="checkbox-field 4 w-checkbox"><input type="checkbox" value="1000" id="service_4" name="checkbox-2" data-name="service_4" class="checkbox 4 w-checkbox-input"><label for="service_4" class="simple-text white w-form-label">box auto</label> 1000 €</div>
</form>
<br><br><br>
<div class="paragraph" id="prezzo">
200 €</div>
<br><br><br>
<div class="info-text-wrapper">
<p class="info-paragraph black" id="aaa"></p>
<p class="info-paragraph black">Totale mutuo (€)</p>
<input type="range" min="0" max="" value="" step=".01" onchange="showAmount1(this.value)" id="slider1"/>
<div class="info-paragraph black" type="text" id="mutuo" >0</div><br><br><br>
<p class="info-paragraph black">Durata mutuo (anni)</p>
<input type="range" min="10" max="30" value="10" step="5" onchange="showAmount2(this.value)" id="slider2">
<div class="info-paragraph black" type="text" id="anni" >10</div><br><br><br>
<p class="info-paragraph black">La tua rata</p>
<div class="paragraph" id="rata"></div><br>
</div>

Working fiddle.
You need to update the max attribute of slider inside your getCheck() function like :
document.getElementById('slider1').max = currentPrice;
//checkboxes and buttons
var basicPrice = 5000; // This is how we start
function getCheck() {
var currentPrice = basicPrice; // every time
currentPrice = parseFloat($(".event-hook-class.active").data("prezzo")) || basicPrice, // add any "active" boxes
services = [],
total = 0;
$("input[id^=service]").each(function() {
if (this.checked) {
total += +this.value;
services.push($("[for=" + this.id + "]").html()); // get the label text
}
});
$("#prezzo").text((currentPrice + total).toFixed(2) + "€");
$("#aaa").text((currentPrice + total).toFixed(2));
$("#serv").html("services: " + services.join(", "));
document.getElementById('slider1').max = (currentPrice + total).toFixed(2);
}
$(document).ready(function() {
$("input[id^=service]").on("click", getCheck);
$(".event-hook-class").on("click", function(e) {
e.preventDefault();
$(".event-hook-class").removeClass("active");
$(this).addClass("active")
$("#prezzo").html($(this).data('prezzo') + ' €');
$("#mq").html($(this).data('mq'));
getCheck(); // will add this and the checkboxes
});
getCheck(); // initialise on page load
});
//slider
$(document).ready(function() {
var zzz = document.getElementById('aaa').innerText;
document.getElementById('slider1').max = zzz;
});
const $mutuo = $("#mutuo"),
$rata = $("#rata"),
$anni = $("#anni"),
$slider1 = $("#slider1"),
$slider2 = $("#slider2"),
$max = $("#aaa").html();
function showAmount1(newAmount) {
document.getElementById('mutuo').innerHTML = newAmount;
$mutuo.val($("#mutuo").innerHTML);
update();
}
function showAmount2(newAmount) {
document.getElementById('anni').innerHTML = newAmount;
$anni.val($("#anni").innerHTML);
update();
}
function update() {
let interesseannuo = 1.60,
C = $mutuo.html(),
anni = $anni.html(),
i = interesseannuo / 12 / 100,
n = anni * 12,
rata = C * i / (1 - Math.pow(1 + i, -n));
$rata.html(rata.toFixed(2) + " €");
}
update();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="event-hook-class simple-text piano" id="C.1_1" data-prezzo="5000" data-mq="94">
C.1_1 <br> piano 1<br> prezzo 5000 €</button><button type="button" class="event-hook-class simple-text piano" id="D.1_1" data-prezzo="10000" data-mq="94">
D.1_1 <br> piano 1<br> prezzo 10000 €</button><button type="button" class="event-hook-class simple-text piano" id="C_2.1" data-prezzo="15000" data-mq="94">
C_2.1 <br> piano 2<br> prezzo 15000 €</button><br><br><br><br>
<form id="services" name="services-form" data-name="services Form">
<div class="checkbox-field w-checkbox"><input type="checkbox" value="22500" id="service_1" name="checkbox" data-name="Checkbox" class="checkbox 1 w-checkbox-input"><label for="service_1" class="simple-text white w-form-label">design pack</label> 22500 €</div>
<div class="checkbox-field ew w-checkbox"><input type="checkbox" value="2000 " id="service_2" name="checkbox-2" data-name="service_2" class="checkbox 2 w-checkbox-input"><label for="service_2" class="simple-text white w-form-label">security</label> 2000 €</div>
<div class="checkbox-field 2 w-checkbox"><input type="checkbox" value="5000" id="service_3" name="checkbox-2" data-name="service_3" class="checkbox 3 w-checkbox-input"><label for="service_3" class="simple-text white w-form-label">wellness pack</label> 5000 €</div>
<div class="checkbox-field 4 w-checkbox"><input type="checkbox" value="1000" id="service_4" name="checkbox-2" data-name="service_4" class="checkbox 4 w-checkbox-input"><label for="service_4" class="simple-text white w-form-label">box auto</label> 1000 €</div>
</form>
<br><br><br>
<div class="paragraph" id="prezzo">
200 €</div>
<br><br><br>
<div class="info-text-wrapper">
<p class="info-paragraph black" id="aaa"></p>
<p class="info-paragraph black">Totale mutuo (€)</p>
<input type="range" min="0" max="" value="" step=".01" onchange="showAmount1(this.value)" id="slider1" />
<div class="info-paragraph black" type="text" id="mutuo">0</div><br><br><br>
<p class="info-paragraph black">Durata mutuo (anni)</p>
<input type="range" min="10" max="30" value="10" step="5" onchange="showAmount2(this.value)" id="slider2">
<div class="info-paragraph black" type="text" id="anni">10</div><br><br><br>
<p class="info-paragraph black">La tua rata</p>
<div class="paragraph" id="rata"></div><br>
</div>

JS - combine values from two functions

How do I combine outputs of the two functions to do some operations on the two values?
<div class="grid">
<h2>Adjust the level</h2>
<input
type="range"
name="points"
min="0"
max="10"
step="1"
onChange="xLevel(this.value)">
<input
type="range"
name="points"
min="0"
max="10"
step="1"
onChange="yLevel(this.value)">
<div id="output">
<p id="x"></p>
<p id="y"></p>
</div>
</div>
And the JS is:
var output = document.getElementById("output");
var xout = document.getElementById("x");
var yout = document.getElementById("y");
function xLevel(newVal) {
xout.innerHTML = newVal;
}
function yLevel(newVal) {
yout.innerHTML = newVal;
}
So how do I combine the two values, x and y, to eg. multiply them and display them in yet another div?
Thanks

Store the new values in their own variables in the top-level scope, and then manipulate them in a separate function.
var output = document.getElementById("output");
var xout = document.getElementById("x");
var yout = document.getElementById("y");
var multout = document.getElementById('mult');
var xval;
var yval;
function xLevel(newVal) {
xout.innerHTML = newVal;
xval = parseInt(newVal, 10); // casts it to a number
updateMultiplier();
}
function yLevel(newVal) {
yout.innerHTML = newVal;
yval = parseInt(newVal, 10); // casts it to a number
updateMultiplier();
}
function updateMultiplier() {
multout.innerHTML = yval * xval;
}
and then for your markup:
<div class="grid">
<h2>Adjust the level</h2>
<input
type="range"
name="points"
min="0"
max="10"
step="1"
onChange="xLevel(this.value)">
<input
type="range"
name="points"
min="0"
max="10"
step="1"
onChange="yLevel(this.value)">
<div id="output">
<p id="x"></p>
<p id="y"></p>
<p id="mult"></p>
</div>
</div>