Develop Reference

How could I add some HTML/Text into a Javascript text output? I can only seem to either only do JS or only text, not both

I am currently trying to design a scrolling command prompt with JS and HTML. Unfortunately I cannot find a way to output text and a JavaScript variable on the same line. I feel like I have tried a million things.
var textarea = $('.term');
var speed = 50; //Writing speed in milliseconds
var text = 'TEST';
var java = '282828'
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 = 5;
function feedbacker() {
textarea.append("[ " + count / 1000 + "] " + output[i] + "<br>");
if (time % 10 == 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() * 1000) + 1000;
count += time;
setTimeout(
function() {
if (i < output.length - 2)
feedbacker();
else {
textarea.append("<br>Initialising...<br>");
setTimeout(function() {$(".load").fadeOut(1000);}, 1000000);
}
},time);
}
var output = [
"Below is a vat test",
"number" (java),
"Hello",
(java),
"Above is a test",
"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/3.3.1/jquery.min.js"></script>
<div class="load">
<pre class="term">dev:~$ </pre>
</div>
This outputs correctly but any time I try to add text it fails. For example:
"number" (java),
"number", (java),
"number (java)",
"number '(java)'",
I think this output may be broken because it's a textarea. I am not sure. I would love to learn and get this figured out. Much appreciated!

var output = [
"Below is a vat test",
"number" (java),
"Hello",
(java),
"Above is a test",
"Initialising...",
""];
"number" (java) and (java) are not the correct way to display Javascript Variables.
You use simply java, or use + to concatenate two strings together such as "number" + java. You could be fancier with Template literals https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals:
var output = [
"Below is a vat test",
`number ${java}`,
"Hello",
java,
"Above is a test",
"Initialising...",
""];

Just use concatenation (+) to append a JavaScript variable to static content.
var textarea = $('.term');
var speed = 50; //Writing speed in milliseconds
var text = 'TEST';
var java = '282828'
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 = 5;
function feedbacker() {
textarea.append("[ " + count / 1000 + "] " + output[i] + "<br>");
if (time % 10 == 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() * 1000) + 1000;
count += time;
setTimeout(
function() {
if (i < output.length - 2)
feedbacker();
else {
textarea.append("<br>Initialising...<br>");
setTimeout(function() {$(".load").fadeOut(1000);}, 1000000);
}
},time);
}
var output = [
"Below is a vat test",
"number (" + java + ")",
"Hello",
"(" + java + ")",
"Above is a test",
"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/3.3.1/jquery.min.js"></script>
<div class="load">
<pre class="term">dev:~$ </pre>
</div>

JavaScript: How Do I Prevent A User From Crashing setInterval / setTimeout Event?

To see the problem click on https://jsfiddle.net/kjz1myL2/16/ and when the fade is complete move your mouse from button to button REALLY FAST.
Is there a way to prevent events from crashing or reset them when they crash? I made a JavaScript event that happens with setInterval. This helps work the fades. It is a very crucial part of the code, but it crashes SUPER EASILY! If a user switches between two elements too fast, it will crash the setInterval. I wanted to make a mouse pause event in which it stops the user's mouse or a mouse slow event that slows the mouse speed to the slowest possible speed until the setInterval is over, but people have stated that taking the control from the user is VERY DANGEROUS for VERY OBVIOUS REASONS. Not exploring that option, I decided to come here and ask for a more user-friendly solution to prevent the crash from happening. I have this code (PART OF THE CODE) [ADJUSTED]:
JavaScript
window.addEventListener("load", TourFunction);
var TourFadeInEvent;
var TourYesMouseEnterTimeEvent, TourNoMouseEnterTimeEvent;
var TourYesMouseEnterEvent, TourNoMouseEnterEvent;
var TourYesMouseLeaveEvent, TourNoMouseLeaveEvent;
Steps = 3;
TourFunction()
function TourFunction(){
if (Steps == 3){
Opacity = 0;
TourFadeInEvent = window.setInterval(TourFadeIn, 20);
}else{
TourYesMouseEnterEvent = TourInputYes.addEventListener("mouseenter", TourYesMouseEnter);
TourNoMouseEnterEvent = TourInputNo.addEventListener("mouseenter", TourNoMouseEnter);
}
function TourFadeIn(){
if (Opacity <= 0 || Opacity < 1){
Opacity = Opacity + .01;
TourContainer.style.opacity = Opacity;
}else{
clearInterval(TourFadeInEvent);
Steps += 1;
TourFunction();
return Steps;
}
}
function TourYesMouseEnter(){
TourYesMouseEnterTimeEvent = window.setInterval(TourYesMouseEnterTime, 10);
function TourYesMouseEnterTime(){
if (YesfgcR < 255){
YesfgcR += 5;
YesfgColor = "rgb(" + YesfgcR + ", " + YesfgcG + ", " + YesfgcB + ")";
TourInputYes.style.color = YesfgColor;
}if (YesbcR < 255){
YesbcR += 5;
YesbColor = "rgb(" + YesbcR + ", " + YesbcG + ", " + YesbcB + ")";
TourInputYes.style.borderColor = YesbColor;
}if (NofgcR > 0){
NofgcR = 0;
NofgColor = "rgb(" + NofgcR + ", " + NofgcG + ", " + NofgcB + ")";
TourInputNo.style.color = NofgColor;
}if (NobcR > 0){
NobcR = 0;
NobColor = "rgb(" + NobcR + ", " + NobcG + ", " + NobcB + ")";
TourInputNo.style.borderColor = NobColor;
}if (YesfgcR >= 255 && YesbcR >= 255 && NofgcR == 0 && NobcR == 0){
clearInterval(TourYesMouseEnterTimeEvent);
return YesfgcR, YesbcR, YesfgColor, YesbColor;
}
}
}
function TourNoMouseEnter(){
TourNoMouseEnterTimeEvent = window.setInterval(TourNoMouseEnterTime, 10);
function TourNoMouseEnterTime(){
if (NofgcR < 255){
NofgcR += 5;
NofgColor = "rgb(" + NofgcR + ", " + NofgcG + ", " + NofgcB + ")";
TourInputNo.style.color = NofgColor;
}if (NobcR < 255){
NobcR += 5;
NobColor = "rgb(" + NobcR + ", " + NobcG + ", " + NobcB + ")";
TourInputNo.style.borderColor = NobColor;
}if (YesfgcR > 0){
YesfgcR = 0;
YesfgColor = "rgb(" + YesfgcR + ", " + YesfgcG + ", " + YesfgcB + ")";
TourInputYes.style.color = YesfgColor;
}if (YesbcR > 0){
YesbcR = 0;
YesbColor = "rgb(" + YesbcR + ", " + YesbcG + ", " + YesbcB + ")";
TourInputYes.style.borderColor = YesbColor;
}if (NofgcR >= 255 && NobcR >= 255 && YesfgcR == 0 && YesbcR == 0){
clearInterval(TourNoMouseEnterTimeEvent);
return NofgcR, NobcR, NofgColor, NobColor;
}
}
}
}
The code runs fine if you don't switch from each button too fast but if you go to fast, it will crash. I have been experiencing this a lot and have not gotten an answer. PLEASE give me something to work off of.

Use CSS transitions for the color fade instead -
document.getElementById('Game1_TourInputYes').addEventListener('mouseover', switchActive);
document.getElementById('Game1_TourInputNo').addEventListener('mouseover', switchActive);
function switchActive(e) {
var others = document.getElementsByClassName('btn-tour-input');
for (let i = 0; i < others.length; i++) {
others[i].classList.remove('active');
}
this.classList.add('active');
}
input[type=button] {
background: transparent;
border: 3px solid black;
color: black;
transition: all .4s ease-in-out;
padding: 10px 30px;
}
input.active {
border: 3px solid red;
color: red;
}
<input class="btn-tour-input Tour_Input_Yes" id="Game1_TourInputYes" type="button" value="Yes" />
<input class="btn-tour-input Tour_Input_No" id="Game1_TourInputNo" type="button" value="No" />

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

How to fade out/in content in a slider

Fiddle: https://jsfiddle.net/fLfg7yqn/
JQuery:
$(function () {
$('.dvContentSlide').not(':eq(0)').addClass("dispNone");
$('.dvContentSlide:eq(0)').addClass("slideIsActive");
var g = parseInt($('div.slideIsActive').index()) + 1;
var u = $(".dvContentSlide").length;
$("#spCur").text("Current Index: " + g);
$("#spDVLen").text("SLIDE div length: " + $(".dvContentSlide").length);
for (var i = 0; i < u; i++)
$(".ulContentSliderNav").append('<li><span></span></li>');
$(".ulContentSliderNav :first-child a").addClass("ulContentSliderNavSel");
$(".cSlider").mouseover(function () {
clearInterval(po);
}).mouseout(function () {
po = setInterval(AutoSlide, 4000);
});
$(".ulContentSliderNav a").click(function (e) {
e.preventDefault();
$(this).parent().parent().find(".ulContentSliderNavSel").removeClass("ulContentSliderNavSel");
$(this).addClass("ulContentSliderNavSel");
GoToTheSlide($(this).parent().index());
});
function GoToTheSlide(t) {
$('.dvContentSlide').addClass("dispNone");
$('.dvContentSlide').removeClass("slideIsActive");
$('.dvContentSlide:nth-child(' + ++t + ')').addClass("slideIsActive").removeClass("dispNone");
}
$("#aContentSliderNext").click(function () {
var k = $('div.slideIsActive').index() + 1;
if (k >= $(".dvContentSlide").length) {
k = 1;
$('.dvContentSlide').not(':eq(0)').addClass("dispNone").removeClass("slideIsActive");
$('.dvContentSlide:eq(0)').addClass("slideIsActive").removeClass("dispNone");
}
else {
$(".dvContentSlide:nth-child(" + k + ")").removeClass("slideIsActive").addClass("dispNone");
$(".dvContentSlide:nth-child(" + ++k + ")").removeClass("dispNone").addClass("slideIsActive");
}
$("#spCur").text("Current Index: " + k);
$(".ulContentSliderNavSel").removeClass("ulContentSliderNavSel");
$(".ulContentSliderNav li:nth-child(" + k + ") a").addClass("ulContentSliderNavSel");
});
$("#aContentSliderPrev").click(function () {
var k = $('div.slideIsActive').index() + 1;
if (k <= 1) {
k = $(".dvContentSlide").length;
$('.dvContentSlide').not(':eq(' + k + ')').addClass("dispNone").removeClass("slideIsActive");
$('.dvContentSlide:nth-child(' + k + ')').addClass("slideIsActive").removeClass("dispNone");
}
else {
$(".dvContentSlide:nth-child(" + k + ")").removeClass("slideIsActive").addClass("dispNone");
$(".dvContentSlide:nth-child(" + --k + ")").removeClass("dispNone").addClass("slideIsActive");
}
$("#spCur").text("Current Index: " + k);
$(".ulContentSliderNavSel").removeClass("ulContentSliderNavSel");
$(".ulContentSliderNav li:nth-child(" + k + ") a").addClass("ulContentSliderNavSel");
});
function AutoSlide() {
var k = $('div.slideIsActive').index() + 1;
console.log(k);
if (k >= $(".dvContentSlide").length) {
k = 1;
$('.dvContentSlide').not(':eq(0)').addClass("dispNone").removeClass("slideIsActive");
$('.dvContentSlide:eq(0)').addClass("slideIsActive").removeClass("dispNone");
}
else {
$(".dvContentSlide:nth-child(" + k + ")").removeClass("slideIsActive").addClass("dispNone");
$(".dvContentSlide:nth-child(" + ++k + ")").removeClass("dispNone").addClass("slideIsActive");
}
$("#spCur").text("Current Index: " + k);
$(".ulContentSliderNavSel").removeClass("ulContentSliderNavSel");
$(".ulContentSliderNav li:nth-child(" + k + ") a").addClass("ulContentSliderNavSel");
}
var po = setInterval(AutoSlide, 4000);
});
Everything is working fine except how can I update the jquery/css so instead of showing the slide, it fades out the current slide and fades in the next slide with keeping the structure as is.

Have you tried fadeOut() fadeIn()? I didn't see it in your code, follow this link to see if it will meet your need.

Snow until the end of the page

I have a script of snow for the site, I took it from this site. As you can see, the snow does not go the bottom of the page. How can I make it go to the bottom?
Source code:
var SNOW_Time;
var SNOW_dx, SNOW_xp, SNOW_yp;
var SNOW_am, SNOW_stx, SNOW_sty;
var i, SNOW_Browser_Width = $(document).width(), SNOW_Browser_Height = $(document).height();
SNOW_dx = new Array();
SNOW_xp = new Array();
SNOW_yp = new Array();
SNOW_am = new Array();
SNOW_stx = new Array();
SNOW_sty = new Array();
for (i = 0; i < SNOW_no; ++i) {
SNOW_dx[i] = 0;
SNOW_xp[i] = Math.random() * (SNOW_Browser_Width - 50);
SNOW_yp[i] = Math.random() * SNOW_Browser_Height;
SNOW_am[i] = Math.random() * 20;
SNOW_stx[i] = 0.02 + Math.random() / 10;
SNOW_sty[i] = 0.7 + Math.random();
if (i == 0) document.write("<\div id=\"SNOW_flake" + i + "\" style=\"position: absolute; z-index: " + i + "; visibility: visible; top: 15px; left: 15px; width: " + SNOW_Width + "; height: " + SNOW_Height + "; background: url('" + SNOW_Picture + "') no-repeat;\"><\/div>");
else document.write("<\div id=\"SNOW_flake" + i + "\" style=\"position: absolute; z-index: " + i + "; visibility: visible; top: 15px; left: 15px; width: " + SNOW_Width + "; height: " + SNOW_Height + "; background: url('" + SNOW_Picture + "') no-repeat;\"><\/div>");
}
function SNOW_Weather() {
for (i = 0; i < SNOW_no; ++i) {
SNOW_yp[i] += SNOW_sty[i];
if (SNOW_yp[i] > SNOW_Browser_Height) {
SNOW_xp[i] = Math.random() * (SNOW_Browser_Width - SNOW_am[i] - 30);
SNOW_yp[i] = 0;
SNOW_stx[i] = 0.02 + Math.random() / 10;
SNOW_sty[i] = 0.7 + Math.random();
}
SNOW_dx[i] += SNOW_stx[i];
document.getElementById("SNOW_flake" + i).style.top = SNOW_yp[i] + "px";
document.getElementById("SNOW_flake" + i).style.left = SNOW_xp[i] + SNOW_am[i] * Math.sin(SNOW_dx[i]) + "px";
}
SNOW_Time = setTimeout("SNOW_Weather()", 10);
}
SNOW_Weather();

It looks like it's determined by the variable SNOW_Browser_Height. $(document).height() doesn't return the proper height. You could use this instead:
document.body.getClientRects()[0].height