Develop Reference

The random code i generate does not increment by one on page load instead it chooses any value

Using the code below i am able to generate a random last digit code, however i want it to increment by 1 on page load.
The input field it should show in an element.
function agentId() {
var d = new Date().getTime();
var acode = 'GA000444x'.replace(/[xy]/g, function(c) {
var r = (d + Math.random() * 16) % 16 | 0;
d = Math.floor(d / 16);
return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
});
document.getElementById('acode').innerHTML = acode;
}
window.onload = function() {
agentId();
};
<div class="col-sm-3">
<label for="acode">Agent Code:</label>
<button type="button" id="acode"></button>
</div>

As implied in the comments, you should use localStorage to store values for later.
Note: snippets here don't allow for localStorage access so test this code some where else.
function increase() {
agentId(++last_digit)
try {
localStorage.setItem(last_digit)
} catch (e) {
console.error(e);
}
}
function agentId(last_digit) {
var d = new Date().getTime();
var acode = 'GA000444x'.replace(/[xy]/g, last_digit);
document.getElementById('acode').innerHTML = acode;
}
var last_digit
window.onload = function() {
try {
last_digit = localStorage.getItem("last_digit") || 0;
} catch (e) {
console.error(e)
last_digit = 1;
}
agentId(last_digit);
};
<div class="col-sm-3">
<label for="acode">Agent Code:</label>
<button type="button" id="acode" onclick="increase()"></button>
</div>

change image source on click event and add pixel

I am trying to change one image source with id using javascript, also I would like to add/remove width to the picture depending on whether we click on + or - button.
var changeimg = function() {
var sun_to_eclipse = document.getElementById("sun");
if (sun_to_eclipse.src == "images/soleil.jpg") {
sun_to_eclipse.src = "images/eclipse.jpg";
} else {
sun_to_eclipse.src = "images/soleil.jpg";
}
}
var addpx = function() {
var sun_to_eclipse = document.getElementById("sun");
if (sun_to_eclipse.width <= "500") {
sun_to_eclipse.style.width = sun_to_eclipse.style.width + "20px"
}
}
var removepx = function() {
var sun_to_eclipse = document.getElementById("sun");
if (sun_to_eclipse.width >= "250") {
sun_to_eclipse.style.width = sun_to_eclipse.style.width - "20px"
}
}
var setupListeners = function() {
var plus = document.getElementById("plus");
var minus = document.getElementById("minus");
var sun_to_eclipse = document.getElementById("sun");
sun_to_eclipse.addEventListener("click", changeimg);
plus.addEventListener("click", addpx);
minus.addEventListener("click", removepx);
}
window.addEventListener("load", setupListeners);
<div id="doc">
<div id="buttons">
<button id="plus">+</button>
<button id="minus">-</button>
</div>
<img id="sun" src="https://pbs.twimg.com/profile_images/641353910561566720/VSxsyxs7_400x400.jpg" alt="sunny" />
</div>
Any idea what's wrong?

To Fetch the Width use .clientWidth instead of .style.width
So for addpx use sun_to_eclipse.clientWidth + 20 + "px"; and
for minus use sun_to_eclipse.clientWidth - 20 + "px";
var changeimg = function() {
var sun_to_eclipse = document.getElementById("sun");
if (sun_to_eclipse.src == "https://camo.githubusercontent.com/e9c5fe6cb160f55f564723b8c1679170c74f5e53/687474703a2f2f73392e706f7374696d672e6f72672f7a336e707077797a332f73686565705f333530782e6a7067") {
sun_to_eclipse.src = "http://www.ptahai.com/wp-content/uploads/2016/06/Best-Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg";
} else {
sun_to_eclipse.src = "https://camo.githubusercontent.com/e9c5fe6cb160f55f564723b8c1679170c74f5e53/687474703a2f2f73392e706f7374696d672e6f72672f7a336e707077797a332f73686565705f333530782e6a7067";
}
}
var addpx = function() {
var sun_to_eclipse = document.getElementById("sun");
if (sun_to_eclipse.clientWidth <= "500") {
sun_to_eclipse.style.width = sun_to_eclipse.clientWidth + 20 + "px";
}
}
var removepx = function() {
var sun_to_eclipse = document.getElementById("sun");
if (sun_to_eclipse.clientWidth >= "250") {
sun_to_eclipse.style.width = sun_to_eclipse.clientWidth - 20 + "px";
}
}
var setupListeners = function() {
var plus = document.getElementById("plus");
var minus = document.getElementById("minus");
var sun_to_eclipse = document.getElementById("sun");
sun_to_eclipse.addEventListener("click", changeimg);
plus.addEventListener("click", addpx);
minus.addEventListener("click", removepx);
}
window.addEventListener("click", setupListeners);
#sun {
width: 300px;
}
<div id="doc">
<div id="buttons">
<button id="plus">+</button>
<button id="minus">-</button>
</div>
<img id="sun" src="https://cdn.pixabay.com/photo/2018/03/11/20/42/mammals-3218028_1280.jpg" alt="sunny" />
</div>

