Develop Reference

JavaScript text is not showing

I am having trouble with this html loading javascript animation - from https://codepen.io/atunnecliffe/pen/siqjd
The script is not printing the text inside the javascript but the screen is fading out at the end, like in the codepen example. Here is the JS right now:
var textarea = $(".term");
var speed = 50; //Writing speed in milliseconds
var text = "sh andrew_website.sh";
var i = 0;
runner();
function runner() {
textarea.append(text.charAt(i));
i++;
setTimeout(function () {
if (i < text.length) runner();
else {
textarea.append("<br>");
i = 0;
setTimeout(function () {
feedbacker();
}, 1000);
}
}, Math.floor(Math.random() * 220) + 50);
}
var count = 0;
var time = 1;
function feedbacker() {
textarea.append("[ " + count / 1000 + "] " + output[i] + "<br>");
if (time % 2 == 0) {
i++;
textarea.append("[ " + count / 1000 + "] " + output[i] + "<br>");
}
if (time == 3) {
i++;
textarea.append("[ " + count / 1000 + "] " + output[i] + "<br>");
i++;
textarea.append("[ " + count / 1000 + "] " + output[i] + "<br>");
i++;
textarea.append("[ " + count / 1000 + "] " + output[i] + "<br>");
}
window.scrollTo(0, document.body.scrollHeight);
i++;
time = Math.floor(Math.random() * 4) + 1;
count += time;
setTimeout(function () {
if (i < output.length - 2) feedbacker();
else {
textarea.append("<br>Initialising...<br>");
setTimeout(function () {
$(".load").fadeOut(1000);
}, 500);
}
}, time);
}
var output = [
One error that has occurred is the VAR speed is defined but not used anywhere in the JS code however I am at a loss of as to where it could be used. Any help would be appreciated, Thanks, Oliver.

Make sure to embed jQuery, works fine for me.
var textarea = $('.term');
var speed = 50; //Writing speed in milliseconds
var text = 'sh andrew_website.sh';
var i = 0;
runner();
function runner() {
textarea.append(text.charAt(i));
i++;
setTimeout(
function() {
if (i < text.length)
runner();
else {
textarea.append("<br>")
i = 0;
setTimeout(function() {feedbacker();}, 1000);
}
}, Math.floor(Math.random() * 220) + 50);
}
var count = 0;
var time = 1;
function feedbacker() {
textarea.append("[ " + count / 1000 + "] " + output[i] + "<br>");
if (time % 2 == 0) {
i++;
textarea.append("[ " + count / 1000 + "] " + output[i] + "<br>");
}
if (time == 3) {
i++;
textarea.append("[ " + count / 1000 + "] " + output[i] + "<br>");
i++;
textarea.append("[ " + count / 1000 + "] " + output[i] + "<br>");
i++;
textarea.append("[ " + count / 1000 + "] " + output[i] + "<br>");
}
window.scrollTo(0, document.body.scrollHeight);
i++;
time = Math.floor(Math.random() * 4) + 1;
count += time;
setTimeout(
function() {
if (i < output.length - 2)
feedbacker();
else {
textarea.append("<br>Initialising...<br>");
setTimeout(function() {$(".load").fadeOut(1000);}, 500);
}
},time);
}
var output = ["TESTING",
"WORKING",
"fsdfsdfsdfsdf",
"Initialising...", ""];
html,
body {
margin: 0 auto;
height: 100%;
}
pre {
padding: 0;
margin: 0;
}
.load {
margin: 0 auto;
min-height: 100%;
width: 100%;
background: black;
}
.term {
font-family: monospace;
color: #fff;
opacity: 0.8;
font-size: 2em;
overflow-y: auto;
overflow-x: hidden;
padding-top: 10px;
padding-left: 20px;
}
.term:after {
content: "_";
opacity: 1;
animation: cursor 1s infinite;
}
#keyframes cursor {
0% {
opacity: 0;
}
40% {
opacity: 0;
}
50% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="load">
<pre class="term">andrew#dev:~$ </pre>
</div>

Organizing buttons in div using only JavaScript

I need help with organizing this gallery to look like this:
I tried everything I know with positions (absolute and relative), bottoms, margins... but I can't seem to organize it properly.
This popup div needs to occupy 80% of page height and 80% of the page width, and images shouldn't break out of div.
I am not allowed to change HTML or to add CSS. Everything needs to be written inside the JS file.
Here is my code:
$(document).ready(function() {
var images = $('div[title ="London gallery"]').children('img').map(function() {
return $(this).attr('src')
}).get();
var description = $('div[title ="London gallery"]').children('p').map(function() {
return $(this).text();
}).get();
$('div[title ="London gallery"]').hide();
var gallery_lndn = document.createElement('button');
gallery_lndn.id = 'btn_London';
gallery_lndn.innerHTML = 'Look at the galery!';
document.body.appendChild(gallery_lndn);
document.getElementById('btn_London').onclick = function() {
show_pictures(images, description);
}
function show_pictures(images, description) {
function popUp() {
var index = 0;
var popup = document.createElement('div');
popup.className = 'popup';
popup.id = 'div_popup';
popup.style.background = "#2F4F4F";
popup.style.position = "absolute";
popup.style.top = "0px";
popup.style.left = "0px";
popup.style.right = "0px";
popup.style.margin = "100px auto";
popup.style.height = "80%";
popup.style.width = "80%";
var cancelButton = document.createElement('button');
cancelButton.innerHTML = 'x';
cancelButton.id = 'btn_cancelButton';
cancelButton.style.background = "red";
cancelButton.style.border = "none";
cancelButton.style.display = "inline-block";
cancelButton.style.fontSize = "16px";
cancelButton.style.padding = "15px 20px";
cancelButton.style.float = "right";
cancelButton.style.top = "0";
cancelButton.onclick = function(e) {
popup.parentNode.removeChild(popup)
};
var previousButton = document.createElement('button');
previousButton.innerHTML = '<<';
previousButton.style.background = "#32CD32";
previousButton.style.border = "none";
previousButton.style.display = "inline-block";
previousButton.style.fontSize = "16px";
previousButton.style.padding = "15px 32px";
previousButton.style.position = "absolute";
previousButton.style.float = "left";
previousButton.style.bottom = "0";
previousButton.onclick = function() {
index = (index == 0) ? images.length - 1 : index - 1;
console.log(index);
updateImage();
}
var nextButton = document.createElement('button');
nextButton.innerHTML = '>>';
nextButton.style.background = "#32CD32";
nextButton.style.background = "#32CD32";
nextButton.style.border = "none";
nextButton.style.display = "inline-block";
nextButton.style.fontSize = "16px";
nextButton.style.padding = "15px 32px";
//nextButton.style.position = "absolute";
nextButton.style.float = "right";
nextButton.style.bottom = "0";
nextButton.onclick = function() {
index = (index == images.length - 1) ? 0 : index + 1;
console.log(index);
updateImage();
}
function updateImage() {
var img = new Image();
img.src = images[index];
img.style.margin = "auto";
img.style.position = "relative";
img.style.display = "block";
console.log(img);
$("#div_popup").html("");
if (index == 0) {
previousButton.style.background = "#A9A9A9";
//previousButton.disabled = "true";
} else if (index == images.length - 1) {
nextButton.style.background = "#A9A9A9";
//nextButton.disabled = "true";
} else {
//nextButton.disabled = "false";
//previousButton.disabled = "false";
previousButton.style.background = "#32CD32";
nextButton.style.background = "#32CD32";
}
popup.appendChild(previousButton);
popup.appendChild(nextButton);
popup.appendChild(cancelButton);
var message = document.createElement('span');
//message.style.position = "absolute";
message.style.bottom = "0";
message.innerHTML = "Picture " + (index + 1) + "/" + images.length + "<br>" + description[index];
img.onload = function() {
popup.appendChild(message);
popup.appendChild(img);
document.body.appendChild(popup);
};
}
updateImage();
}
popUp();
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<script src="gallery.js"></script>
</head>
<body>
<h1>London</h1>
<div class="gallery" title="London gallery">
<img src="https://cdn.londonandpartners.com/visit/general-london/areas/river/76709-640x360-houses-of-parliament-and-london-eye-on-thames-from-above-640.jpg">
<p data-target="https://cdn.londonandpartners.com/visit/general-london/areas/river/76709-640x360-houses-of-parliament-and-london-eye-on-thames-from-above-640.jpg">
Description 1.
</p>
<img src="https://news.itu.int/wp-content/uploads/2018/07/london-min-e1530887248858.jpg">
<p data-target="https://news.itu.int/wp-content/uploads/2018/07/london-min-e1530887248858.jpg">
Description 2.
</p>
</div>
</body>
</html>

You can update the button positions according to the image. Call below method inside the updateImage method just before closing.
function updatePositions(){
// absolute position for all buttons
$('#div_popup > button').css({'position': 'absolute', 'float':'none', 'z-index': 1});
// get image bottom position
let buttonTopPos = ($('#div_popup > img').offset().top + $('#div_popup > img').height()) - $('#div_popup').offset().top + 20;
// get image bottom left position
let buttonLeftPos = 0;
if($('#div_popup').width() > $('#div_popup > img').width()){
buttonLeftPos = ($('#div_popup').width() - $('#div_popup > img').width())/2
}else{
$('#div_popup > img').css({'min-width':'100%', 'max-width':'100%'});
}
// image overflow will be hidden
$('#div_popup').css('overflow', 'hidden');
// Back button position
$('#div_popup > button:nth-child(1)').css({'top': buttonTopPos, 'bottom':'auto', 'left': buttonLeftPos +'px'})
// Next button position
$('#div_popup > button:nth-child(2)').css({'top': buttonTopPos, 'bottom':'auto', 'left': (buttonLeftPos + $('#div_popup > img').width()) - 90})
// cancel button position
$('#div_popup > button:nth-child(3)').css({'top': 0, 'right': 0, left: 'auto'});
// description position
$('#div_popup > span').css({'position': 'absolute','top': buttonTopPos, 'bottom':'auto', 'left': buttonLeftPos + 90, 'width': $('#div_popup > img').width() - 90 - 90, 'text-align': 'center'})
}

Here's a layout that approximates the sample, above. For convenience, this uses JavaScript to add a <style> element to the <head>.
window.onload = () => {
const myCSS =
' body {\n' +
' width:100vw;\n' +
' height:100vh;\n' +
' position:relative\n' +
' }\n' +
' .gallery {\n' +
' background-color: darkblue;\n' +
' width: 80%;\n' +
' height: 80%;\n' +
' position: absolute;\n' +
' top: 10%;\n' +
' left: 10%;\n' +
' }\n' +
' .img-wrapper {\n' +
' background-color: transparent;\n' +
' width: calc(100% - 120px);\n' +
' height: calc(100% - 160px);\n' +
' margin: 60px;\n' +
' overflow-y: hidden;\n' +
' }\n' +
' .img-wrapper img {\n' +
' width: 100%;\n' +
' height: auto;\n' +
' }\n' +
' .btn1 {\n' +
' width: 120px;\n' +
' height: 60px;\n' +
' position: absolute;\n' +
' left: 60px;\n' +
' bottom: 30px;\n' +
' background-color: #999;\n' +
' }\n' +
' .btn2 {\n' +
' width: 120px;\n' +
' height: 60px;\n' +
' position: absolute;\n' +
' right: 60px;\n' +
' bottom: 30px;\n' +
' background-color: #999;\n' +
' }\n' +
' .btn-close {\n' +
' width: 80px;\n' +
' height: 40px;\n' +
' position: absolute;\n' +
' right: 0;\n' +
' top: 0;\n' +
' background-color: #999;\n' +
' }\n' +
' .caption {\n' +
' width: calc(100% - 409px);\n' +
' height: 60px;\n' +
' position: absolute;\n' +
' left: 192px;\n' +
' bottom: 30px;\n' +
' color: white;\n' +
' border: 1px dashed #aaa;\n' +
' text-align: center;\n' +
' padding: 0 12px;\n' +
' overflow: hidden;\n' +
' }\n';
const myStyle = document.createElement('style');
myStyle.id = 'myCSS';
myStyle.innerHTML = myCSS;
document.head.appendChild(myStyle);
}
<body>
<div class="gallery">
<div class="img-wrapper">
<img src="https://cdn.londonandpartners.com/visit/general-london/areas/river/76709-640x360-houses-of-parliament-and-london-eye-on-thames-from-above-640.jpg">
</div>
<div class="btn1">.btn1</div>
<div class="btn2">.btn2</div>
<div class="caption">.caption</div>
<div class="btn-close">.btn-close</div>
</div>
</body>

Function not get called from dynamically created html code

I'am changing the html code from javascript and want to call same function from created "div"s. but it is not called.
As you can see 'html' which is formed after function invoke also has class="screen" but created 'div's doesn't support it.
var i;
var clear = 2;
$("#container").click(function() {
var clickid = $(this).attr('id');
var left = document.getElementById(clickid).offsetLeft;
var top = document.getElementById(clickid).offsetTop;
var height = document.getElementById(clickid).offsetHeight;
var width = document.getElementById(clickid).offsetWidth;
var x = document.getElementById(clickid).value;
orient = prompt("vertical or horizontal ?");
numdiv = prompt("How many divisions should be created ?");
var divsper = [];
var html = "";
for (i = 0; i < numdiv; i++) {
per = prompt("Percentage of " + (i + 1) + "th division ?");
divsper.push(per);
}
if (orient == "vertical") {
for (i = 0; i < numdiv; i++) {
l = Math.floor(left + ((i * divsper[i] * width) / 100));
w = Math.floor((divsper[i] * width) / 100);
html = html + "<div id=" + clickid + " class=\"screen\" style=\"float:left; top:" + (top) + "px; left:" + (l) + "px; height:" + (height - clear) + "px; width:" + (w - clear) + "px; border:1px solid black;\"></div>"
}
document.getElementById(clickid).outerHTML = html;
//document.getElementById(clickid).unwrap();
}
});
* {
padding: 0px;
margin: 0px;
}
body {}
#container {
background-color: pink;
top=0%;
left=0%;
height: 100vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" class="screen">
</div>

Replace '$("#container").click(function() {' this line with '$("html").on('click', '[id*=container]', function() {'.
It will work for you.
var i;
var clear = 2;
$("html").on('click', '[id*=container]', function() {
var clickid = $(this).attr('id');
var left = this.offsetLeft;
var top = this.offsetTop;
var height = this.offsetHeight;
var width = this.offsetWidth;
var x = this.value;
orient = prompt("vertical or horizontal ?");
numdiv = prompt("How many divisions should be created ?");
var divsper = [];
var html = "";
for (i = 0; i < numdiv; i++) {
per = prompt("Percentage of " + (i + 1) + "th division ?");
divsper.push(per);
}
if (orient == "vertical") {
for (i = 0; i < numdiv; i++) {
l = Math.floor(left + ((i * divsper[i] * width) / 100));
w = Math.floor((divsper[i] * width) / 100);
html = html + "<div id=" + clickid + (i + 1) + " class=\"screen\" style=\"float:left; top:" + (top) + "px; left:" + (l) + "px; height:" + (height - clear) + "px; width:" + (w - clear) + "px; border:1px solid black;\"></div>"
}
this.outerHTML = html;
//this.unwrap();
}
});
* {
padding: 0px;
margin: 0px;
}
body {}
#container {
background-color: pink;
top=0%;
left=0%;
height: 100vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" class="screen">
</div>

Try using $('#container').on('click') instead. Dynamically generated html event handling is slightly different.

Javascript not working for unknown reason after making some little tiny change to it somewhere [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
For some reason the javascript code isn't working here. I checked it and javascript code is being executed but it isn't working. The code is at https://codepen.io/EthanID/pen/vXjpqL?editors=0010
Here is the HTML code:
var cementCount = 10000; //DON'T CHANGE THIS CHEATERS
var liveCount = 0;
var clickCount = 0;
var reset = 0;
var lay = 0;
var layCost = 15;
var mix = 0;
var mixCost = 5000;
var roll = 0;
var rollCost = 10000;
var belt = 0;
var beltCost = 250000;
var form = 0;
var formCost = 500;
var mold = 0;
var moldCost = 1200;
var set = 0;
var setCost = 3500;
document.getElementById("selector").addEventListener("click", addCement);
//document.getElementById("reset").addEventListener("click", reset);
document.getElementById("update").addEventListener("click", update);
document.getElementById("lay").addEventListener("click", buyLay);
document.getElementById("mix").addEventListener("click", buyMix);
document.getElementById("roll").addEventListener("click", buyRoll);
document.getElementById("belt").addEventListener("click", buyBelt);
document.getElementById("tiny").addEventListener("click", buyTiny);
document.getElementById("med").addEventListener("click", buyMed);
document.getElementById("big").addEventListener("click", buyBig);
document.getElementById("form").addEventListener("click", buyForm);
document.getElementById("mold").addEventListener("click", buyMold);
document.getElementById("set").addEventListener("click", buySet);
function addCement() {
cementCount = cementCount + 1 + ((form * 10) + (mold * 30) + (set * 100));
liveCount = liveCount + 1 + ((form * 10) + (mold * 30) + (set * 100));
clickCount = clickCount + 1;
}
function buyLay() {
if (cementCount > (layCost - 1)) {
cementCount = cementCount - layCost;
lay = lay + 1;
}
}
function buyMix() {
if (cementCount > (mixCost - 1)) {
cementCount = cementCount - 5000;
mix = mix + 1;
}
}
function buyRoll() {
if (cementCount > (rollCost - 1)) {
cementCount = cementCount - 10000;
roll = roll + 1;
}
}
function buyBelt() {
if (cementCount > (beltCost - 1)) {
cementCount = cementCount - 250000;
belt = belt + 1;
}
}
function buyTiny() {
if (cementCount > 499999) {
var invest = Math.floor((Math.random() * 4) + 1);
if (invest > 1) {
var returnType = Math.floor((Math.random() * 4) + 1);
var returnAmount = Math.floor((Math.random() * 5) + 1);
if (returnType == 1) {
lay = lay + returnAmount;
var returnFinal = " Cement Layers";
} else if (returnType == 2) {
mix = mix + returnAmount;
var returnFinal = " Cement Mixers";
} else if (returnType == 3) {
roll = roll + returnAmount;
var returnFinal = " Steamrollers";
} else if (returnType == 4) {
belt = belt + returnAmount;
var returnFinal = " Conveyer Belts";
}
document.getElementById("tinyCount").innerHTML = "<p style='color:green'>This investment has returned " + returnAmount + " " + returnFinal + "</p>";
} else if (invest == 1) {
var lossType = Math.floor((Math.random() * 2) + 1);
var lossAmount = Math.floor((Math.random() * 5) + 1);
if (lossType == 1) {
roll = roll - lossAmount;
var returnFinal = " Cement Rollers";
var lossAmountSpecial = lossAmount;
} else if (lossType == 2) {
cementCount = cementCount - (lossAmount * 25000);
var returnFinal = " Cementz";
var lossAmountSpecial = lossAmount * 25000;
}
document.getElementById("tinyCount").innerHTML = "<p style='color:red'>This investment has lost " + lossAmountSpecial + " " + returnFinal + "</p>";
}
}
}
function buyMed() {
if (cementCount > 999999) {
var invest = Math.floor((Math.random() * 4) + 1);
if (invest > 1) {
var returnType = Math.floor((Math.random() * 4) + 1);
var returnAmount = Math.floor((Math.random() * 15) + 1);
if (returnType == 1) {
lay = lay + returnAmount;
var returnFinal = " Cement Layers";
} else if (returnType == 2) {
mix = mix + returnAmount;
var returnFinal = " Cement Mixers";
} else if (returnType == 3) {
roll = roll + returnAmount;
var returnFinal = " Steamrollers";
} else if (returnType == 4) {
belt = belt + returnAmount;
var returnFinal = " Conveyer Belts";
}
document.getElementById("medCount").innerHTML = "<p style='color:green'>This investment has returned " + returnAmount + " " + returnFinal + "</p>";
} else if (invest == 1) {
var lossType = Math.floor((Math.random() * 2) + 1);
var lossAmount = Math.floor((Math.random() * 10) + 1);
if (lossType == 1) {
roll = roll - lossAmount;
var returnFinal = " Cement Rollers";
var lossAmountSpecial = lossAmount;
} else if (lossType == 2) {
cementCount = cementCount - (lossAmount * 25000);
var returnFinal = " Cementz";
var lossAmountSpecial = lossAmount * 25000;
}
document.getElementById("medCount").innerHTML = "<p style='color:red'>This investment has lost " + lossAmountSpecial + " " + returnFinal + "</p>";
}
}
}
function buyBig() {
if (cementCount > 4999999) {
var invest = Math.floor((Math.random() * 4) + 1);
if (invest > 1) {
var returnType = Math.floor((Math.random() * 4) + 1);
var returnAmount = Math.floor((Math.random() * 35) + 1);
if (returnType == 1) {
lay = lay + returnAmount;
var returnFinal = " Cement Layers";
} else if (returnType == 2) {
mix = mix + returnAmount;
var returnFinal = " Cement Mixers";
} else if (returnType == 3) {
roll = roll + returnAmount;
var returnFinal = " Steamrollers";
} else if (returnType == 4) {
belt = belt + returnAmount;
var returnFinal = " Conveyer Belts";
}
document.getElementById("bigCount").innerHTML = "<p style='color:green'>This investment has returned " + returnAmount + " " + returnFinal + "</p>";
} else if (invest == 1) {
var lossType = Math.floor((Math.random() * 2) + 1);
var lossAmount = Math.floor((Math.random() * 15) + 1);
if (lossType == 1) {
roll = roll - lossAmount;
var returnFinal = " Cement Rollers";
var lossAmountSpecial = lossAmount;
} else if (lossType == 2) {
cementCount = cementCount - (lossAmount * 25000);
var returnFinal = " Cementz";
var lossAmountSpecial = lossAmount * 25000;
}
document.getElementById("bigCount").innerHTML = "<p style='color:red'>This investment has lost " + lossAmountSpecial + " " + returnFinal + "</p>";
}
}
}
function buyForm() {
if (cementCount > (formCost - 1)) {
cementCount = cementCount - 500;
form = form + 1;
}
}
function buyMold() {
if (cementCount > (moldCost - 1)) {
cementCount = cementCount - 1200;
mold = mold + 1;
}
}
function buySet() {
if (cementCount > (setCost - 1)) {
cementCount = cementCount - 3500;
set = set + 1;
}
}
setInterval(updateLay, 1000);
setInterval(updateMix, 18); //Standard: 20
setInterval(updateRoll, 8); //Standard: 10
setInterval(updateBelt, 0.3); //Standard 0.4
setInterval(updateAll, 10);
setInterval(updateStock, 10000);
function updateLay() {
cementCount = cementCount + (1 * lay);
liveCount = liveCount + (1 * lay);
}
function updateMix() {
cementCount = cementCount + (1 * mix);
liveCount = liveCount + (1 * mix);
}
function updateRoll() {
cementCount = cementCount + (1 * roll);
liveCount = liveCount + (1 * roll);
}
function updateBelt() {
cementCount = cementCount + (1 * belt);
liveCount = liveCount + (1 * belt);
}
function updateAll() {
document.getElementById("counter").innerHTML = cementCount + " Cementz<br>" + ((lay * 1) + (mix * 50) + (roll * 100) + (belt * 2500));
document.getElementById("layCount").innerHTML = "You Have " + lay + " Cement Layers";
document.getElementById("lay").innerHTML = "Buy Cement Layer [" + layCost + " Cementz]";
layCost = Math.floor(100 * (lay * 0.15 + 1));
document.getElementById("mixCount").innerHTML = "You Have " + mix + " Cement Mixers";
document.getElementById("mix").innerHTML = "Buy Cement Mixer [" + mixCost + " Cementz]";
mixCost = Math.floor(5000 * (mix * 0.15 + 1));
document.getElementById("rollCount").innerHTML = "You Have " + roll + " Steamrollers";
document.getElementById("roll").innerHTML = "Buy Steamroller [" + rollCost + " Cementz]";
rollCost = Math.floor(10000 * (roll * 0.15 + 1));
document.getElementById("beltCount").innerHTML = "You Have " + belt + " Conveyer Belts";
document.getElementById("belt").innerHTML = "Buy Conveyer Belt [" + beltCost + " Cementz]";
beltCost = Math.floor(250000 * (belt * 0.15 + 1));
document.getElementById("formCount").innerHTML = "You Have " + form + " Cement Forms";
document.getElementById("form").innerHTML = "Buy Cement Form [" + formCost + " Cementz]";
formCost = Math.floor(500 * (form * 0.15 + 1));
document.getElementById("moldCount").innerHTML = "You Have " + mold + " Cement Molds";
document.getElementById("mold").innerHTML = "Buy Cement Mold [" + moldCost + " Cementz]";
moldCost = Math.floor(1200 * (mold * 0.15 + 1));
document.getElementById("setCount").innerHTML = "You Have " + set + " Cement Sets";
document.getElementById("set").innerHTML = "Buy Cement Sets [" + setCost + " Cementz]";
setCost = Math.floor(3500 * (set * 0.15 + 1));
achievement();
}
function achievement() {
if (liveCount > 999999) {
document.getElementById("box").innerHTML = "Achievement Get: <div title='You have 1000000 cement bricks!'>The Colin Award</div>";
} else if (liveCount > 499999) {
document.getElementById("box").innerHTML = "Achievement Get: <div title='You have 500000 cement bricks!'>Lets start investing!</div>";
} else if (liveCount > 199999) {
document.getElementById("box").innerHTML = "Achievement Get: <div title='You have 200000 cement bricks!'>Your Cement Brick Design Is Envied By Ryan & Gavin</div>";
} else if (liveCount > 99999) {
document.getElementById("box").innerHTML = "Achievement Get: <div title='You have 100000 cement bricks!'>Your Cement Brick Design Is Envied By Austin</div>";
} else if (liveCount > 49999) {
document.getElementById("box").innerHTML = "Achievement Get: <div title='You have 50000 cement bricks!'>5 * 10000!</div>";
} else if (liveCount > 19999) {
document.getElementById("box").innerHTML = "Achievement Get: <div title='You have 20000 cement bricks!'>Let's Get A Warehouse!</div>";
} else if (liveCount > 14999) {
document.getElementById("box").innerHTML = "Achievement Get: <div title='You have 15000 cement bricks!'>Better Then Brikz</div>";
} else if (liveCount > 9999) {
document.getElementById("box").innerHTML = "Achievement Get: <div title='You have 10000 cement bricks!'>Let's Get An Office</div>";
} else if (liveCount > 8999) {
document.getElementById("box").innerHTML = "Achievement Get: <div title='You have 9000 cement bricks!'>Over 9000!</div>";
} else if (liveCount > 4999) {
document.getElementById("box").innerHTML = "Achievement Get: <div title='You have 5000 cement bricks!'>Small Business</div>";
} else if (liveCount > 999) {
document.getElementById("box").innerHTML = "Achievement Get: <div title='You have 1000 cement bricks!'>1000 Is Pretty Nice</div>";
} else if (liveCount > 499) {
document.getElementById("box").innerHTML = "Achievement Get: <div title='You have 500 cement bricks!'>Moving Out Of The Garage</div>";
} else if (liveCount > 99) {
document.getElementById("box").innerHTML = "Achievement Get: <div title='You have 100 cement bricks!'>One Hundred Is Pro</div>";
} else if (liveCount > 49) {
document.getElementById("box").innerHTML = "Achievement Get: <div title='You have 50 cement bricks!'>Noob Cementer</div>";
} else if (liveCount > 0) {
document.getElementById("box").innerHTML = "Achievement Get: <div title='You made your first cement brick!'>Let's Do This</div>";
}
}
function updateStock() {
var stockTinyType = Math.floor((Math.random() * 4) + 1);
var stockTinyAmount = Math.floor((Math.random() * 5) + 1);
var stockMedType = Math.floor((Math.random() * 4) + 1);
var stockMedAmount = Math.floor((Math.random() * 10) + 1);
var stockBigType = Math.floor((Math.random() * 4) + 1);
var stockBigAmount = Math.floor((Math.random() * 25) + 1);
var string = "";
var string2 = "";
var string3 = "";
if (stockTinyType == 1) {
string = "<b style='color:red'>^SML -" + stockTinyAmount + "</b>st2st3";
} else if (stockTinyType > 1) {
string = "<b style='color:green'>^SML " + stockTinyAmount + "</b>st2st3";
}
if (stockMedType == 1) {
string2 = "<b style='color:red'>^MED -" + stockMedAmount + "</b>";
} else if (stockMedType > 1) {
string2 = "<b style='color:green'>^MED " + stockMedAmount + "</b>";
}
if (stockBigType == 1) {
string3 = "<b style='color:red'>^BIG -" + stockTinyAmount + "</b>";
} else if (stockBigType > 1) {
string3 = "<b style='color:green'>^BIG " + stockTinyAmount + "</b>";
}
var output = string.replace("st2", string2);
output = output.replace("st3", string3);
document.getElementById("stock").innerHTML = output;
}
document.getElementById("beltCount").addEventListener("click", ee);
function ee() {
if (cementCount == 2) {
cementCount = cementCount + 1000000000000;
liveCount = liveCount + 1000000000000;
}
}
//(C) Ethan Coe 2016
#counter,
#lay,
#layCount,
#mix,
#mixCount,
#roll,
#rollCount,
#belt,
#beltCount,
#tiny,
#tinyCount,
#med,
#medCount,
#form,
#formCount,
#mold,
#moldCount,
#big,
#bigCount,
#stock,
#set,
#setCount {
text-align: center
}
#shop {
width: 300px;
border: 10px solid #696969;
padding: 5px;
margin: 25px;
margin: auto;
background-color: #aeaeae;
opacity: 0.9;
}
#selector {
border: 10px solid #696969;
padding: 5px;
margin: 25px;
}
#counter,
#box {
text-align: center;
width: 350px;
border: 10px solid #696969;
padding: 5px;
margin: 25px;
color: white;
position: fixed;
top: 2%;
right: 2%;
position: fixed;
}
#counter {
left: 0;
}
#box {
right: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
#selector {
display: block;
margin-left: auto;
margin-right: auto
}
body {
background-image: url("http://www.michaelmolloy.co.uk/construction-photography/photographs/intro/large/construction-site.jpg");
background-color: #cccccc;
}
body {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.change:hover {
color: white;
transition: 0.4s;
}
.change,
#selector {
cursor: pointer;
}
/*(C) Ethan Coe 2016*/
<img src="http://www.masonrydepotny.com/wp-content/uploads/2013/05/cocncrete-brick.jpg" alt="Image Missing" height="70" width="70" id="selector">
<div id="shop">
<p></p>
<p id="lay" class="change">Buy Cement Layer [100 Cementz]</p>
<p id="layCount">You Have 0 Cement Layers</p>
<p id="mix" class="change">Buy Cement Mixer [5000 Cementz]</p>
<p id="mixCount">You Have 0 Cement Mixers</p>
<p id="roll" class="change">Buy Steamroller [10000]</p>
<p id="rollCount">You Have 0 Steamrollers</p>
<p id="belt" class="change">Buy Conveyer Belt [250000]</p>
<p id="beltCount">You Have 0 Conveyer Belts</p>
<hr>
<p id="tiny" class="change">Buy Small Stock Investment [500000]</p>
<p id="tinyCount">This Investment Hasn't Been Performed Yet</p>
<p id="med" class="change">Buy Medium Stock Investment [1000000]</p>
<p id="medCount">This Investment Hasn't Been Performed Yet</p>
<p id="big" class="change">Buy Large Stock Investment [5000000]</p>
<p id="bigCount">This Investment Hasn't Been Performed Yet</p>
<P id="stock">Generating Stock Market</p>
<hr>
<p id="form" class="change">Buy Cement Form [500]</p>
<p id="formCount">You have 0 Cement Forms</p>
<p id="mold" class="change">Buy Cement Mold [1200]</p>
<p id="moldCount">You have 0 Cement Molds</p>
<p id="set" class="change">Buy Cement Set [3500]</p>
<p id="setCount">You have 0 Cement Sets</p>
</div>
<div id="counter">0 Cementz
<br>0 Cementz per Second
<br>0 Cementz per Click</div>
<p id="box">Welcome to Cementz</p>
<!-(C) Ethan Coe 2016->

