External paths not linking to each other?

External paths not linking to each other? - javascript

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.

Related

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>

Want to get previous value of selected button

<pre>
<div class="quantity">
<input type="number" name="qty" id="qty" value="1" class="form-qty form-control" min="1">
<div class="quantity-nav">
<div class="quantity-button quantity-up qty-up">+</div>
<div class="quantity-button quantity-down qty-down">-</div>
</div>
</div>
<pre>
This is loop.
I want to get input value when i click quantity up & down button each time. There are multiple elements.
How to find input value in javascript by clicking button up & down.

You can add onClick event with parents feature to detect the inputs near to the button.
$(document).on('click','.quantity-up',function(){
$qtyElemnt = $(this).parents('.quantity').find('.form-qty');
$qty = $qtyElemnt.val();
$qtyElemnt.val(Number($qty)+1);
});
$(document).on('click','.quantity-down',function(){
$qtyElemnt = $(this).parents('.quantity').find('.form-qty');
$qty = $qtyElemnt.val();
$qtyElemnt.val(Number($qty)-1);
});
.quantity {
padding: 10px;
}
.quantity-nav{
display: inline-block;
}
.quantity-button {
display: inline-block;
padding: 5px;
background-color: #c7c5c5;
border: 1px solid #585353;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class="quantity">
<input type="number" name="qty" value="1" class="form-qty form-control" min="1">
<div class="quantity-nav">
<div class="quantity-button quantity-up qty-up">+</div>
<div class="quantity-button quantity-down qty-down">-</div>
</div>
</div>
<div class="quantity">
<input type="number" name="qty" value="1" class="form-qty form-control" min="1">
<div class="quantity-nav">
<div class="quantity-button quantity-up qty-up">+</div>
<div class="quantity-button quantity-down qty-down">-</div>
</div>
</div>
<div class="quantity">
<input type="number" name="qty" value="1" class="form-qty form-control" min="1">
<div class="quantity-nav">
<div class="quantity-button quantity-up qty-up">+</div>
<div class="quantity-button quantity-down qty-down">-</div>
</div>
</div>
</div>
Thanks :-)

Actually your problem is quite easy to solve.
Try to add this script at the end of your <body>.
I suggest you to make some modifications in your html too: use <button> or <input type="button"or even <a> tags for your controls.
I added some logic about the min/max/step attributes you can set on a <input type="number"> but this is optional. It's up to you to change this.
document.addEventListener("DOMContentLoaded", function() {
const qtyWraps = document.getElementsByClassName('quantity');
for (let i = 0; i < qtyWraps.length; i++) {
const qtyWrap = qtyWraps.item(i);
const input = qtyWrap.querySelector('.form-qty');
const up = qtyWrap.querySelector('.qty-up');
const down = qtyWrap.querySelector('.qty-down');
const output = qtyWrap.querySelector('.output');
up.addEventListener('click', function(e) {
e.preventDefault();
addValue(1);
});
down.addEventListener('click', function(e) {
e.preventDefault();
addValue(-1);
});
input.addEventListener('input', function() {
output.textContent = input.value
});
const addValue = function(value) {
const current = parseInt(input.value);
const min = input.getAttribute('min') || -Infinity;
const max = input.getAttribute('max') || Infinity;
const step = input.getAttribute('step') || 1;
const newValue = Math.min(max, Math.max(min, current + value * step));
input.value = newValue;
if (newValue <= min) down.setAttribute('disabled', 'disabled');
else down.removeAttribute('disabled');
if (newValue >= max) up.setAttribute('disabled', 'disabled');
else up.removeAttribute('disabled');
input.dispatchEvent(new Event('input'));
}
addValue(0)
}
});
.quantity {
display: block;
width: 500px;
margin: auto;
text-align: center;
}
.quantity .form-qty {
display: inline-block;
}
.quantity .quantity-nav {
display: inline-block;
}
.quantity .output {
background: yellow;
width: 500px;
margin: 1em auto 0;
}
<div class="quantity">
<input type="number" name="qty" id="qty" value="1" class="form-qty form-control" min="1">
<div class="quantity-nav">
<button class="quantity-button quantity-up qty-up">+</button>
<button class="quantity-button quantity-down qty-down">-</button>
</div>
<!-- I put it here to show the output result -->
<div class="output">1</div>
</div>