the problem is with your setting widths. style.width will return text with some number plus the unit at the end. use offsetWidth property.
var sun = false;
var changeimg = function() {
var sun_to_eclipse = document.getElementById("sun");
if (sun == false) {
sun_to_eclipse.src = "images/eclipse.jpg";
sun = true;
} else {
sun_to_eclipse.src = "images/soleil.jpg";
sun = false;
}
}
var addpx = function() {
var sun_to_eclipse = document.getElementById("sun");
if (sun_to_eclipse.width <= "500") {
sun_to_eclipse.style.width = sun_to_eclipse.offsetWidth + 20 + "px"
}
}
var removepx = function() {
var sun_to_eclipse = document.getElementById("sun");
if (sun_to_eclipse.width >= "250") {
sun_to_eclipse.style.width = sun_to_eclipse.offsetWidth - 20 + "px"
}
}
var setupListeners = function() {
var plus = document.getElementById("plus");
var minus = document.getElementById("minus");
var sun_to_eclipse = document.getElementById("sun");
sun_to_eclipse.addEventListener("click", changeimg);
plus.addEventListener("click", addpx);
minus.addEventListener("click", removepx);
}
window.addEventListener("load", setupListeners);
<div id="doc">
<div id="buttons">
<button id="plus">+</button>
<button id="minus">-</button>
</div>
<img id="sun" src="https://pbs.twimg.com/profile_images/641353910561566720/VSxsyxs7_400x400.jpg" alt="sunny" />
</div>
IMAGE ONCLICK: its not working properly because img.src contains the full address to the image. eg
document.getElementById("sun").src;
"file:///C:/Users/Abhinav/Desktop/images/soleil.jpg"
you can fix that using a variable
var sun = false;
var changeimg = function() {
var sun_to_eclipse = document.getElementById("sun");
if (sun == false) {
sun_to_eclipse.src = "images/eclipse.jpg";
sun = true;
} else {
sun_to_eclipse.src = "images/soleil.jpg";
sun = false;
}
}

Making use of offsetWidth to achieve this.
var changeimg = function() {
var sun_to_eclipse = document.getElementById("sun");
if (sun_to_eclipse.src == "images/soleil.jpg") {
sun_to_eclipse.src = "images/eclipse.jpg";
} else {
sun_to_eclipse.src = "images/soleil.jpg";
}
}
var addpx = function() {
var sun_to_eclipse = document.getElementById("sun");
if (sun_to_eclipse.width <= "500") {
sun_to_eclipse.style.width = sun_to_eclipse.offsetWidth + 20 + "px"
}
}
var removepx = function() {
var sun_to_eclipse = document.getElementById("sun");
if (sun_to_eclipse.width >= "250") {
sun_to_eclipse.style.width = sun_to_eclipse.offsetWidth - 20 + "px"
}
}
var setupListeners = function() {
var plus = document.getElementById("plus");
var minus = document.getElementById("minus");
var sun_to_eclipse = document.getElementById("sun");
sun_to_eclipse.addEventListener("click", changeimg);
plus.addEventListener("click", addpx);
minus.addEventListener("click", removepx);
}
window.addEventListener("load", setupListeners);
<div id="doc">
<div id="buttons">
<button id="plus" onClick =>+</button>
<button id="minus">-</button>
</div>
<img id="sun" src="https://pbs.twimg.com/profile_images/641353910561566720/VSxsyxs7_400x400.jpg" alt="sunny" />
</div>

