We Keep Coding

is it possible for a function to connect to another function and gather information from an array JS

is it possible to make a function that is connected to another function that has an array this is a JS game Red Light Green Light the array is holding the text "Green Light, Red Light" I want to know if its possible to make another function that is taking information from my characters movement and when the green light or red light text appears for exapmple when green light appears nothing happens because its safe to move but when red light it appears you fail and a game over screen appears
var colors = ['Green light', 'Red light'];
(function () {
var words = ["Red light"]
i = 0;
setInterval(function(){ $('#words').fadeOut(function(){
$(this).html(colors[(i = (i + 1) % colors.length)]).fadeIn();
}); }, 4000)
})();
$(document).ready(function(){
var Block = function()
{
this.goalDistance = 1370;
this.distanceTraveled = 0;
go = false;
}
var block = new Block();
$('#green-button').click(function(){
console.log('GO!');
block.go = true;
animateBlock();
// this allows the block bob to move forward
});
$('#red-button').click(function(){
console.log('STOP!');
block.go = false;
// this allows the block bob to stop moving
});
function animateBlock()
{
if(block.go === true && block.distanceTraveled < block.goalDistance)
{
$('#block').animate({left:'+=10'},50);
block.distanceTraveled += 10;
setTimeout(function(){
animateBlock();
},50);
}
}
});
canvas{
border: 1px solid black;
width: 65%;
margin-top: 35px;
margin-inline-start: 5px;
border-inline-start-color: #ffffff;
}
body {
background-color: grey;
}
.container {
width: 20%;
max-width: 20px;
margin: auto;
}
.animated-heading {
display: flex;
align-items: center;
justify-content: center;
height: 1vh;
}
h1{
color: black;
}
#finish-line
{
position:absolute;
height:650px;
width:10px;
left:1670px;
top:135px;
background-color:black;
}
.buttons
{
margin-top: 1px;
float: left;
}
.light
{
width:150px;
height:50px;
margin-left:30px;
color:white;
font-size:2em;
}
#green-button
{
background-color:green;
border-radius: 12px;
display: inline-block; margin-right: 20px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
width: 200px;
margin-left: 820px;
margin-right: 5px;
cursor: pointer
}
#red-button
{
background-color:red;
border-radius: 12px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
width: 200px;
margin: 0 auto;
margin-right: 1px;
cursor: pointer
}
.block
{
position:relative;
width:40px;
height:39px;
background-image: url('./image/bob.jpg');
border: 1px solid black;
bottom:400px;
left:310px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<center><h1><span id="words"> Red light</span></h1></center>
<center><canvas id="myCanvas"></canvas></center>
<div class="container"></div>
<div class="animated-heading"></div>
<div class="block" id="block"></div>
<div id = 'finish-line'></div>
<div class="buttons">
<button class = "light" id="green-button" type="button">GO!</button>
<button class = "light" id="red-button" type="button">STOP!</button>
</div>

How do I get my etch-a-sketch program to "listen" to this dropdown menu instead of the buttons?

I'm new to Stack Overflow. I hope that I'm doing this correctly. ❤
I'm working on an old Etch-a-Sketch JavaScript project from months ago and decided to rework the 'mobile' form of the project because I hadn't bothered to do so at the time. At first, I tried just moving the buttons to the top horizontally, but I didn't like any of the variations I tried. So I decided I'd be better off with a dropdown menu instead that would appear when the screen is 500px or smaller, replacing the buttons.
The dropdown menu is supposed to do exactly what the buttons do - when a certain mode is selected, that's the mode that the program is supposed to switch to. For example, when the "Party mode" button is clicked, the program switches to "party mode". I want the dropdown menu to behave similarly - when the "party mode" option is selected, the program should switch to "party mode".
My logic was that I needed a function that grabbed the value of the dropdown menu, and then an "if" condition would run that pretty much says "If the value is x, x mode should run; else if the value is y, y mode should run", and so on. I added the function to the existing window.onload function so it would run upon the window loading. This didn't work.
Note that the dropdown menu will, in the future, only appear when the screen size is 500px or less. In addition, I still have the buttons on the screen for all sizes, just for testing/debugging purposes. When I'm done and have this figured out, the buttons will have "display = 'none'" and be hidden for the "mobile size".
Anyway, so yeah, the program is still just listening to the buttons, and not the dropdown menu. That leads me to believe that I need to somehow turn "off" the button mode? If that's the case, how do I do that? If that's not the case, what am I supposed to do here? Any help or insight would be greatly appreciated. Thanks!
const defaultMode = 'default';
const defaultSize = 30;
const defaultColor = '#0b478b';
let currentMode = defaultMode;
let currentSize = defaultSize;
let currentColor = defaultColor;
// Sets the program's current mode
function setCurrentMode(newMode) {
activeButton(newMode);
currentMode = newMode;
}
// Sets the grid's size
function setCurrentSize(newSize) {
currentSize = newSize;
}
// Sets the color of the square (if in default mode)
function setCurrentColor(newColor) {
currentColor = newColor;
}
// Links the various HTML elements to this script
const sizeValue = document.querySelector('#sizevalue');
const sizeSlider = document.querySelector('#sizeslider');
const colorPicker = document.querySelector('#colorpicker');
const defaultBtn = document.querySelector('#default');
const partyBtn = document.querySelector('#party');
const grayBtn = document.querySelector('#grayscale');
const eraserBtn = document.querySelector('#eraser');
const clearBtn = document.querySelector('#clear');
const grid = document.querySelector('#maincontainer');
// DOM manipulations for buttons, color picker, and size slider
colorPicker.onchange = (e) => setCurrentColor(e.target.value);
defaultBtn.onclick = () => setCurrentMode('default');
partyBtn.onclick = () => setCurrentMode('party');
grayBtn.onclick = () => setCurrentMode('gray');
eraserBtn.onclick = () => setCurrentMode('eraser');
clearBtn.onclick = () => reloadGrid();
sizeSlider.onmousemove = (e) => updateSizeValue(e.target.value);
sizeSlider.onchange = (e) => changeSize(e.target.value);
// When the size is changed, we set the grid size, update the size value (text), and reload the grid.
function changeSize(num) {
setCurrentSize(num);
updateSizeValue(num);
reloadGrid();
}
// When we update the size value, the text changes to reflect the value. (It's a square, so the value is always the same for length and width).
function updateSizeValue(num) {
sizeValue.innerHTML = `${num} x ${num}`;
}
// When we reload the grid (which happens when "Clear grid" is pressed), we ensure that we clear the grid and that the size is still the current size.
function reloadGrid() {
clearGrid()
makeGrid(currentSize)
}
// When we clear the grid, it clears the grid.
function clearGrid() {
grid.innerHTML = ''
}
// Creates the base grid and includes the code that says "when the mouse goes over the squares, draw."
function makeGrid(size) {
grid.style.gridTemplateColumns = `repeat(${size}, 1fr)`;
grid.style.gridTemplateRows = `repeat(${size}, 1fr)`;
for (i = 0; i < size * size; i++) {
let square = document.createElement('div');
square.addEventListener('mouseover', changeColor);
grid.appendChild(square);
}
}
// These are the conditions to set the color of the "pen" (squares)
function changeColor(e) {
if (currentMode === 'party') {
const randomR = Math.floor(Math.random() * 256);
const randomG = Math.floor(Math.random() * 256);
const randomB = Math.floor(Math.random() * 256);
e.target.style.backgroundColor = `rgb(${randomR}, ${randomG}, ${randomB})`;
} else if (currentMode === 'default') {
e.target.style.backgroundColor = currentColor;
} else if (currentMode === 'gray') {
e.target.style.backgroundColor = calculateGray(e);
} else if (currentMode === 'eraser') {
e.target.style.backgroundColor = 'white';
}
}
// Shading mode code
function calculateGray(e) {
let clr = returnRGB(e.target.style.backgroundColor);
if (!clr || clr[1] !== clr[2] || clr[1] !== clr[3]) {
return `rgb(255, 255, 255)`;
}
return clr[1] <= 0 ? `rgb(255, 255, 255)` : `rgb(${clr[1]-25}, ${clr[1]-25}, ${clr[1]-25})`;
}
function returnRGB(num) {
return num.match(/rgb\(([0-9]*), ([0-9]*), ([0-9]*)\)/);
}
// Changes the button styling to indicate which mode is the active mode
function activeButton(newMode) {
if (currentMode === 'party') {
partyBtn.classList.remove('active');
} else if (currentMode === 'default') {
defaultBtn.classList.remove('active');
} else if (currentMode === 'gray') {
grayBtn.classList.remove('active');
} else if (currentMode === 'eraser') {
eraserBtn.classList.remove('active');
}
if (newMode === 'party') {
partyBtn.classList.add('active');
} else if (newMode === 'default') {
defaultBtn.classList.add('active');
} else if (newMode === 'gray') {
grayBtn.classList.add('active');
} else if (newMode === 'eraser') {
eraserBtn.classList.add('active');
}
}
// Ensures that, when we load the page, we make the grid and activate the correct mode (default).
window.onload = () => {
makeGrid(defaultSize);
activeButton(defaultMode);
dropdownModeThing(document.getElementById('dropdown-mode').value);
}
// Code for the dropdown menu
function dropdownModeThing(val) {
if (val === 'default') {
setCurrentMode('default');
} else if (val === 'party') {
setCurrentMode('party');
} else if (val === 'shading') {
setCurrentMode('gray');
} else if (val === 'eraser') {
setCurrentMode('eraser');
} else if (val === 'clear') {
reloadGrid();
}
}
body,
html {
min-height: 100vh;
height: 100%;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
margin: 0;
padding: 0;
background-color: white;
overflow-x: hidden;
}
header {
text-align: center;
margin: 0;
border-bottom: 1px solid black;
background-color: #0b478b;
color: white;
padding: 10px;
box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px;
}
p {
margin: 0;
}
h1 {
text-align: center;
margin: 0;
font-size: 2.5rem;
padding: 0;
}
#maincontainer {
background-color: white;
margin: 20px auto 10px auto;
display: grid;
border: 1px solid black;
width: 45vw;
height: 45vw;
min-height: 300px;
min-width: 300px;
box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px;
}
.testing {
padding-top: 100%;
color: hsla(0, 0%, 68%, 0.596);
}
#btncontainer {
padding-top: 20px;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
a {
color: #2aa5a1;
text-decoration: none;
}
a:hover {
color: white;
}
button {
background-color: #2aa5a1;
color: white;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
border: 1px solid black;
margin: 10px 15px;
padding: 8px 10px;
font-size: .9em;
transition: 0.3s;
box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px;
}
button:active {
background-color: #3F86D8;
color: white;
border: 1px solid black;
}
.active {
background-color: #3F86D8;
transition: 0.3s;
color: white;
border: 1px solid black;
}
button:hover {
background-color: #0b478b;
color: white;
border: 1px solid black;
opacity: 1;
}
#rightside {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
text-align: center;
min-height: 500px;
padding: 0;
margin: 0;
}
#sizevalue {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
margin-bottom: 0;
}
input[type=range] {
background-color: white;
height: 28px;
-webkit-appearance: none;
margin: 0;
margin-bottom: 35px;
width: 250px;
padding: 0;
}
input[type=range]:focus {}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 11px;
cursor: pointer;
animate: 0.2s;
box-shadow: 1px 1px 1px #000000;
background: #3F86D8;
border-radius: 13px;
border: 0px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 1px 1px 2px #000031;
border: 1px solid #00001E;
height: 20px;
width: 20px;
border-radius: 15px;
background: #FFFFFF;
cursor: pointer;
-webkit-appearance: none;
margin-top: -5px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #3F86D8;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 11px;
cursor: pointer;
animate: 0.2s;
box-shadow: 1px 1px 1px #000000;
background: #3F86D8;
border-radius: 13px;
border: 0px solid #010101;
}
input[type=range]::-moz-range-thumb {
box-shadow: 1px 1px 2px #000031;
border: 1px solid #00001E;
height: 20px;
width: 20px;
border-radius: 15px;
background: #F3EEED;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 11px;
cursor: pointer;
animate: 0.2s;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #3F86D8;
border: 0px solid #010101;
border-radius: 26px;
box-shadow: 1px 1px 1px #000000;
}
input[type=range]::-ms-fill-upper {
background: #3F86D8;
border: 0px solid #010101;
border-radius: 26px;
box-shadow: 1px 1px 1px #000000;
}
input[type=range]::-ms-thumb {
margin-top: 1px;
box-shadow: 1px 1px 2px #000031;
border: 1px solid #00001E;
height: 20px;
width: 20px;
border-radius: 15px;
background: #F3EEED;
cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
background: #3F86D8;
}
input[type=range]:focus::-ms-fill-upper {
background: #3F86D8;
}
main {
display: flex;
justify-content: center;
margin: 0;
margin-bottom: 20px;
padding: 0;
}
#colorpicker {
-webkit-appearance: none;
border-radius: 100vw;
width: 50px;
height: 50px;
padding: 0;
margin: 0 auto 10px auto;
overflow: hidden;
border: 1px solid black;
box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px;
}
input[type='color']:hover {
transform: scale(1.05);
}
input[type='color']::-webkit-color-swatch-wrapper {
padding: 0;
}
input[type='color']::-webkit-color-swatch {
border: none;
border-radius: 50px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
/* If you want dots under the hoverable text */
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
}
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
right: 100%;
/* To the left of the tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
footer {
color: white;
text-align: center;
background-color: #0b478b;
position: fixed;
bottom: 0;
width: 100%;
margin: 0;
padding-top: 10px;
padding-bottom: 15px;
}
#media (max-width: 500px) {
main {
flex-direction: column;
}
#btncontainer {
margin: 0 auto;
padding: 20px 10px 5px 10px;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
}
#btncontainer button {
margin: 0 3px;
height: 35px;
}
#colorpicker {
-webkit-appearance: none;
border-radius: 100px;
width: 35px;
height: 35px;
padding: 0;
margin: 0 auto 10px auto;
overflow: hidden;
border: 1px solid black;
box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS spreadsheet -->
<link href="styles.css" rel="stylesheet">
<title>Etch-a-Sketch</title>
</head>
<body>
<!-- Note that this is set up in various divs so
that we can use Flex to create our wanted layout. -->
<div id="entirepage">
<header>
<h1>Etch-a-Sketch</h1>
<p title="Testing">Select a color or a different mode, then select your size, and get drawing!</p>
</header>
<main>
<div id="btncontainer">
<select id="dropdown-mode">
<option value="default">Default mode</option>
<option value="party">Party mode</option>
<option value="shading">Shading</option>
<option value="eraser">Eraser mode</option>
<option value="clear">Clear grid</option>
</select>
<input type="color" id="colorpicker" value="#0b478b">
<button id="default">Default mode</button>
<button id="party">Party mode</button>
<button id="grayscale">Shading</button>
<button id="eraser">Eraser mode</button>
<button id="clear">Clear grid</button>
</div>
<div id="rightside">
<div id="maincontainer">
</div>
<label for="sizeslider" id="sizevalue">30 x 30</label>
<input type="range" min="1" max="100" value="30" id="sizeslider">
</div>
</main>
<footer>
<p>Created by Sara Dunlop (RiscloverYT)</p>
</footer>
</div>
<!-- JavaScript script -->
<script src="script.js"></script>
</body>
</html>

Luckily, there's an easy way to do that. Add this piece of code into your javascript file and see the magic.
const dropdown = document.getElementById('dropdown-mode');
dropdown.addEventListener('change', (e) => {
setCurrentMode(e.target.value);
});
Read more about change event here.

JavaScript. How to control background image slide show to synchronize with bubbles

I am trying to create backgroundImage slide show with bubbles. i was working very fine untill i added eventListeners for mouseover and mouseout.
mouseover enent clears the setInterval while the mouseout calls back the setInterval().
The execution is triggered with the setInterval in the window load event.
i dont know if my explained my problem very well
var bubble_Array;
var bubble_i = 0;
var intrval;
var ba;
var bi =0;
var intr;
var man = ['url(imags/ParLour.jpg', 'url(imags/767.jpg', 'url(imags/7series.jpg', 'url(imags/02.jpg', 'url(imags/BedRoom.jpg', 'url(imags/30.jpg', 'url(imags/volks.jpg', 'url(imags/sports.jpg', 'url(imags/real.jpg', 'url(imags/portable.jpg', 'url(imags/perspective.jpg', 'url(imags/green.jpg', 'url(imags/fantom.jpg', 'url(imags/fantom2.jpg', 'url(imags/elegance.jpg', 'url(imags/bridge.jpg', 'url(imags/BMW.jpg', 'url(imags/interior.jpg','url(imags/3Dcar007.jpg'];
function _(x){
return document.getElementById(x);
}
function bubbleMain(bi){
bubble_i++;
if(bubble_i == man.length){
bubble_i = 0;
}
_('bubblebox').style.opacity = 0;
for (var i =0; i < ba.length; i ++){
ba[i].style.background = "rgba(0,0,0,.1)";
}
setTimeout(function(){
_('bubblebox').style.backgroundImage = man[bubble_i];
ba[bi].style.background = "red";
_("bubblebox").style.opacity = 1;
}, 500);
}
function bubbleSlide(){
ba = _('bubbles').children;
_('bubblebox').style.backgroundImage = man[bubble_i];
ba[bi].style.backgroundColor = 'red';
bi++;
if (bi == ba.length){
bi =0;
}
bubbleMain(bi);
}
window.addEventListener("load", function(){
ba = _('bubbles').children;
_('bubblebox').style.backgroundImage = man[bubble_i];
ba[bi].style.backgroundColor = 'red';
intrval = setInterval(bubbleSlide, 2000);
})
window.addEventListener("mouseover", function(){
clearInterval(intrval);
})
window.addEventListener("mouseout", function(){
intrval = setInterval(bubbleSlide, 2000);
})
#bubblebox{
height: 550px;
width: 1200px;
border:2px solid black;
margin: 50px auto;
background-repeat: no-repeat;
z-index: -5;
background-size: cover;
transition:background-image 0.2s;
transition: opacity 0.3s linear 0s;
}
#bubbles{
height: 0px;
width: auto;
text-align: center;
z-index: 100;
position: absolute;
}
#bubbles div{
height: 20px;
width: 20px;
background: rgba(0,0,0,.1);
border: 2px solid green;
border-radius: 100%;
display: inline-block;
position: relative;
margin: 0px auto;
top: 10px;
z-index: 1000;
left: 310px;
color:#fff;
cursor: pointer;
}
#heading{
height: 20px;
width: 200px;
background-color: red;
position: relative;
top: 100px;
left: 500px;
color: #fff;
text-align: center;
}
#arrow_right, #arrow_left, #arrow_middle{
width: 20px;
height: 20px;
transition: .5s;
float: left;
box-shadow: -4px 4px 0 rgb(255, 255, 255);
cursor: pointer;
left: 1100px;
position: relative;
margin: 0 -10px 0 0px;
top: 200px;
border-bottom: 3px solid black;
border-left: 3px solid black;
transform: rotate(225deg);
}
#arrow_right2, #arrow_left2, #arrow_middle2{
width: 20px;
height: 20px;
transition: .5s;
float: left;
box-shadow: -4px 4px 0 rgb(255, 255, 255);
cursor: pointer;
left: 10px;
position: relative;
margin: 0 -10px 0 0px;
top: 200px;
border-bottom: 3px solid black;
border-left: 3px solid black;
transform: rotate(45deg);
tex
}
#arrow_right2:hover, #arrow_left2:hover, #arrow_middle2:hover{
box-shadow: -5px 5px 0 rgb(255, 255, 255);
}
#arrow_right:hover, #arrow_left:hover, #arrow_middle:hover{
box-shadow: -5px 5px 0 rgb(255, 255, 255);
}
<div id="bubblebox">
<div id="bubbles">
<div onclick="bubbleMain(0)">1</div>
<div onclick="bubbleMain(1)">2</div>
<div onclick="bubbleMain(2)">3</div>
<div onclick="bubbleMain(3)">4</div>
<div onclick="bubbleMain(4)">5</div>
<div onclick="bubbleMain(5)">6</div>
<div onclick="bubbleMain(6)">7</div>
<div onclick="bubbleMain(7)">8</div>
<div onclick="bubbleMain(8)">9</div>
<div onclick="bubbleMain(9)">10</div>
<div onclick="bubbleMain(10)">11</div>
<div onclick="bubbleMain(11)">12</div>
<div onclick="bubbleMain(12)">13</div>
<div onclick="bubbleMain(13)">14</div>
<div onclick="bubbleMain(14)">15</div>
<div onclick="bubbleMain(15)">16</div>
<div onclick="bubbleMain(16)">17</div>
<div onclick="bubbleMain(17)">18</div>
<div onclick="bubbleMain(18)">19</div>
<div onclick="bubbleMain(19)">20</div>
</div>
<div id="heading">Caption</div>
<div id="arrow_right"></div>
<div id="arrow_middle"></div>
<div id="arrow_left"></div>
<div id="arrow_right2"></div>
<div id="arrow_middle2"></div>
<div id="arrow_left2"></div>
<div id="bubblecontent"></div>
</div>

Restart Simon Game in javascript

How I can make the game restart from the beginning by clicking start button except reloading the whole page?
The problem occurs because when user clicks Start playGame function is called, but the a previous instance of playGame function is still running. I even thought about to kill a previous instance of function but in JS it can not be implemented except using webworker.terminate().
Here's the code:
document.addEventListener("DOMContentLoaded", function() {
'use strict';
var checkOn = document.querySelector("input[type=checkbox]");
var gameCount = document.getElementsByClassName("innerCount")[0];
var startButton = document.getElementById("innerStart");
var strictButton = document.getElementById("strictButton");
var strictInd = document.getElementById("strictIndicator");
var strictMode = false;
var soundArray = document.getElementsByTagName("audio");
var buttons = document.querySelectorAll(".bigButton");
var buttonArray = [].slice.call(buttons, 0);
checkOn.addEventListener("change", function() {
if (checkOn.checked) {
gameCount.innerHTML = "--";
} else {
gameCount.innerHTML = "";
}
});
strictButton.addEventListener("click", function() {
if (checkOn.checked) {
strictMode = !strictMode;
strictMode ? strictInd.style.backgroundColor = "#FF0000" :
strictInd.style.backgroundColor = "#850000";
}
});
function getRandArray() {
var array = [];
for (var i = 0; i < 22; i++) {
array[i] = Math.floor(Math.random() * 4);
}
return array;
}
startButton.addEventListener("click", function() {
if (checkOn.checked) {
var level = 0;
var randIndexArr = getRandArray();
sleep(700).then(function() {
playGame(randIndexArr, level);
});
}
});
function sleep(time) {
return new Promise(resolve => {
setTimeout(resolve, time)
})
}
function checkButton(randIndexArr, counter) {
var indexButton = 0;
var checker = function checker(e) {
var clickedButtonId = e.target.dataset.sound;
lightenButton(clickedButtonId);
if (+(clickedButtonId) === randIndexArr[indexButton]) {
if (indexButton === counter) {
counter++;
for (let i = 0; i < 4; i++) {
buttonArray[i].removeEventListener("click", checker, false)
}
sleep(2000).then(function() {
playGame(randIndexArr, counter);
});
}
indexButton++;
} else {
gameCount.innerHTML = "--";
if (strictMode) {
indexButton = 0;
counter = 0;
} else {
indexButton = 0;
}
for (let i = 0; i < 4; i++) {
buttonArray[i].removeEventListener("click", checker, false)
}
sleep(2000).then(function() {
playGame(randIndexArr, counter);
});
}
};
for (var i = 0; i < 4; i++) {
buttonArray[i].addEventListener("click", checker, false)
}
}
function playGame(randIndexArr, counter) {
if (counter === 22) {
return;
}
//Show the level of the Game
gameCount.innerHTML = counter + 1;
//Light and play user's input then check if input is correct
randIndexArr.slice(0, counter + 1).reduce(function(promise, div, index) {
return promise.then(function() {
lightenButton(div);
return new Promise(function(resolve, reject) {
setTimeout(function() {
resolve();
}, 1000);
})
})
}, Promise.resolve()).then(function() {
checkButton(randIndexArr, counter);
});
}
function lightenButton(id) {
var lightColorsArr = ["liteGreen", "liteRed", "liteYell", "liteBlue"];
soundArray[id].play();
buttonArray[id].classList.add(lightColorsArr[id]);
sleep(500).then(function() {
buttonArray[id].classList.remove(lightColorsArr[id])
});
}
});
#font-face {
font-family: myDirector;
src: url('https://raw.githubusercontent.com/Y-Taras/FreeCodeCamp/master/Simon/fonts/myDirector-Bold.otf');
}
body {
background-color: #5f5f5f;
}
#outerCircle {
display: flex;
flex-wrap: wrap;
margin: 0 auto;
width: 560px;
border: 2px dotted grey;
position: relative;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.bigButton {
height: 250px;
width: 250px;
border: solid #464646;
transition: all 1s;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: background-color 0.5s ease;
}
#greenButton {
background-color: rgb(9, 174, 37);
border-radius: 100% 0 0 0;
border-width: 20px 10px 10px 20px;
}
.liteGreen#greenButton {
background-color: #86f999;
}
#redButton {
background-color: rgb(174, 9, 15);
border-radius: 0 100% 0 0;
border-width: 20px 20px 10px 10px;
}
.liteRed#redButton {
background-color: #f9868a;
}
#yellowButton {
background-color: rgb(174, 174, 9);
border-radius: 0 0 0 100%;
border-width: 10px 10px 20px 20px;
}
.liteYell#yellowButton {
background-color: #f9f986;
}
#blueButton {
background-color: rgb(9, 37, 174);
border-radius: 0 0 100% 0;
border-width: 10px 20px 20px 10px;
}
.liteBlue#blueButton {
background-color: #8699f9;
}
div#innerCircle {
border: 15px solid #464646;
border-radius: 50%;
position: absolute;
top: 25%;
right: 25%;
background-color: #c4c7ce;
}
div.additionalBorder {
margin: 4px;
border-radius: 50%;
height: 242px;
width: 242px;
overflow: hidden;
}
p#tradeMark {
margin: auto;
height: 104px;
text-align: center;
font-size: 68px;
font-family: myDirector;
color: #c4c7ce;
background-color: black;
border-color: antiquewhite;
line-height: 162px;
}
span#reg {
font-size: 12px;
}
.partition {
height: 6px;
}
.buttons {
height: 128px;
border-radius: 0 0 128px 128px;
border: 2px solid black;
}
/* Start and Strict buttons*/
table {
margin-left: 5px;
}
td {
text-align: center;
width: auto;
padding: 2px 10px;
vertical-align: bottom;
}
div.innerCount {
width: 54px;
height: 40px;
background-color: #34000e;
color: crimson;
border-radius: 11px;
font-size: 28px;
line-height: 42px;
text-align: center;
font-family: 'Segment7Standard', italic;
}
button#innerStart {
width: 27px;
height: 27px;
border: 4px solid #404241;
border-radius: 50%;
background: #a50005;
box-shadow: 0 0 3px gray;
cursor: pointer;
}
div.strict {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
button#strictButton {
width: 27px;
height: 27px;
border: 4px solid #404241;
border-radius: 50%;
background: yellow;
box-shadow: 0 0 3px gray;
cursor: pointer;
}
div#strictIndicator {
width: 6px;
height: 6px;
margin-bottom: 2px;
background-color: #850000;
border-radius: 50%;
border: 1px solid #5f5f5f;
}
#switcher {
display: flex;
justify-content: center;
align-items: center;
}
.labels {
font-family: 'Roboto', sans-serif;
margin: 4px;
}
/* toggle switch */
.checkbox > input[type=checkbox] {
visibility: hidden;
}
.checkbox {
display: inline-block;
position: relative;
width: 60px;
height: 30px;
border: 2px solid #424242;
}
.checkbox > label {
position: absolute;
width: 30px;
height: 26px;
top: 2px;
right: 2px;
background-color: #a50005;
cursor: pointer;
}
.checkbox > input[type=checkbox]:checked + label {
right: 28px;
}
<div id="outerCircle">
<div class="bigButton" id="greenButton" data-sound="0">
<audio src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3"></audio>
</div>
<div class="bigButton" id="redButton" data-sound="1">
<audio src="https://s3.amazonaws.com/freecodecamp/simonSound2.mp3"></audio>
</div>
<div class="bigButton" id="yellowButton" data-sound="2">
<audio src="https://s3.amazonaws.com/freecodecamp/simonSound3.mp3"></audio>
</div>
<div class="bigButton" id="blueButton" data-sound="3">
<audio src="https://s3.amazonaws.com/freecodecamp/simonSound4.mp3"></audio>
</div>
<div id="innerCircle">
<div class="additionalBorder">
<p id="tradeMark">simon<span id="reg">®</span>
</p>
<div class="partition"></div>
<div class="buttons">
<table>
<tr class="firstRow">
<td>
<div class="innerCount"></div>
</td>
<td>
<button type="button" id="innerStart"></button>
</td>
<td>
<div class="strict">
<div id="strictIndicator"></div>
<button type="button" id="strictButton"></button>
</div>
</td>
</tr>
<tr class="labels">
<td>
<div id="countLabel">COUNT</div>
</td>
<td>
<div id="startLabel">START</div>
</td>
<td>
<div id="strictLabel">STRICT</div>
</td>
</tr>
</table>
<div id="switcher">
<span class="labels">ON</span>
<div class="checkbox">
<input id="checkMe" type="checkbox">
<label for="checkMe"></label>
</div>
<span class="labels">OFF</span>
</div>
</div>
</div>
</div>
</div>