You can use localStorage to store the value of your quantity, this would make the data persistent.
Please check the below code snippet:
const down = document.querySelector('.down');
const up = document.querySelector('.up');
const input = document.querySelector('.quantity');
// store utility function
const store = {
existsIn: function(key) {
return this.getFromKey(key) !== null;
},
getFromKey: function(key) {
return window.localStorage.getItem(key);
},
add: function(key, value) {
const storeSource = window.localStorage.setItem(key, value);
}
}
const quantity = Object.create(store);
quantity.exists = function() {
return this.existsIn('quantity');
}
quantity.increase = function() {
let storedQuantity = this.exists() ? parseFloat(this.getFromKey('quantity')) : 0;
storedQuantity = storedQuantity + 1;
this.add('quantity', storedQuantity);
}
quantity.decrease = function() {
let storedQuantity = this.exists() ? parseFloat(this.getFromKey('quantity')) : 0;
if(storedQuantity > 0) {
storedQuantity = storedQuantity - 1;
}
this.add('quantity', storedQuantity);
}
quantity.show = function() {
return this.exists() ? this.getFromKey('quantity') : 0;
}
// event listeners for up and down buttons
up.addEventListener('click', function() {
quantity.increase();
// update input on button click
input.value = quantity.show();
})
down.addEventListener('click', function() {
quantity.decrease();
// update input on button click
input.value = quantity.show();
})
// update input on page load
input.value = quantity.show();
There you can find a working fiddle:
https://jsbin.com/tavalocoti/5/edit?html,js,console,output

add additional value to the total

I am looking for a way to add the value from (discount) and (quantity) to my total. As for discount part, the customer will need to enter the right code to receiver discount. And for quantity, when clicked at the checkbox, then change the quantity, the total will also follow. Can you guys help me out on this problem?
thanks
(sorry, my English is not good)
function addItemPrice() {
var total = 0;
var count = 0;
for (var i = 0; i < document.myform.item.length; i++) {
if (document.myform.item[i].checked) {
total = (total + document.myform.item[i].value * 1); // another way to convert string to number
count++;
}
}
return total;
}
var sh_prices = new Array();
sh_prices["standard"] = 10;
sh_prices["express"] = 20;
function getAddShipping() {
var shippingPrice = 0;
var theForm = document.forms["myform"];
var shipping = theForm.elements["shipping"]
for (var i = 0; i < shipping.length; i++) {
if (shipping[i].checked) {
shippingPrice = sh_prices[shipping[i].value];
break;
}
}
return shippingPrice;
}
function getCode() {
var theForm = document.forms["myform"];
var discode = theForm.elements["discount"]
if (discode == "UAC123") {
alert("yes");
} else {
alert("no")
}
}
function getTotal() {
var totalPrice = getAddShipping() + addItemPrice();
document.getElementById('Price').innerHTML = "the total price" + totalPrice;
}
<form name="myform">
Sickle $5 <input type="checkbox" name="item" value="5" onclick="getTotal(item)">
<input type="number" name="quantity"><br> Sickle $1 <input type="checkbox" name="item" value="1" onclick="getTotal(item)">
<input type="number" name="quantity" value="1"><br> Sickle $50 <input type="checkbox" name="item" value="50" onclick="getTotal(item)">
<input type="number" name="quantity" value="1"><br> Sickle $5 <input type="checkbox" name="item" value="5" onclick="getTotal(item)">
<input type="number" name="quantity" value="1"><br> Sickle $7 <input type="checkbox" name="item" value="7" onclick="getTotal(item)">
<input type="number" name="quantity" value="1"><br> Standard
<input type="radio" name="shipping" value="standard" onClick="getTotal(shipping)" /> Express
<input type="radio" name="shipping" value="express" onClick="getTotal(shipping)" /> <br> Discount code
<input type="text" name="discount" size=15>
<input type="button" id="code" value="check" onClick="getCode(code)">
<div id="Price">
</div>
</form>

dynamic changing max range and document.getElementById