JavaScript Code Optimization - Creating Reusable Classes

I am new to JavaScript and need help with code optimization. I am pretty sure there are some ways to create "classes" to run my code better and more efficient.
Here is the link to my jsfiddle demo version: JSFiddle Demo
<form id="tyreForm">
<div id="currentTyre">
<h2>Current Tyre Size</h2>
<div id="errorDisplay"></div>
<input type="number" id="sectionWidth"> /
<input type="number" id="aspectRatio"> R
<input type="number" id="rimDiameter">
<p>Sidewall: <span class="output"></span></p>
<p>Width: <span class="output"></span></p>
<p>Diameter: <span class="output" id="fullDiameter"></span></p>
<p>Circumference: <span class="output"></span></p>
<p>Reverse / Mile: <span class="output"></span></p>
</div>
<div id="newTyre">
<h2>New Tyre Size</h2>
<input type="number" id="newSectionWidth"> /
<input type="number" id="newAspectRatio"> R
<input type="number" id="newRimDiameter">
<p>Sidewall: <span class="output"></span></p>
<p>Width: <span class="output"></span></p>
<p>Diameter: <span class="output" id="newFullDiameter"></span></p>
<p>Circumference: <span class="output"></span></p>
<p>Reverse / Mile: <span class="output"></span></p>
</div>
<div id="result">
<h2>Tyre difference</h2>
<p>Diameter Difference(%): <span id="diameterDifference"></span></p>
</div>
<button type="submit">Calculate</button>
</form>
document.getElementById('tyreForm').addEventListener('submit', function(e) {
e.preventDefault();
var sw = this.sectionWidth.value;
var ar = this.sectionWidth.value;
var rd = this.sectionWidth.value;
var nsw = this.newSectionWidth.value;
var nar = this.newAspectRatio.value;
var nrd = this.newRimDiameter.value;
/* Form Validation Starts */
var errorDisplay = document.getElementById('errorDisplay');
errorDisplay.style.display = 'block';
if (sw == '' || ar == '' || rd == '') {
errorDisplay.style.color = "red";
errorDisplay.textContent = "Error: Please fill all the fields";
return false;
}
if (sw == 0 || ar == 0 || rd == 0) {
errorDisplay.style.color = "red";
errorDisplay.textContent = "Error: Please check your input fields. 0 is not valid";
return false;
}
/* Form Validation Finishes */
this.getElementsByClassName("output")[0].textContent = sidewall(sw, ar).toFixed(2);
this.getElementsByClassName("output")[1].textContent = width(sw, ar, rd).toFixed(2);
this.getElementsByClassName("output")[2].textContent = diameter(sw, ar, rd).toFixed(2);
this.getElementsByClassName("output")[3].textContent = circumference(sw, ar, rd).toFixed(2);
this.getElementsByClassName("output")[4].textContent = reverseMile(sw, ar, rd).toFixed(2);
this.getElementsByClassName("output")[5].textContent = sidewall(nsw, nar).toFixed(2);
this.getElementsByClassName("output")[6].textContent = width(nsw, nar, nrd).toFixed(2);
this.getElementsByClassName("output")[7].textContent = diameter(nsw, nar, nrd).toFixed(2);
this.getElementsByClassName("output")[8].textContent = circumference(nsw, nar, nrd).toFixed(2);
this.getElementsByClassName("output")[9].textContent = reverseMile(nsw, nar, nrd).toFixed(2);
var fd = document.getElementById('fullDiameter').textContent;
var nfd = document.getElementById('newFullDiameter').textContent;
document.getElementById('diameterDifference').textContent = diameterDifference(fd, nfd);
}, false);
/* All functions */
function sidewall(sw, ar) {
return ((sw * (ar/100)) / 25.4);
}
function width(sw, ar) {
return (sw / 25.4);
}
function diameter(sw, ar, rd) {
return ((sidewall(sw, ar) * 2) + parseFloat(rd));
}
function circumference(sw, ar, rd) {
return (((((sw * (ar/100)) / 25.4) * 2)+ parseInt(rd)) * 3.14);
}
function reverseMile(sw, ar, rd) {
return (63360 / (((((sw * (ar/100)) / 25.4) * 2)+ parseInt(rd)) * 3.14));
}
function diameterDifference(fd, nfd) {
return fd * nfd; // Just dummy formula
}
The main idea is:
Have two forms where people can enter their tire sizes.
If only the first form filled with data - calculation happens only in the first form
If both forms are filled with data - both forms' calculations are proceeded plus some data is passed to third form
Please check jsfiddle for more information.
Thanks in advance!
Best

