I recently delved into learning javascript, html, and css on Codepen. I've been working on creating a matrix code rain effect over the past few days. While I do have some experience with other programming languages, I encountered an issue when trying to save and shift generated strings in arrays for later use. Instead of shifting the string over by one character and adding a new random character, the entire array named store was being overwritten with the most recent string.
Below is the javascript code I used (including console logs for debugging purposes):
var numDivs = 10;
var pos = [];
var delay = [];
/* Check page is loaded and create each of the divs for the 'raindrops' */
for (let i = 0; i < numDivs; i++) {
document.addEventListener('DOMContentLoaded', function() {
var div = document.createElement('div');
div.id = 'matrix'+i;
div.className = 'matrixC m'+i;
document.body.appendChild(div);
}, false);
}
/* Generate 12 character string for each of the 'raindrops' */
var characters = [...];
var store = [];
var state2 = "false";
function genNum() {
var stringArr = [];
for (let n = 0; n < numDivs; n++) {
var finalString = "";
var char = 0;
if (state2 == "false"){
var state = "false";
}
if (state == "false"){
for (let m = 0; m < 20; m++) {
let char = characters[Math.floor(Math.random() * characters.length)];
finalString += char;
stringArr[m] = char;
}
state = "true";
}
else {
...
}
...
}
state2 = "true";
}
setInterval(genNum, 100); /* Regenerate string from above every 0.15s */
...
If you require it, here is my CSS as well:
body {
background-color: black;
}
.matrixC {
transform: translate(-200%,-200%);
font-size: 10px;
width: 5px;
display: inline-block;
text-align: center;
word-wrap: break-word;
background: linear-gradient(black, #d0ebc4);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 0 20px #70ea37;
margin: -5px;
}
I attempted moving the store state around in the code and even tried using switch cases to specify which part of the array to modify but the same error persisted.