I have a range slider and I want the max range to be set dynamically from the html text of a div with class="aaa". unfortunately it doesn't not work. And maybe I have some error in the var = zzz that sets the max value..
Here's my code
var zzz = document.getElementById('aaa').val();
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();
<div class="info-text-wrapper">
<p class="info-paragraph black" val="123456" id="aaa">123456</p>
<p class="info-paragraph black">Totale mutuo (€)</p>
<input type="range" min="0" max="" value="" step="10" onchange="showAmount1(this.value)" id="slider1"/>
<div class="info-paragraph black" type="text" id="mutuo" >10000</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>

val() is used in jQuery, For javascript you need to use value
In javascript if you want the input value then use
document.getElementById('aaa').value
Instead of
document.getElementById('aaa').val()
If you want text of element you can use
document.getElementById('aaa').innerHTML
OR
document.getElementById('aaa').innerText
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>
<div class="info-text-wrapper">
<p class="info-paragraph black" val="123456" id="aaa">123456</p>
<p class="info-paragraph black">Totale mutuo (€)</p>
<input type="range" min="0" max="" value="" step="10" onchange="showAmount1(this.value)" id="slider1"/>
<div class="info-paragraph black" type="text" id="mutuo" >10000</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>

val() function only fetches the value of input elements. In order to get the text of other elements, you need to use innerHTML or innerText. Just replace
var zzz = document.getElementById('aaa').val();
with
var zzz = document.getElementById('aaa').innerText;
It should work.

More efficient way of duplicating the code

Every time I click the + button I want the same input to display
The way I do it here works fine but seems like the worst way of doing it as just repeating the same code and changing the id's (also if I want for example 5 inputs I would have to repeat this code 5 times). What would be a better way of doing this?
<html>
<head>
<script language='JavaScript' type='text/javascript'>
function show3(){
document.getElementById('div2').style.display = 'block';
}
</script>
<style>
.hide {
display: none;
}
</style>
</head>
<body>
<div>
<input type="range" min="0" max="1500" value="0" class="slider2" id="one"/>
<p>Value(mm): <input type="text" id="two" size="10" class="special" /></p>
<button onclick="show3();" type="button">+</button>
</div>
<script>
var slider1 = document.getElementById("one");
var output2 = document.getElementById("two");
output2.value = slider1.value;
slider1.oninput = function() {
output2.value = this.value;
}
</script>
<div id="div2" class="hide">
<input type="range" min="0" max="1500" value="0" class="slider2" id="three"/>
<p>Value(mm): <input type="text" id="four" size="10" class="special" /></p>
<button onclick="show3();" type="button">+</button>
</div>
<script>
var slider2 = document.getElementById("three");
var output3 = document.getElementById("four");
output2.value = slider1.value;
slider2.oninput = function() {
output3.value = this.value;
}
</script>
</body>
</html>
<html>
<head>
<script language='JavaScript' type='text/javascript'>
function show3(){
document.getElementById('div2').style.display = 'block';
}
</script>
<style>
.hide {
display: none;
}
</style>
</head>
<body>
<div>
<input type="range" min="0" max="1500" value="0" class="slider2" id="one"/>
<p>Value(mm): <input type="text" id="two" size="10" class="special" /></p>
<button onclick="show3();" type="button">+</button>
</div>
<script>
var slider1 = document.getElementById("one");
var output2 = document.getElementById("two");
output2.value = slider1.value;
slider1.oninput = function() {
output2.value = this.value;
}
</script>
<div id="div2" class="hide">
<input type="range" min="0" max="1500" value="0" class="slider2" id="three"/>
<p>Value(mm): <input type="text" id="four" size="10" class="special" /></p>
<button onclick="show3();" type="button">+</button>
</div>
<script>
var slider2 = document.getElementById("three");
var output3 = document.getElementById("four");
output2.value = slider1.value;
slider2.oninput = function() {
output3.value = this.value;
}
</script>
</body>
</html>

