I'm working on a CSS transition property, and I have a problem when my JavaScript updates the same CSS value.
I made a simple example to understand.
document.addEventListener('DOMContentLoaded', function() {
let container = document.getElementById("container")
let hovercontainer = document.getElementById("hover-container")
let square = document.getElementById("square")
let mouseMove = function (e) {
let el = e.currentTarget;
let delta_x = parseFloat(e.offsetX / el.offsetWidth).toFixed(2)
square.style = "transform: translateX(" + parseInt(delta_x * 400) + "px);"
}
let mouseLeave = function(e) {
square.style = ""
}
hovercontainer.addEventListener("mousemove", mouseMove)
hovercontainer.addEventListener("mouseleave", mouseLeave)
}, false);
html, body, #wrapper {
height: 100%;
margin: 0;
padding: 0;
}
#wrapper {
background: #a4d24b;
display: flex;
}
#container {
width: 600px;
height: 200px;
margin: auto;
box-shadow: 0 2px 4px rgba(34, 25, 25, 0.4);
background: #FFF;
display: flex;
}
#hover-container {
width: 500px;
height: 100px;
margin: auto;
background: #EEE;
border-top: 1px solid #DDD;
border-bottom: 1px solid #CCC;
display: flex;
}
#square {
pointer-events: none;
width: 90px;
height: 90px;
background: #a4d24b;
margin: auto 5px;
box-shadow: 2px 2px 4px rgba(34, 25, 25, 0.4) inset;
transform: translateX(0);
transition: all 3s;
}
#container:hover #square {
transform: translateX(400px);
box-shadow: 0px 2px 4px rgba(34, 25, 25, 0.4) inset;
}
<div id="wrapper"> <!-- background -->
<div id="container"> <!-- white -->
<div id="hover-container"> <!-- gray -->
<div id="square"></div> <!-- square -->
</div>
</div>
</div>
On this code, the transform:translateX() position of #square is updated from 0 to 400px based on the mouse position:
done with CSS: When the mouse enter on the white box, the CSS transform property is updated from 0 (left) to 400 (right) and the transition is done on 3s.
done with JS: When the mouse enter on the gray line, the transform property is updated directly on the tag to "follow the mouse".
Problem: When the mouse enter on the gray line, the cube come nicely (with transition) under the mouse. But when the mouse move (fast), the attribute change everytime and the square didn't move at all (caused by transition property)
Other try I also try by adding transition: all 0s with Javascript to "disable" temporary, but now the square teleport himself when the mouse enter on the gray line.
(same code with update)
document.addEventListener('DOMContentLoaded', function() {
let container = document.getElementById("container")
let hovercontainer = document.getElementById("hover-container")
let square = document.getElementById("square")
let mouseMove = function (e) {
let el = e.currentTarget;
let delta_x = parseFloat(e.offsetX / el.offsetWidth).toFixed(2)
square.style = "transform: translateX(" + parseInt(delta_x * 400) + "px); transition: all 0s;"
}
let mouseLeave = function(e) {
square.style = ""
}
hovercontainer.addEventListener("mousemove", mouseMove)
hovercontainer.addEventListener("mouseleave", mouseLeave)
}, false);
html, body, #wrapper {
height: 100%;
margin: 0;
padding: 0;
}
#wrapper {
background: #a4d24b;
display: flex;
}
#container {
width: 600px;
height: 200px;
margin: auto;
box-shadow: 0 2px 4px rgba(34, 25, 25, 0.4);
background: #FFF;
display: flex;
}
#hover-container {
width: 500px;
height: 100px;
margin: auto;
background: #EEE;
border-top: 1px solid #DDD;
border-bottom: 1px solid #CCC;
display: flex;
}
#square {
pointer-events: none;
width: 90px;
height: 90px;
background: #a4d24b;
margin: auto 5px;
box-shadow: 2px 2px 4px rgba(34, 25, 25, 0.4) inset;
transform: translateX(0);
transition: all 3s;
}
#container:hover #square {
transform: translateX(400px);
box-shadow: 0px 2px 4px rgba(34, 25, 25, 0.4) inset;
}
<div id="wrapper"> <!-- background -->
<div id="container"> <!-- white -->
<div id="hover-container"> <!-- gray -->
<div id="square"></div> <!-- square -->
</div>
</div>
</div>
How can I merge both solution to get a nice and smooth moving square ?
That's really complicated. What I got out of that is that you want to be able to move the mouse around without noticeable change in speed and for it to reach the pointer at about the same time as if the mouse never moved. For that you basically have to listen for the first time the mouse enters the target area and update the destination and the transition delay so that it doesn't reset at 3 seconds. Here's a demo that kind of does what you're asking. It uses javascript to determine what the delay time should be and updates it while updating the target X value. I did have to disable easing on the transition however, for to not look so jerky. Hopefully this helps you understand the problem a bit more and maybe it can be worked into a solution for your needs.
document.addEventListener('DOMContentLoaded', function() {
let container = document.getElementById("container")
let hovercontainer = document.getElementById("hover-container")
let square = document.getElementById("square")
let ts = null
let mouseMove = function (e) {
let el = e.currentTarget;
let delta_x = parseFloat(e.offsetX / el.offsetWidth).toFixed(2)
if(!ts) ts = new Date().getTime() + 3000;
let d = Math.max(0, ts - new Date().getTime()) / 1000 + 's';
square.style.transitionDuration = d;
square.style.transform = "translateX(" + parseInt(delta_x * 400) + "px)";
if(d === '0s') ts = null;
}
let mouseLeave = function(e) {
square.style.transition = null;
square.style.transform = null;
ts = null;
}
hovercontainer.addEventListener("mousemove", mouseMove)
hovercontainer.addEventListener("mouseleave", mouseLeave)
}, false);
html, body, #wrapper {
height: 100%;
margin: 0;
padding: 0;
}
#wrapper {
background: #a4d24b;
display: flex;
}
#container {
width: 600px;
height: 200px;
margin: auto;
box-shadow: 0 2px 4px rgba(34, 25, 25, 0.4);
background: #FFF;
display: flex;
}
#hover-container {
width: 500px;
height: 100px;
margin: auto;
background: #EEE;
border-top: 1px solid #DDD;
border-bottom: 1px solid #CCC;
display: flex;
}
#square {
pointer-events: none;
width: 90px;
height: 90px;
background: #a4d24b;
margin: auto 5px;
box-shadow: 2px 2px 4px rgba(34, 25, 25, 0.4) inset;
transform: translateX(0);
transition: all 3s linear;
}
#container:hover #square {
transform: translateX(400px);
box-shadow: 0px 2px 4px rgba(34, 25, 25, 0.4) inset;
}
<div id="wrapper"> <!-- background -->
<div id="container"> <!-- white -->
<div id="hover-container"> <!-- gray -->
<div id="square"></div> <!-- square -->
</div>
</div>
</div>
Related
I have a toggle switch and everything was working perfectly, but as soon as I deleted and h1 element my switch started acting up. Orginally it would sit perfectly in the center of the slider, but now it is offset and stuck to the top. Once the button is clicked it returns to the position its suppose to be in. As soon as the page is refreshed it goes right back to being offset.
What am I doing wrong?
function SlideRight() {
// Checks to see if the slider is to the left of the div
if (document.getElementById("slider").style.float !== "right") {
// If it is we will float the sliderBtn to the right and change the background of the housing to green
document.getElementById("slider").style.float = "right";
document.getElementById("slideHousing").style.backgroundColor = "#00ff00";
// Toggle dark mode on
document.body.style.backgroundColor = "#595959";
document.getElementById("header").style.color = "#e6e6e6";
document.getElementById("press").style.color = "#e6e6e6";
} else {
// If clicked again the btn will move back to the left side and change the color back to original
document.getElementById("slider").style.float = "left";
document.getElementById("slideHousing").style.backgroundColor = "#f2f2f2";
// Toggle dark mode off
document.body.style.backgroundColor = "#e6e6e6";
document.getElementById("header").style.color = "#000";
document.getElementById("press").style.color = "#000";
}
}
body {
height: 100%;
margin: 0;
padding: 0;
background-color: #e6e6e6;
}
html {
height: 100%;
}
.main {
display: table;
height: 100%;
width: 100%;
border: 1px solid transparent;
}
.container {
display: table-cell;
vertical-align: middle;
border: 1px solid transparent;
}
.slider {
height: 100px;
width: 200px;
border-radius: 50px;
background-color: #f2f2f2;
margin: 0 auto;
border: none;
box-shadow: inset 0 0 7px #000;
}
.slideBtn {
border: 1px solid transparent;
height: 90px;
margin-top: 4px;
margin-left: 5px;
margin-right: 5px;
width: 90px;
border-radius: 50px;
background-color: silver;
box-shadow: 0 0 5px #000;
}
<h1 style="text-align: center;" id="header">Dark Mode</h1>
<div class="main">
<div class="container">
<p style="text-align: center;" id="press">Press button to toggle dark mode.</p>
<div class="slider" id="slideHousing">
<div class="slideBtn" id="slider" onclick="SlideRight()">
</div>
</div>
</div>
</div>
You just need to set the initial value of float for the button.
function SlideRight() {
// Checks to see if the slider is to the left of the div
if (document.getElementById("slider").style.float !== "right") {
// If it is we will float the sliderBtn to the right and change the background of the housing to green
document.getElementById("slider").style.float = "right";
document.getElementById("slideHousing").style.backgroundColor = "#00ff00";
// Toggle dark mode on
document.body.style.backgroundColor = "#595959";
document.getElementById("header").style.color = "#e6e6e6";
document.getElementById("press").style.color = "#e6e6e6";
} else {
// If clicked again the btn will move back to the left side and change the color back to original
document.getElementById("slider").style.float = "left";
document.getElementById("slideHousing").style.backgroundColor = "#f2f2f2";
// Toggle dark mode off
document.body.style.backgroundColor = "#e6e6e6";
document.getElementById("header").style.color = "#000";
document.getElementById("press").style.color = "#000";
}
}
body {
height: 100%;
margin: 0;
padding: 0;
background-color: #e6e6e6;
}
html {
height: 100%;
}
.main {
display: table;
height: 100%;
width: 100%;
border: 1px solid transparent;
}
.container {
display: table-cell;
vertical-align: middle;
border: 1px solid transparent;
}
.slider {
height: 100px;
width: 200px;
border-radius: 50px;
background-color: #f2f2f2;
margin: 0 auto;
border: none;
box-shadow: inset 0 0 7px #000;
}
.slideBtn {
float:left;
border: 1px solid transparent;
height: 90px;
margin-top: 4px;
margin-left: 5px;
margin-right: 5px;
width: 90px;
border-radius: 50px;
background-color: silver;
box-shadow: 0 0 5px #000;
}
<h1 style="text-align: center;" id="header">Dark Mode</h1>
<div class="main">
<div class="container">
<p style="text-align: center;" id="press">Press button to toggle dark mode.</p>
<div class="slider" id="slideHousing">
<div class="slideBtn" id="slider" onclick="SlideRight()">
</div>
</div>
</div>
</div>
I've a problem with a custom cursor created with an absolute div, with my test I realized that the custom div is directly positioned under the default cursor, then if I go hover a link I can't process my JS "mouseenter" because the default cursor is always hover only to the custom cursor... there is a way to fix it?
<div class="custom-cursor"></div>
Scss:
.custom-cursor {
width: 20px;
height: 20px;
border: 2px solid orange;
position: absolute;
z-index: 1080;
border-radius: 50%;
transition-duration: 100ms;
transition-timing-function: ease-out;
box-shadow: 0 0 0 2px black;
&.hover {
width: 40px;
height: 40px;
background: rgba(#FFCC00,.5);
}
}
Vanilla JS:
const cursor = document.querySelector('.custom-cursor');
// Custom cursor follow the default cursor
document.addEventListener('mousemove', e => {
cursor.setAttribute('style', 'top: '+(e.pageY - 10)+'px; left: ' +(e.pageX - 10)+'px;')
});
const links = document.querySelectorAll('a');
// Custom cursor change style on hover links
for(let x of links) {
x.addEventListener('mousenter', () => {
cursor.classList.add('hover');
});
x.addEventListener('mouseleave', () => {
cursor.classList.remove('hover');
});
});
You can enable clicking through elements by adding pointer-events: none; to your CSS
.custom-cursor {
pointer-events: none; /*don't interact with this div*/
width: 20px;
height: 20px;
border: 2px solid orange;
position: absolute;
z-index: 1080;
border-radius: 50%;
transition-duration: 100ms;
transition-timing-function: ease-out;
box-shadow: 0 0 0 2px black;
&.hover {
width: 40px;
height: 40px;
background: rgba(#FFCC00,.5);
}
}
You can use pointer-events: none; for the cursor-div - so that the hover event goes through. (you also forgot an e in "mouseenter"
Working example:
const cursor = document.querySelector('.custom-cursor');
// Custom cursor follow the default cursor
document.addEventListener('mousemove', e => {
cursor.setAttribute('style', 'top: '+(e.pageY - 10)+'px; left: ' +(e.pageX - 10)+'px;')
});
const links = document.querySelectorAll('a');
// Custom cursor change style on hover links
for(let x of links) {
x.addEventListener('mouseenter', () => {
cursor.classList.add('hover');
});
x.addEventListener('mouseleave', () => {
cursor.classList.remove('hover');
});
}
.custom-cursor {
width: 20px;
height: 20px;
border: 2px solid orange;
position: absolute;
border-radius: 50%;
transition-duration: 100ms;
transition-timing-function: ease-out;
box-shadow: 0 0 0 2px black;
pointer-events: none;
}
.custom-cursor.hover {
width: 40px;
height: 40px;
background: rgba(#FFCC00,.5);
}
<div class="custom-cursor"></div>
troet
quak
miau
I programmed an HTML editor, but it isn’t working. It was working a little time ago, but probably my sister edited the code (she practically knows nothing of HTML)
Now the problem is that whenever I press the enter key, instead of simply moving to the next line, a rectangle is created. Why?
Here is the code:
const first = document.querySelector(".first");
const iframe = document.querySelector("iframe");
const btn = document.querySelector("button");
btn.addEventListener("click", () => {
var html = first.textContent;
iframe.src = "data:text/html;charset=utf-8," + encodeURI(html);
});
first.addEventListener('keyup',()=>{
var html = first.textContent;
iframe.src = "data:text/html;charset=utf-8," + encodeURI(html);
})
first.addEventListener("paste", function(e) {
e.preventDefault();
var text = e.clipboardData.getData("text/plain");
document.execCommand("insertText", false, text);
});
* {
box-shadow: 0 2px 3px black;
position: fixed;
height: 100vh;
justify-content: center;
align-items: center;
border: 7px solid #36383f;
}
.first {
background-color: #ffffff;
width: 50%;
overflow-x: hidden;
overflow-y: auto;
white-space: pre;
box-shadow: 0 1px 1px rgb(22, 22, 22);
outline: none;
padding: 0.4rem;
height: 90vh;
}
.second {
background-color: rgb(255, 255, 255);
width: 50%;
overflow-y: auto;
white-space: pre;
right: 0;
box-shadow: 0 1px 1px rgb(22, 22, 22);
padding: 0.4rem;
height: 90vh;
}
<div class="main-editor">
<button class="btn">Run</button>
<div class="first" contenteditable>writecode</div>
<iframe class="second" > </iframe>
</div>
It is because you added box-shadow and border to all elements.
Remove them from *.
I changed * to .first, .second
const first = document.querySelector(".first");
const iframe = document.querySelector("iframe");
const btn = document.querySelector("button");
btn.addEventListener("click", () => {
var html = first.textContent;
iframe.src = "data:text/html;charset=utf-8," + encodeURI(html);
});
first.addEventListener('keyup',()=>{
var html = first.textContent;
iframe.src = "data:text/html;charset=utf-8," + encodeURI(html);
})
first.addEventListener("paste", function(e) {
e.preventDefault();
var text = e.clipboardData.getData("text/plain");
document.execCommand("insertText", false, text);
});
.first, .second {
box-shadow: 0 2px 3px black;
position: fixed;
justify-content: center;
align-items: center;
border: 7px solid #36383f;
}
.first {
background-color: #ffffff;
width: 50%;
overflow-x: hidden;
overflow-y: auto;
white-space: pre;
box-shadow: 0 1px 1px rgb(22, 22, 22);
outline: none;
padding: 0.4rem;
height: 90vh;
}
.second {
background-color: rgb(255, 255, 255);
width: 50%;
overflow-y: auto;
white-space: pre;
right: 0;
box-shadow: 0 1px 1px rgb(22, 22, 22);
padding: 0.4rem;
height: 90vh;
}
<div class="main-editor">
<button class="btn">Run</button>
<div class="first" contenteditable>writecode</div>
<iframe class="second" > </iframe>
</div>
I'm trying to remake hover like on this website:
https://www.samsaraubud.com/
When you hover over a button (and only button. I don't want circle over whole website), a circle appers around cursor. I tried so many solutions from codepen after typing "mouse follow" but nothing works.
I have button like this:
https://codepen.io/Aventadorrre/pen/mdyPJbv
body {
padding: 100px;
margin: auto;
}
a {
color: red;
border: 2px solid red;
padding: 20px 50px;
}
Button
and how to make circle around mouse (following mouse) when i hover button?
Consider a radial-gradient as background that you make fixed then simply adjust the position based on the cursor
var h =document.querySelector('.cursor');
document.body.onmousemove = function(e) {
/* 15 = background-size/2 */
h.style.setProperty('background-position',(e.clientX - 15)+'px '+(e.clientY - 15)+'px');
}
body {
padding: 100px 0;
}
a.cursor {
color: red;
border: 2px solid red;
padding: 20px 50px;
background:
radial-gradient(farthest-side,
transparent calc(100% - 3px),
red calc(100% - 2px) calc(100% - 1px),
transparent 100%)
fixed /* Fixed to the screen*/
no-repeat; /* Don't repeat*/
background-size:30px 30px; /* Control the size of the circle */
}
<a class="cursor" href="#">Button</a>
If you want the circle above the text consider pseudo element and the same trick:
var h =document.querySelector('.cursor');
document.body.onmousemove = function(e) {
h.style.setProperty('background-position',(e.clientX - 15)+'px '+(e.clientY - 15)+'px');
}
body {
padding: 100px 0;
}
a.cursor {
color: red;
border: 2px solid red;
padding: 20px 50px;
background-size:0 0;
position:relative;
}
a.cursor::after {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:
radial-gradient(farthest-side,
blue calc(100% - 1px),
transparent 100%)
fixed /* Fixed to the screen*/
no-repeat; /* Don't repeat*/
background-size:30px 30px;
background-position:inherit;
}
<a class="cursor" href="#">Button</a>
Updated
It shows full circle even on the boundaries of the button
const btn = document.querySelector(".button")
const circle = document.querySelector(".circle")
btn.onmouseenter = function() {
circle.classList.add("in")
}
btn.onmousemove = function(e) {
const {
top,
left,
width,
height
} = btn.getBoundingClientRect()
const {
clientY,
clientX
} = e
if (clientX < left || clientY < top || clientX > left + width || clientY > top + height) {
circle.classList.remove("in")
}
circle.style.top = `${clientY - top}px`
circle.style.left = `${clientX - left}px`
};
body {
margin: 20px;
padding: 20px;
}
.button {
padding: 40px 80px;
border: 1px solid grey;
color: blue;
display: inline-block;
position: relative;
}
.circle {
position: absolute;
display: none;
width: 30px;
height: 30px;
border-radius: 50%;
top: 0;
left: 0;
transform: translate(-50%, -50%);
border: 2px solid red;
}
.circle.in {
display: block;
}
<a class="button">
Button
<span class="circle"></span>
</a>
old answer
The answer is extension of the answer by #Temani Afif.
The listener for mousemove is added on the button itself instead of the body, which would result in performance improvement since the cb is only called when you are hovering over the button.
var h = document.querySelector(".cursor");
h.onmousemove = function(e) {
/* 15 = background-size/2 */
h.style.setProperty(
"background-position",
e.clientX - 15 + "px " + (e.clientY - 15) + "px"
);
};
body {
padding: 100px 0;
}
a.cursor {
color: red;
border: 2px solid red;
padding: 20px 50px;
background: radial-gradient( farthest-side, transparent calc(100% - 3px), red calc(100% - 2px) calc(100% - 1px), transparent 100%) fixed/* Fixed to the screen*/
no-repeat;
/* Don't repeat*/
background-size: 0px 0px;
/* by default, circle is of 0px */
}
a.cursor:hover {
background-size: 30px 30px;
/* Control the size of the circle */
}
<a class="cursor" href="#">Button</a>
You can do that with mousemove event. Catch the event and set the location of cirlce while the mouse moves.
window.addEventListener('mousemove', function(e){
document.getElementById("circle").style.display = "block";
document.getElementById("circle").style.left = e.offsetX + "px";
document.getElementById("circle").style.top = e.offsetY + "px";
});
body {
padding: 100px;
margin: auto;
}
a {
color: red;
border: 2px solid red;
padding: 20px 50px;
}
#circle{
width: 30px;
height: 30px;
border: 1px solid red;
border-radius: 50%;
position: fixed;
display: none;
}
Button
<span id="circle"></span>
I have problem with my algorithm in simple game.
Game Rules:
Match color NAME (choose one on the bottom) with COLOR of TEXT (on the top).
If none of the two bottom names match than click NEXT.
So the problem is that first correct match gives in console "GOOD" but second , third and any after, even if there is correct match in console I have firstly always "WRONG" and just after that I have "GOOD".
This is a picture with the problem described
It seems like the script remember past random numbers and match current result with them, because after few matches the score pointer raise very quickly (ex. 20 points in one time).
I will be happy to hear from you how can I fix this.
Thank you for any help !
Here you have link to codepen:
http://codepen.io/anon/pen/bWGGga
"use strict"
/*Start Container*/
/* var startContainer = document.getElementById("start_container");
var letsPlay = document.getElementById("start_game"); */
/* letsPlay.addEventListener("click", openTheGame); */
function openTheGame(){
setInterval(startGame, 3000);
};
openTheGame();
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
var showColor = document.getElementById("show_color");
//SCORE
var score = document.getElementById("score");
var gameContainer = document.getElementById("game_container");
var gameOverContainer = document.getElementById("game_over_container");
/*Array of Colors*/
var arrCol = ["GREEN", "RED", "YELLOW", "BLUE", "ORANGE", "PURPLE"]
//Array from buttons texts to draw Show Color
var arrShowColor = [];
function startGame(){
/*BUTTONS TEXT & COLOR*/
btn1.addEventListener("click", matchColor1);
btn2.addEventListener("click", matchColor2);
btn3.addEventListener("click", matchColor3);
//draw numbers for buttons texts & colors
var randomBtn1Num = Math.floor(Math.random() * 3);
var randomBtn2Num = Math.floor(Math.random() * 3)+3;
var randomBtn3Num = Math.floor(Math.random() * 6);
//Buttons text (next button always "next")
btn1.innerHTML = arrCol[randomBtn1Num];
btn2.innerHTML = arrCol[randomBtn2Num];
//Buttons Color from random_color class
btn1.className = "random_color" + randomBtn2Num;
btn2.className = "random_color" + randomBtn3Num;
btn3.className = "random_color" + randomBtn1Num;
/*SHOW TEXT & COLOR*/
//Array from buttons texts to draw Show Color
arrShowColor[0] = randomBtn1Num;
arrShowColor[1] = randomBtn2Num;
arrShowColor[2] = randomBtn3Num;
console.log(arrShowColor);
//Show color
var randomShowColorNum = Math.floor(Math.random()*3);
var randomShowColor = arrShowColor[randomShowColorNum];
showColor.className = "random_color" + randomShowColor;
console.log(randomShowColor);
//Show text
var randomShowText = Math.floor(Math.random() * 6);
showColor.innerHTML = arrCol[randomShowText];
/*CLICK BUTTON - IF MATCH COLORS*/
function matchColor1(){
if( randomBtn1Num == randomShowColor) {
console.log("GOOD");
score.innerHTML ++;
} else {
console.log("WRONG");
/*gameContainer.style.display = "none";
gameOverContainer.style.display = "inline-block";*/
}
};
function matchColor2(){
if( randomBtn2Num == randomShowColor) {
console.log("GOOD");
score.innerHTML ++;
} else {
console.log("WRONG");
/*gameContainer.style.display = "none";
gameOverContainer.style.display = "inline-block";*/
}
};
function matchColor3(){
if(randomBtn1Num != randomShowColor && randomBtn2Num != randomShowColor){
console.log("GOOD");
score.innerHTML ++;
} else {
console.log("WRONG");
/*gameContainer.style.display = "none";
gameOverContainer.style.display = "inline-block";*/
}
};
/*Finish startGame*/
};
/*Main Styles*/
body {
background-image: url()
}
h4 {
color: #2626e6;
}
/*Main Container Styles*/
#main_container {
width:100%;
text-align:center;
}
/*Start Container Styles*/
#start_container {
position: relative;
display: inline-block;
width: 400px;
height: 400px;
top: 20px;
background-color: rgb(0, 0, 0);
border-radius: 50%;
box-shadow: 0px 0px 10px 10px black;
}
#start_container button {
}
/*Game Container Styles*/
#game_container {
position: relative;
display: inline-block;
width: 400px;
height: 400px;
top: 20px;
background-color: rgb(0, 0, 0);
border-radius: 50%;
box-shadow: 0px 0px 10px 10px black;
}
.second_level{
transform: rotateY(180deg);
}
.third_level{
transform: rotateX(180deg);
}
/*Score Container*/
#score_container {
display: inline-block;
position: relative;
height: 150px;
width: 150px;
background-color: rgb(0, 0, 0);
top: -40px;
margin-left: -5px;
margin-right: 30px;
border-radius: 50%;
box-shadow: 0px 0px 10px 10px black;
}
#score_container #score {
display: inline-block;
height: 30px;
width: 80px;
color: #ffffff;
margin-left: 0;
margin-right: 0;
}
/*Level Container*/
#time_container {
display: inline-block;
position: relative;
height: 150px;
width: 150px;
background-color: rgb(0, 0, 0);
top: -40px;
margin-left: 30px;
border-radius: 50%;
box-shadow: 0px 0px 10px 10px black;
}
#time_container #time {
display: inline-block;
height: 30px;
width: 80px;
color: #ffffff;
margin-left: 0;
margin-right: 0;
}
/*Random Show Color Style*/
#show_color{
margin-top: 50px;
font-size: 40px;
font-family: sans-serif;
font-weight: 800;
}
/*Random Colors Classes*/
.random_color0{
color: green;
}
.random_color1{
color: red;
}
.random_color2{
color: yellow;
}
.random_color3{
color: blue;
}
.random_color4{
color: orange;
}
.random_color5{
color: purple;
}
/*Buttons Container Styles*/
#game_container #buttons_container {
position: relative;
display: inline-block;
margin:0 auto;
margin-top: 120px;
border-top: 1px solid white;
padding-top: 30px;
}
/*Buttons Style*/
#buttons_container button {
height: 40px;
width: 150px;
font-size: 30px;
font-weight: 800;
border: none;
border-radius: 3px;
background-color: rgb(0, 0, 0);
margin: 3px;
}
#buttons_container button:focus{
outline: 0;
}
#buttons_container button:hover{
cursor: pointer;
}
/*Game Over Container*/
#game_over_container {
display: none;
position: relative;
width: 400px;
height: 400px;
top: 20px;
background-color: rgb(0, 0, 0);
border-radius: 50%;
box-shadow: 0px 0px 10px 10px black;
}
<div id="main_container">
<!-- <div id="start_container">
<button id="start_game">PLAY GAME</button>
</div> -->
<div id="score_container">
<h4>SCORE:</h4>
<div id="score">0</div>
</div>
<div id="game_container">
<div id="show_color_container">
<div id="show_color"></div>
</div>
<div id="buttons_container">
<button class="btn_select" id="btn1">ONE</button>
<button class="btn_select" id="btn2">TWO</button>
<button class="btn_select" id="btn3">NEXT</button>
</div>
</div>
<div id="game_over_container">
<h2 id="game_over">GAME OVER</h2>
</div>
</div>
Inside openTheGame() you're using setInterval which calls startGame() every 3 seconds, which in turn creates (adds) new event handlers every 3 seconds, which call your console.logs etc. Replace setInterval with setTimeout:
function openTheGame(){
setTimeout(startGame, 3000);
};
openTheGame();
EDIT: did not thoroughly check your code, but if you need that function called every 3 seconds, then you need to move the setup of click handlers outside that function.