just remove this line:
document.getElementById("update").addEventListener("click", update);
Or create the update element

Get position in javascript not working

I want to make a small game, but I have some start up problems.
When I try to get the position of track or trackCont, it always returns x: 0, y: 0. Doesn't get right position moving the DIV with:
float: right;
display: block;
and even doesn't work using:
position: absolute;
left: 100px;
Here's the code I am using:
var Player = new Array();
var trackEntity;
function getPosition(elem){
xPos = 0;
yPos = 0;
while(elem){
xPos += (elem.offsetLeft + elem.clientLeft);
yPos += (elem.offsetTop + elem.clientTop);
elem = elem.offsetParent;
}
return {x: xPos, y: yPos};
}
window.onload = function(){
trackEntity = document.getElementById("trackCont");
for (i = 0; i < 4; i += 1){
Player[i] = new Object();
document.body.innerHTML += "<div id='p" + i + "' class='player'></div>";
Player[i].entity = document.getElementById("p" + i);
Player[i].entity.style.backgroundColor = "rgb("
+ Math.floor(Math.random() * 256) + ", "
+ Math.floor(Math.random() * 256) + ", "
+ Math.floor(Math.random() * 256) +
")";
Player[i].entity.style.left = (getPosition(trackEntity).x) + 20;
Player[i].entity.style.top = (getPosition(trackEntity).y) + 20;
}
}
http://jsfiddle.net/dh8uf6Lp/

You need to supply a unit to when assigning a value to css left.
Player[i].entity.style.left = (getPosition(trackEntity).x) + 20 +"px";
If you assign a value to a css dimension or position property it will not update when no unit is given.
It seems that when getPosition(trackEntity) is called it doesn't know where it is in the DOM. This is caused by
document.body.innerHTML += "<div id='p" + i + "' class='player'></div>";
This causes the browser to redraw all elements and trackEntity loses it reference.
Solution: do not insert html via innerHTML, but create the div and append it to the DOM.
Player[i].entity = document.createElement("div");
Player[i].entity.id = "p" + i;
//etc.
document.body.appendChild(Player[i].entity);
//Run position code.
http://jsfiddle.net/dh8uf6Lp/3/