This will work for all the sliders. But you need to keep in mind a couple of things :
This will work only for the sliders that are already rendered in the DOM (even if they are hidden) if you render new sliders to the DOM you will need to attach the event listener as I did it in the foreach loop.
The input id (e.g "one") needs to match the output data-range="one"
function show3(){
document.getElementById('div2').style.display = 'block';
}
var sliders = document.querySelectorAll(".slider"); // slider = common class name
sliders.forEach(( slider ) => {
slider.addEventListener('input', (e) => {
const sliderId = e.target.id;
const output = document.querySelector(`[data-range=${sliderId}]`);
output.value = e.target.value;
});
});
<html>
<head>
<style>
.hide {
display: none;
}
</style>
</head>
<body>
<div>
<input type="range" min="0" max="1500" value="0" class="slider" id="one"/>
<p>Value(mm): <input type="text" data-range="one" id="two" size="10" class="special" /></p>
<button onclick="show3();" type="button">+</button>
</div>
<div id="div2" class="hide">
<input type="range" min="0" max="1500" value="0" class="slider" id="two"/>
<p>Value(mm): <input type="text" data-range="two" id="four" size="10" class="special" /></p>
<button onclick="show3();" type="button">+</button>
</div>
</body>
</html>

Might be easier to include the code in the element and clone it (parentNode is the div) :
<div>
<input type="range" min="0" max="1500" value="0"
oninput="this.parentNode.getElementsByTagName('INPUT')[1].value = this.value"/>
<p>Value(mm): <input type="text" size="10" /></p>
<button type="button"
onclick="this.parentNode.parentNode.append(this.parentNode.cloneNode(true))">+</button>
</div>

I would recommend you to create some kind of class which let you create slider components dynamically.
Here's a quick example (not optimized):
var SliderComponent = (function(doc) {
var defaults = {
containerSelector: 'body',
value: 0,
min: 0,
max: 1500,
inputSize: 10,
inputClass: 'special',
sliderClass: 'slider',
buttonClass: 'button'
}, options;
function SliderComponent(options) {
options = Object.assign({}, defaults, options || {});
this.container = getContainer(options);
this.input = createInput(options);
this.slider = createSlider(options);
this.removeButton = createButton(options.buttonClass, '-');
this.addButton = createButton(options.buttonClass, '+');
this.element = render.apply(this);
this.events = [];
this.events.push(
addEventListener.call(this, 'click', this.removeButton, function() {
this.destroy();
}),
addEventListener.call(this, 'click', this.addButton, function() {
new SliderComponent(options);
}),
addEventListener.call(this, 'input', this.slider, function(event) {
this.input.value = event.target.value;
}),
addEventListener.call(this, 'input', this.input, function(event) {
this.slider.value = event.target.value;
})
)
}
SliderComponent.prototype.destroy = function() {
this.events.forEach(function(e) {
e();
});
this.element.remove();
}
function addEventListener(name, element, listener) {
listener = listener.bind(this);
element.addEventListener(name, listener);
return function() {
element.removeEventListener(name, listener);
};
}
function getContainer(options) {
var container = doc.querySelector(options.containerSelector);
if(!container) {
throw new Error('Container for selector %s not found', options.containerSelector);
}
return container;
}
function createInput(options) {
var input = doc.createElement('input');
input.setAttribute('type', 'number');
input.setAttribute('min', options.min);
input.setAttribute('max', options.max);
input.setAttribute('size', options.inputSize);
input.classList.add(options.inputClass);
input.value = options.value;
return input;
}
function createSlider(options) {
var input = doc.createElement('input');
input.setAttribute('type', 'range');
input.setAttribute('min', options.min);
input.setAttribute('max', options.max);
input.classList.add(options.sliderClass);
input.value = options.value;
return input;
}
function createButton(klass, text) {
var button = doc.createElement('button');
button.setAttribute('type', 'button');
button.classList.add(klass);
button.textContent = text;
return button;
}
function render() {
var element = doc.createElement('div');
element.appendChild(this.slider);
element.appendChild(this.input);
element.appendChild(this.removeButton);
element.appendChild(this.addButton);
return this.container.appendChild(element);
}
return SliderComponent;
})(document);
var sliders = new SliderComponent();

We Keep Coding

JavaScript is the programming language of the Web.

External paths not linking to each other? - javascript

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.

Related

Insert Input Value into Label Text Javascript

Want to get previous value of selected button

add additional value to the total

dynamic changing max range and document.getElementById

More efficient way of duplicating the code

Categories

Resources