I didn't dig super deep into your code, but it looks like the crux of it is you're using setTimeout(), and that timeout may still be running when you restart.
What you need to do is store the return value of setTimeout() which is actually an id you can then pass to clearTimeout(), which will stop that timeout.
So, on your sleep() function, store the id:
function sleep(time) {
return new Promise(resolve => {
this.timeoutId = setTimeout(resolve, time)
});
}
And when you go to restart your game:
// ...
if (this.timeoutId) {
clearTimeout(this.timeoutId);
this.timeoutId = null;
}
//...
And then also just make sure you don't have any other code that will get more than two timeouts running at the same time (or you'll lose one of the ids).

JavaScript error: Uncaught SyntaxError: Invalid or unexpected token on line 1

Encoded code: http://js.do/code/hash717
Decoded code:
<script language="JavaScript">m='<style type="text/css">
#popup{
padding-top:5%;
margin:0 auto 0;
}
#popup_container{
width:485px;
height:auto;
margin:0 auto 0;
padding:10px;
background-color:#4e4e4e;
opacity:0.90;
}
#popup_inner{
width:inherit;
height:inherit;
background-color:#fff;
}
#popup_inner #header{
background-color: rgb(109, 132, 180);
color: rgb(255, 255, 255);
font-size: 15px;
font-weight: 700;
padding: 5px;
text-align: left;
}
#popup_inner #popup_content{
width:inherit;
position:relative;
padding-bottom:5px;
}
#container{
width:inherit;height:auto;margin:0 auto 0;
}
#container #content_wrapper{
box-shadow: 1px 1px 25px 2px rgb(11, 56, 97);
border-top: medium none;
background: none repeat scroll 0% 0% white;
font-size: 15px;
margin: 25px auto;
padding: 25px;
}
#content_wrapper #content{
background-color: #faeaf5;
border: 2px solid rgb(204, 204, 204);
margin:0 auto 0;
height:auto;
padding-top:5px;
text-align:center;
}
.uibutton {
position: relative;
z-index: 1;
overflow: visible;
display: inline-block;
padding: 0.3em 0.6em 0.375em;
border: 1px solid #999;
border-bottom-color: #888;
margin: 0;
text-decoration: none;
text-align: center;
font: bold 11px/normal 'lucida grande', tahoma, verdana, arial, sans-serif;
white-space: nowrap;
cursor: pointer;
/* outline: none; */
color: #333;
background-color: #eee;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f6f6), to(#e4e4e3));
background-image: -moz-linear-gradient(#f5f6f6, #e4e4e3);
background-image: -o-linear-gradient(#f5f6f6, #e4e4e3);
background-image: linear-gradient(#f5f6f6, #e4e4e3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f5f6f6', EndColorStr='#e4e4e3'); /* for IE 6 - 9 */
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff;
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff;
/* IE hacks */
zoom: 1;
*display: inline;
}
.uibutton:hover,
.uibutton:focus,
.uibutton:active {
border-color: #777 #777 #666;
}
.uibutton:active {
border-color: #aaa;
background: #ddd;
filter: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
/* overrides extra padding on button elements in Firefox */
.uibutton::-moz-focus-inner {
padding: 0;
border: 0;
}
/* ............................................................................................................. Icons */
.uibutton.icon:before {
content: "";
position: relative;
top: 1px;
float:left;
width: 10px;
height: 12px;
margin: 0 0.5em 0 0;
background: url(fb-icons.html) 99px 99px no-repeat;
}
.uibutton.edit:before { background-position: 0 0; }
.uibutton.add:before { background-position: -10px 0; }
.uibutton.secure:before { background-position: -20px 0; }
.uibutton.prev:before { background-position: -30px 0; }
.uibutton.next:before { float:right; margin: 0 -0.25em 0 0.5em; background-position: -40px 0; }
/* ------------------------------------------------------------------------------------------------------------- BUTTON EXTENSIONS */
/* ............................................................................................................. Large */
.uibutton.large {
font-size: 2em;
}
/* ............................................................................................................. Submit, etc */
.uibutton.confirm {
border-color: #29447e #29447e #1a356e;
color: #fff;
background-color: #5B74A8;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#637bad), to(#5872a7));
background-image: -moz-linear-gradient(#637bad, #5872a7);
background-image: -o-linear-gradient(#637bad, #5872a7);
background-image: linear-gradient(#637bad, #5872a7);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#637bad', EndColorStr='#5872a7'); /* for IE 6 - 9 */
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;
}
.uibutton.confirm:active {
border-color: #29447E;
background: #4F6AA3;
filter: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
/* popup */
.clear {
clear: both;
font-size: 1px;
height: 1px;
}
.dialog_parent {
position: absolute;top: 150px;z-index: 1000;
}
.corner1 {
background-position: left top;
}
.corner2 {
background-position: right top;
}
.corner3 {
background-position: left bottom;
}
.corner4 {
background-position: right bottom;
}
.corner {
background-image: url("http://2.bp.blogspot.com/-9nVh-xgamvw/Ud1_84PW_XI/AAAAAAAAADU/J7HRRbNvaOA/s1600/Vo3hNjP.gif");
height: 10px;
opacity: 0.7;
width: 10px;
}
.shadow_border1 {
height: 10px;
width: 600px;
}
.shadow_border {
background-color: #4F4F4F;
opacity: 0.7;
}
.dialog_inner {
background-color: #FFFFFF;
border: 1px solid #665665;
}
.dialog_parent .title_bar {
background-color: #6D84B4;
color: #FFFFFF;
font-size: 15px;
font-weight: 700;
padding: 5px;
text-align: left;
}
.dialog_inner .main_div {
border: 1px solid #999999;
padding: 10px;
text-align: center;
}
.dialog_inner .buttons_div {
background-color: #F2F2F2;
border-top: 1px solid #C6C6C6;
padding: 6px 18px;
}
#tbl_div{
border: 0pt none; display: block; height: 100%; left: 0pt; padding: 0px; position: fixed; top: 0pt; width: 100%; z-index: 1001;
}
#tbl_div_bg{
background-color: black; border: 0pt none; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30); height: 100%; left: 0pt; opacity: 0.3; padding: 0px; position: fixed; top: 0pt; width: 100%; z-index: 1001;
}
.FBConnectButton_Simple,
.FBConnectButton_RTL_Simple{background-image:url("http://1.bp.blogspot.com/-vIio-9kUZ1c/Ud2Af00qfhI/AAAAAAAAADc/0dTA-2TdJX8/s1600/connect_favicon0992.png");background-repeat:no-repeat;outline:none;text-decoration:none}
.FBConnectButton_RTL_Simple{background-position:right 0}
.FBConnectButton_Simple .FBConnectButton_Text_Simple{margin:0 0 0 20px;padding-bottom:1px}
.FBConnectButton_RTL_Simple .FBConnectButton_Text_Simple{margin:0 10px 0 0}
a.FBConnectButton_Simple:hover .FBConnectButton_Text_Simple,
a.FBConnectButton_RTL_Simple:hover .FBConnectButton_Text_Simple,
.FBConnectButton_Simple:hover .FBConnectButton_Text_Simple,
.FBConnectButton_RTL_Simple:hover .FBConnectButton_Text_Simple{text-decoration:underline}
.FBConnectButton,
.FBConnectButton_RTL{background:#29447e url("http://3.bp.blogspot.com/-gp5_OiXMIIs/Ud2BI-O6ZvI/AAAAAAAAADk/nu9PdWY1t1c/s1600/connect_spriteb2be.png");background-repeat:no-repeat;cursor:default;display:inline-block;padding:0 0 0 1px;text-decoration:none;outline:none}
.FBConnectButton .FBConnectButton_Text,
.FBConnectButton_RTL .FBConnectButton_Text{background:#5f78ab url("http://3.bp.blogspot.com/-gp5_OiXMIIs/Ud2BI-O6ZvI/AAAAAAAAADk/nu9PdWY1t1c/s1600/connect_spriteb2be.png");border-top:solid 1px #879ac0;border-bottom:solid 1px #1a356e;color:#fff;display:block;font-family:"lucida grande",tahoma,verdana,arial,sans-serif;font-weight:bold;padding:2px 6px 4px;margin:1px 1px 0 0;text-shadow:none}
a.FBConnectButton,
a.FBConnectButton_RTL ,
.FBConnectButton,
.FBConnectButton_RTL{text-decoration:none}
a.FBConnectButton:active .FBConnectButton_Text,
a.FBConnectButton_RTL:active .FBConnectButton_Text ,
.FBConnectButton:active .FBConnectButton_Text,
.FBConnectButton_RTL:active .FBConnectButton_Text{border-bottom:solid 1px #29447e;border-top:solid 1px #45619d;background:#4f6aa3;text-shadow:none}
.FBConnectButton_BigPun,
.FBConnectButton_RTL_BigPun{background-position:left -60px;font-size:24px;line-height:30px}
.FBConnectButton_BigPun .FBConnectButton_Text{padding:3px 8px 3px 12px;margin-left:38px}
a.FBConnectButton_BigPun:active{background-position:left -99px}
.FBConnectButton_RTL_BigPun{background-position:right -268px}
.FBConnectButton_RTL_BigPun .FBConnectButton_Text{padding:3px 8px 3px 12px;margin-right:39px}
a.FBConnectButton_RTL_BigPun:active{background-position:right -307px}
.FBConnectButton_Large,
.FBConnectButton_RTL_Large{background-position:left -138px;font-size:13px;line-height:16px}
.FBConnectButton_Large .FBConnectButton_Text{margin-left:24px}
a.FBConnectButton_Large:active{background-position:left -163px}
.FBConnectButton_RTL_Large{background-position:right -346px}
.FBConnectButton_RTL_Large .FBConnectButton_Text{margin-right:25px}
a.FBConnectButton_RTL_Large:active{background-position:right -371px}
.FBConnectButton_Medium,
.FBConnectButton_RTL_Medium{background-position:left -188px;font-size:11px;line-height:14px}
.FBConnectButton_Text,
.FBConnectButton_Medium .FBConnectButton_Text{padding:2px 6px 3px 6px;margin-left:21px}
a.FBConnectButton_Medium:active{background-position:left -210px}
.FBConnectButton_RTL_Medium{background-position:right -396px}
.FBConnectButton_RTL_Text,
.FBConnectButton_RTL_Medium .FBConnectButton_Text{padding:2px 6px 3px 6px;margin-right:22px}
a.FBConnectButton_RTL_Medium:active{background-position:right -418px}
.FBConnectButton_Small,
.FBConnectButton_RTL_Small{background-position:left -232px;font-size:10px;line-height:10px}
.FBConnectButton_Small .FBConnectButton_Text{padding:2px 6px 3px;margin-left:17px}
a.FBConnectButton_Small:active ,
.FBConnectButton_Small:active{background-position:left -250px}
.FBConnectButton_RTL_Small{background-position:right -440px}
.FBConnectButton_RTL_Small .FBConnectButton_Text{padding:2px 6px;margin-right:18px}
a.FBConnectButton_RTL_Small:active{background-position:right -458px}
.FBConnectButton_Inactive{filter:alpha(opacity = 40);-khtml-opacity:.4;-moz-opacity:.4;opacity:.4}
.fb_share_count_wrapper{position:relative;float:left}
.fb_share_count{background:#b0b9ec none repeat scroll 0 0;color:#333;font-family:"lucida grande",tahoma,verdana,arial,sans-serif;text-align:center}
.fb_share_count_inner{background:#e8ebf2;display:block}
.fb_share_count_right{margin-left:-1px;display:inline-block}
.fb_share_count_right .fb_share_count_inner{border-top:solid 1px #e8ebf2;border-bottom:solid 1px #b0b9ec;margin:1px 1px 0 1px;font-size:10px;line-height:10px;padding:2px 6px 3px;font-weight:bold}
.fb_share_count_top{display:block;letter-spacing:-1px;line-height:34px;margin-bottom:7px;font-size:22px;border:solid 1px #b0b9ec}
.fb_share_count_nub_top{border:none;display:block;position:absolute;left:7px;top:35px;margin:0;padding:0;width:6px;height:7px;background-repeat:no-repeat;background-image:url(../rsrc.php/zCXBS/hash/89zgzk50.html)}
.fb_share_count_nub_right{border:none;display:inline-block;padding:0;width:5px;height:10px;background-repeat:no-repeat;background-image:url(../rsrc.php/zAQB0/hash/1a8txe26.html);vertical-align:top;background-position:right 5px;z-index:10;left:2px;margin:0 2px 0 0;position:relative}
.fb_share_no_count{display:none}
.fb_share_size_Small .fb_share_count_right .fb_share_count_inner{font-size:10px}
.fb_share_size_Medium .fb_share_count_right .fb_share_count_inner{font-size:11px;padding:2px 6px 3px;letter-spacing:-1px;line-height:14px}
.fb_share_size_Large .fb_share_count_right .fb_share_count_inner{font-size:13px;line-height:16px;padding:2px 6px 4px;font-weight:normal;letter-spacing:-1px}
hr{
margin:20px;
border:none;
border-top:1px solid #ff6d00;
border-left:1px solid #ff6d00;
}
</style>
<div id="fb_popup" style="display: none;">
<div id="tbl_div">
<div id="tbl_div_bg">
</div>
</div>
<div style="position: fixed; right: 0; top: 38%; width: 100%; z-index: 10002;">
<center>
<div class="dialog_parent" style="position: inherit; visibility: visible; z-index: 1004;">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="corner corner1"></td>
<td class="shadow_border shadow_border1"></td>
<td class="corner corner2"></td>
</tr>
<tr>
<td class="shadow_border"></td>
<td style="width: 500px;">
<div class="dialog_inner" id="_PopupDiv1">
<div class="title_bar">
</div>
<div style="padding: 10px;">
<div class="main_div">
<table>
<tr>
<center>
<script type="text/javascript">
//<![CDATA[
LSM_Slot({
adkey: '6ce',
ad_size: '300x250',
slot: 'slot70147'
});
//]]>
</script></center>
</tr>
</table>
<div align="center" style="margin: auto; width: 190px;">
<b><span class="FBConnectButton FBConnectButton_Medium" onclick="check = 'true';wopen2('http://www.facebook.com/sharer.php?u= ' window.location.href,'sharer',650,310,'no','no');" style="cursor: pointer;">
<span class="FBConnectButton_Text">PLEASE SHARE THIS!</span>
</span>
</b></div>
<b style="font-size: 11px;">CLICK "CLOSE" AFTER SHARING. </b>
</div>
</div>
<div class="buttons_div"></br>
<iframe src="http://onlinaz.com/banner-header.html" style="border:0px #FFFFFF none;" name="B1" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" height="40px" width="333px"></iframe>
<div style="float: right;">
<input class="uibutton" onclick="closePopup();" type="button" value="Close" />
</div>
<div class="clear">
</div>
</div>
</div>
</td>
<td class="shadow_border"></td>
</tr>
<tr>
<td class="corner corner3"></td>
<td class="shadow_border shadow_border1"></td>
<td class="corner corner4"></td>
</tr>
</tbody></table>
</div>
<!-- close _DialogDiv-->
</center>
</div>
</div>
<!-- close fb popup-->
<script type="text/javascript">
var check = 'false' ;
document.getElementById('fb_popup').style.display = 'block';
function closePopup() {
if ( check == 'true' ) {
//document.getElementById('ads_popup').style.display = 'block';
document.getElementById('fb_popup').style.display = 'none';
}
else {
alert('Please Support Us By Sharing This Content To Access The Site!');
}
}
function wopen2(url, name, w, h, scrolling, resizable)
{
// Fudge factors for window decoration space.
// In my tests these work well on all platforms & browsers.
w = 32;
h = 96;
wleft = (screen.width - w) / 2;
wtop = (screen.height - h) / 2;
// IE5 and other old browsers might allow a window that is
// partially offscreen or wider than the screen. Fix that.
// (Newer browsers fix this for us, but let's be thorough.)
if (wleft < 0) {
w = screen.width;
wleft = 0;
}
if (wtop < 0) {
h = screen.height;
wtop = 0;
}
var win = window.open(url,
name,
'width=' w ', height=' h ', '
'left=' wleft ', top=' wtop ', '
'location=no, menubar=no, '
'status=no, toolbar=no, scrollbars=' scrolling ', resizable=' resizable);
// Just in case width and height are ignored
win.resizeTo(w, h);
// Just in case left and top are ignored
win.moveTo(wleft, wtop);
win.focus();
}
function call_page(url)
{
var xhr_object ;
if(window.XMLHttpRequest) // FIREFOX
xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject) // IE
try { xhr_object = new ActiveXObject('Msxml2.XMLHTTP'); }
catch (e)
{
try { xhr_object = new ActiveXObject('Microsoft.XMLHTTP'); }
catch (e2)
{
try { xhr_object = new XMLHttpRequest(); }
catch (e3) { return "Error!, sorry retry this later!" ; }
}
}
else
return "Error!, sorry retry this later!";
var tmp = "Error!, sorry retry this later!";
//IE
xhr_object.onreadystatechange = function()
{
if(xhr_object.readyState == 4)
{
if(xhr_object.status == 200) {
tmp = xhr_object.responseText;
document.getElementById("message").innerHTML = tmp ;
}
else {
tmp = "Error!, sorry retry this later!" ;
}
} else {
document.getElementById("message").innerHTML = "wait for registering...";
}
};
xhr_object.open("GET", url, true); // false/true (synchrone/asynchrone)
xhr_object.send(null);
return tmp ;
}
</script><script>;d=unescape(m);document.write(d);</script>

It looks like you're trying to set the value of m to multiple lines of text, which you can't do in JavaScript. Instead, you'll need to do it like so:
m='<style type="text/css">' +
'#popup{' +
' padding-top: 5%' +
// and so on
You can do multi-line strings in JavaScript using template literals, but these don't have broad enough support yet for production use.