You should create a Tyre prototype that takes sectionWidth, aspectRatio, and rimDiameter in the "constructor" and more all of your functions into that prototype. Doing this will simplify the logic of your code and will help you adhere to the principles of DRY (don't repeat yourself).
var Tyre = function(sectionWidth, aspectRatio, rimDiameter) {
this.sw = sectionWidth;
this.ar = aspectRatio;
this.rd = rimDiameter;
this.isEmpty = function() {
return this.sw === '' || this.ar === '' || this.rd === '';
};
this.isZero = function() {
return this.sw == 0 || this.ar == 0 || this.rd == 0;
};
this.width = function() {
return this.sw / 25.4;
};
this.sidewall = function() {
return this.width() * this.ar / 100;
};
this.diameter = function() {
return 2 * this.sidewall() + parseFloat(this.rd);
};
this.circumference = function() {
return this.diameter() * Math.PI;
};
this.reverseMile = function() {
return 63360 / this.circumference();
};
this.diameterDifference = function(other) {
return this.diameter() * other.diameter();
};
};
document.getElementById('tyreForm').addEventListener('submit', function(e) {
e.preventDefault();
var currentTyre = new Tyre(this.sectionWidth.value, this.aspectRatio.value, this.rimDiameter.value);
var newTyre = new Tyre(this.newSectionWidth.value, this.newAspectRatio.value, this.newRimDiameter.value);
/* Form Validation Starts */
var errorDisplay = document.getElementById('errorDisplay');
errorDisplay.style.display = 'block';
if (currentTyre.isEmpty()) {
errorDisplay.style.color = "red";
errorDisplay.textContent = "Error: Please fill all the fields";
return false;
}
if (currentTyre.isZero()) {
errorDisplay.style.color = "red";
errorDisplay.textContent = "Error: Please check your input fields. 0 is not valid";
return false;
}
/* Form Validation Finishes */
this.getElementsByClassName("output")[0].textContent = currentTyre.sidewall().toFixed(2);
this.getElementsByClassName("output")[1].textContent = currentTyre.width().toFixed(2);
this.getElementsByClassName("output")[2].textContent = currentTyre.diameter().toFixed(2);
this.getElementsByClassName("output")[3].textContent = currentTyre.circumference().toFixed(2);
this.getElementsByClassName("output")[4].textContent = currentTyre.reverseMile().toFixed(2);
if (newTyre.isEmpty() || newTyre.isZero())
return;
this.getElementsByClassName("output")[5].textContent = newTyre.sidewall().toFixed(2);
this.getElementsByClassName("output")[6].textContent = newTyre.width().toFixed(2);
this.getElementsByClassName("output")[7].textContent = newTyre.diameter().toFixed(2);
this.getElementsByClassName("output")[8].textContent = newTyre.circumference().toFixed(2);
this.getElementsByClassName("output")[9].textContent = newTyre.reverseMile().toFixed(2);
document.getElementById('diameterDifference').textContent = currentTyre.diameterDifference(newTyre);
}, false);

Multiple progress bars visualy update only one

i'm working on my JavaScript skills and this is my first program trial here.
Everything was going quite well for me, but i'm stuck on this problem for about 3 days now and i guess there is something i don't get over here.
Well, diving in - i have 2 separate "Training Fields" - each has it's own "Train" button (onclick function) , "Level up" button (onclick function) and progress bar.
The problem is that the higher "Training Field" will progress the lower progress bar and not it's own.
Help will be appreciated! thx
//ignore this line, it's for me for testing
document.getElementById('hideMe').style.visibility = 'hidden';
/*========================================
Javascript for first set
========================================*/
var bodyTotal = 0;
var totalBodyCost = 0;
var bodyCost = 100;
var amountLoaded = 1;
function buyBody(){
bodyCost = totalBodyCost + Math.floor(100 * Math.pow(1.1,bodyTotal));
if(amountLoaded >= bodyCost){
totalBodyCost += bodyCost;
bodyTotal = bodyTotal + 1;
document.getElementById('bodyTotal').innerHTML = bodyTotal;
var finalMessage = document.getElementById('bodyFinalMessage').style.visibility = 'hidden';
amountLoaded = 0;
};
var nextCost = totalBodyCost + Math.floor(100 * Math.pow(1.1,bodyTotal));
document.getElementById('bodyCost').innerHTML = nextCost;
document.getElementById("bodyProgressBar").max = nextCost;
bodyCost = nextCost;
progressBarSim(amountLoaded);
};
function progressBarSim(al) {
var bar = document.getElementById('bodyProgressBar');
var status = document.getElementById('bodyStatus');
status.innerHTML = al+"/" +bodyCost;
bar.value = al;
al++;
var sim = "progressBarSim("+al+")";
}
function trainBody(){
progressBarSim(amountLoaded);
if(amountLoaded < bodyCost){
amountLoaded++;
}else{
var finalMessage = document.getElementById('bodyFinalMessage').style.visibility = 'visible';
finalMessage.innerHTML = "";
}
};
/*=============================================*/
/*========================================
Javascript for second set
========================================*/
var mindTotal = 0;
var totalMindCost = 0;
var mindCost = 100;
var amountLoaded = 1;
function buyMind(){
mindCost = totalMindCost + Math.floor(100 * Math.pow(1.1,mindTotal));
if(amountLoaded >= mindCost){
totalMindCost += mindCost;
mindTotal = mindTotal + 1;
document.getElementById('mindTotal').innerHTML = mindTotal;
var finalMessage = document.getElementById('mindFinalMessage').style.visibility = 'hidden';
amountLoaded = 0;
};
var nextCost = totalMindCost + Math.floor(100 * Math.pow(1.1,mindTotal));
document.getElementById('mindCost').innerHTML = nextCost;
document.getElementById("mindProgressBar").max = nextCost;
mindCost = nextCost;
progressBarSim(amountLoaded);
};
function progressBarSim(al) {
var bar = document.getElementById('mindProgressBar');
var status = document.getElementById('mindStatus');
status.innerHTML = al+"/" +mindCost;
bar.value = al;
al++;
var sim = "progressBarSim("+al+")";
}
function trainMind(){
progressBarSim(amountLoaded);
if(amountLoaded < mindCost){
amountLoaded++;
}else{
var finalMessage = document.getElementById('mindFinalMessage').style.visibility = 'visible';
finalMessage.innerHTML = "";
}
};
/*=============================================*/
<html>
<head>
<link rel="stylesheet" type="text/css" href="interface.css" />
</head>
<body>
<div style="float:right">
Body Level: <span id="bodyTotal">0</span>
<button onclick="trainBody()">Train Body</button><br>
<progress id="bodyProgressBar" value="0" max="100" style="width:200px; float:left;"></progress>
<span id="bodyStatus" style="float:left; z-index:555; margin-left:-110px;">0/100</span>
<button id="bodyFinalMessage" style="float:left; visibility:hidden" onclick="buyBody()">Body Level Up</button>
<br><br>
Mind Level: <span id="mindTotal">0</span>
<button onclick="trainMind()">Train Mind</button><br>
<progress id="mindProgressBar" value="0" max="100" style="width:200px; float:left;"></progress>
<span id="mindStatus" style="float:left; z-index:555; margin-left:-110px;">0/100</span>
<button id="mindFinalMessage" style="float:left; visibility:hidden" onclick="buyMind()">Mind Level Up</button>
</div>
<div id="hideMe" style="position:absolute; top:400; left:400">
Body Cost: <span id="bodyCost">100</span><br>
Mind Cost: <span id="mindCost">100</span>
</div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>

You are reassigning variables and functions using the exact same names amountLoaded, progressBarSim(al).
Because body and mind behavior are very similar you could use a module pattern (http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html) to use the same variable and function names within their own scopes.
<button onclick="Body.onClick()">Body</button>
<button onclick="Mind.onClick()">Mind</button>
And in your script file
var Body = (function() {
var me = {};
me.onClick = function() {
console.log("body click");
progressBar(al);
};
function progressBar(al) {
}
return me;
})();
var Mind = (function() {
var me = {};
me.onClick = function() {
console.log("mind click");
progressBar(al);
};
function progressBar(al) {
}
return me;
})();
The gotcha here is you can't use body with the inline onclick since that already refers to the body element.

JavaScript Not Triggering

So I've got the beginnings of an animation script here:
<div id="card5">
<h4 class="y">Let me be your guide.</h4>
<h1>Here's what I've got:</h1>
<div id="a">
<h4 id="aa">Creativity</h4>
</div>
<div id="b">
<h4 id="bb">Know-how</h4>
</div>
<div id="c">
<h4 id="cc">Familiarity</h4>
</div>
</div>
<script type="text/javascript">
var aa = document.getElementById("aa");
var bb = document.getElementById("bb");
var cc = document.getElementById("cc");
var aamargin = style.aa.marginTop | 30;
var bbmargin = style.bb.marginTop | 30;
var ccmargin = style.cc.marginTop | 30;
var a = document.getElementById("a");
var b = document.getElementById("b");
var c = document.getElementsByTagName("c");
var aadown = true;
var bbdown = true;
var ccdown = true;
a.onmouseover = amove;
b.onmouseover = bmove;
c.onmouseover = cmove;
function amove() {
window.alert("Herro!");
if (aadown) {
aaup();
aadown = false;
}
}
function aaup() {
if (aamargin > 0) {
aamargin -= 1;
style.aa.marginTop = aamargin + "%";
requestAnimationFrame(aaup);
}
}
</script>
And when I mouse over the first div ("a"), of course, nothing happens. I put an alert box in to see if the amove() function was being triggered, and it wasn't. The alert never fired. No idea why. It's probably just a typo somewhere...

the error is here:
var aamargin = style.aa.marginTop | 30;
var bbmargin = style.bb.marginTop | 30;
var ccmargin = style.cc.marginTop | 30;
I think you mean aa.style instead of style.aa?

Two errors with style.aa.marginTop | 30;:
| is a bitwise operator, if you want logical OR, you need ||, like this: style.aa.marginTop || 30;
style is not defined, you need aa.style, like this: aa.style.marginTop || 30;
Last thing: bmove and cmove are not defined.
See the patched example here:
<div id="card5">
<h4 class="y">Let me be your guide.</h4>
<h1>Here's what I've got:</h1>
<div id="a">
<h4 id="aa">Creativity</h4>
</div>
<div id="b">
<h4 id="bb">Know-how</h4>
</div>
<div id="c">
<h4 id="cc">Familiarity</h4>
</div>
</div>
<script type="text/javascript">
var aa = document.getElementById("aa");
var bb = document.getElementById("bb");
var cc = document.getElementById("cc");
var aamargin = aa.style.marginTop || 30;
var bbmargin = bb.style.marginTop || 30;
var ccmargin = cc.style.marginTop || 30;
var a = document.getElementById("a");
var b = document.getElementById("b");
var c = document.getElementsByTagName("c");
var aadown = true;
var bbdown = true;
var ccdown = true;
bmove = cmove = amove; // just a quickfix
a.onmouseover = amove;
b.onmouseover = bmove;
c.onmouseover = cmove;
function amove() {
window.alert("Herro!");
if (aadown) {
aaup();
aadown = false;
}
}
function aaup() {
if (aamargin > 0) {
aamargin -= 1;
aa.style.marginTop = aamargin + "%";
requestAnimationFrame(aaup);
}
}
</script>