We Keep Coding

Trouble with refering to a variable in mouseover event

I want to make an event where .gridss change colors with mouseover event. Problem is gridss comes out as not definied,and if i try to move the mouseover event into the the gridss function it also does not work. So how can I successfully refer to .gridds?
My question is pretty simple yet i cant seem to get it right,so thanks in advance.
const container = document.querySelector('#container');
$(document).ready(function() {
for(var x = 0; x < 16; x++) {
for(var y = 0; y < 16; y++) {
let gridss = $("<div class='gridss'></div>");
gridss.appendTo('#container');
}
}
});
gridss.addEventListener("mouseover", function( event ){
event.target.style.color = "purple";
setTimeout(function(){
event.target.style.color = "";
}, 10);
}, false);

Use jQuery for events if you are using jQuery. I assume that you are not aware of mouseout or mouseleave because it looks like you are using setTimeout() to trigger a delay of text color reverting back to original color. I used mouseenter and mouseleave which are similar to mouseover and mouseout events.
You had an error which that gridss wasn't defined. The reason why moving in and out of functions didn't work is because you defined gridss with let.
let is limited scope to that of the block
var scope is the function which works as long as you have gridss in the function.
Demo
const container = document.querySelector('#container');
$(document).ready(function() {
for (let y = 0; y < 32; y++) {
var gridss = $("<div class='gridss'>TEST</div>");
gridss.appendTo('#container');
}
$('.gridss').on('mouseenter mouseleave', function(e) {
if (e.type === 'mouseenter') {
this.style.color = "purple";
} else {
this.style.color = "white";
}
});
});
#container {
border: 5px solid blue
}
.gridss {
border: 3px solid red;
height: 20px;
margin: 10px 5px;
text-align: center;
background: cyan;
font-weight: 900;
color: white;
transition: color .5s ease
}
<div id='container'></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Unexpected NaN value when parsing the attribute on after content + z-index

I have a really weird issue, here it is :
i wanted to create a perspective shadow like this topic (::after instead in my case) How to create a perspective shadow with CSS?
div {
position: relative;
display: inline-block;
height: 150px;
width: 150px;
background: url(//placehold.it/150x150);
margin-left: 30px;
}
div::before {
content: "";
position: absolute;
z-index: -1;
bottom: 0;
left: 15px;
height: 10%;
width: 70%;
box-shadow: -25px -4px 4px 0 rgba(0,0,0,0.75);
transform: skewX(60deg);
}
and then when i load my webpage and then i click on "inspect element" from firefox and click on something in the code, i've got this issue "Unexpected NaN value when parsing the attribute", i searched on forum and people said that it may be a Qjery problem but when i delete this ::after everything is good.
here is my Javascript file:
function styleTabHover(tabButton){
tabButton.style.color= "#ff9900";
}
function styleTabOut(tabButton){
tabButton.style.color= "white";
tabButton.style.borderColor= "white";
}
function check_email(ev){
var champ = ev.currentTarget;
if(!champ.value.includes("#")){
champ.style.outline = "2px dotted red";
document.getElementById("champ_requis").style.opacity = "1";
}else{
champ.style.outline = "none";
document.getElementById("champ_requis").style.opacity = "0";
}
}
function changeTab(idbouton){
var tabs = document.getElementsByClassName("menu_bouton");
console.log(tabs,"changetab fonction lancé")
var i;
for (i=0;i<tabs.length;i++){
tabs[i].style.backgroundColor = "initial";
tabs[i].style.zIndex = "0";
tabs[i].onmouseover = function(){styleTabHover(this)};
tabs[i].onmouseout = function(){styleTabOut(this)};
}
var bouton = document.getElementById(idbouton);
bouton.style.background = "#ff9900";
bouton.style.color = "white";
bouton.onmouseover= function(){this.style.cursor = "default"};
}
var imgPositionMoins = 0;
function style_projet_slide(droite){
var lst_projetImg = document.getElementsByClassName("projets_img");
var i;
if(droite && (imgPositionMoins > (-100*(lst_projetImg.length-1)) ) ){
imgPositionMoins -= 100;
for(i=0;i<lst_projetImg.length;i++){
lst_projetImg[i].style.left = imgPositionMoins+"%";
}
}else if ( !droite && imgPositionMoins < 0){
imgPositionMoins += 100;
for(i=lst_projetImg.length-1; i>=0; i--){
lst_projetImg[i].style.left = imgPositionMoins+"%";
}
}
}
function projet_desc(indice){
var lst_desc=document.getElementById("projet_desc").children;
var i;
for (i=0;i<lst_desc.length;i++){
if (i==indice){
lst_desc[i].style.display = "block";
} else{
lst_desc[i].style.display = "none";
}
}
window.scroll({
top: 800,
left: 0,
behavior: 'smooth'
});
}
another problem i get, when i use z-index -1 when i load the webpage, i see the ::before content during 1 second which is supposed to be behind the main content. So, i tried to use a positive z-index as people said but it doesnt work when i put a higher z-index on the main content. I saw that i have to put position:relative but on the official doc. it shows that we can do an absolute position.
Can someone help me ? Thanks !

how to click any element and target will switch to it

here is what i try to code
i want my mouse click on any element on page and target will boxshadow ,
and after i click the element i can click another element and the previus element will lost its boxshadow and i am using code like this
document.onclick = function(evt){
console.log('clicked');
var target = null,
target = evt.target;
var obj = document.querySelector(target);
obj.style.boxShadow = '3px 10px 100px yellow';
if(target === 'null'){
console.log('ye');
obj.style.boxShadow = '0';
obj = document.querySelector(target)
console.log(obj)}
return target}

Add element selector once you have applied css and select those elements using provided selector.
Remove applied css by selecting applied attribute.
document.onclick = function(evt) {
var target = evt.target;
var pastElems = document.querySelectorAll('.shadowed');
[].forEach.call(pastElems, function(el) {
el.style.boxShadow = 'none';
target.classList.remove('shadowed');
})
target.style.boxShadow = '3px 10px 100px yellow';
target.classList.add('shadowed');
}
.elem {
width: 100px;
height: 100px;
border: 1px solid black;
float: left;
}
<div class='elem'></div>
<div class='elem'></div>
<div class='elem'></div>
<div class='elem'></div>

It's easier to change styling by adding/removing classes.
If you use an object, it will allow you to keep track of what element currently has the shadow and remove the class from it.
var setBoxShadow = {
target: null,
clearShadow: function() {
if (this.target != null && this.target != undefined) {
this.target.classList.remove("highlight");
}
},
addShadow: function(newTarget) {
this.target = newTarget;
this.target.classList.add("highlight");
},
}
body.onclick = function(evt) {
setBoxShadow.clearShadow();
setBoxShadow.addShadow(evt.target);
}
And the CSS:
.highlight {
box-shadow: 3px 10px 100px yellow;
}

Toggle Individual Functions When an Event is Clicked - Javascript

I'd like to call a function that toggles on a node list of elements with the same class. I basically need to add the function within the if else statement, but the different variants of this seem to throw an error. When I put the code that is inside the two functions directly into the if else statement it works, but I want to do it with functions because this is a simplified version of what will be more complex style changes.
Codepen is here:https://codepen.io/emilychews/pen/GEEpqW?editors=1111
Code is below:
JS
var $mainMenuButton = document.getElementsByClassName('desktopmenubutton');
function newColor() {
e.currentTarget.style.background = "black";
}
function originalColor() {
e.currentTarget.style.background = "red";
}
for (h = 0; h < $mainMenuButton.length; h +=1) {
$mainMenuButton[h].addEventListener('click', function(e) {
if (e.currentTarget.style.backgroundColor === "red") {
newColor();
} else {
originalColor();
}
});
}
CSS
* {font-family: arial;}
.desktopmenubutton {
width: 150px;
height: 100px;
background-color: red;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
color: white
}
.button2 {
left: 300px;
}
HTML
<div class="desktopmenubutton button1">Button 1</div>
<div class="desktopmenubutton button2">Button 2</div>

Pass the element in the function that is inside the if statement.
var $mainMenuButton = document.getElementsByClassName('desktopmenubutton button1');
function newColor(element) {
element.currentTarget.style.backgroundColor = "black";
}
function originalColor(element) {
element.currentTarget.style.backgroundColor = "red";
}
for (h = 0; h < $mainMenuButton.length; h +=1) {
$mainMenuButton[h].addEventListener('click', function(e) {
if (e.currentTarget.style.backgroundColor === "red") {
newColor(e);
} else {
originalColor(e);
}
});
}

You forget to receive the event as a parameter on newColor and originalColor.
var $mainMenuButton =
document.getElementsByClassName('desktopmenubutton');
function newColor(e) {
e.currentTarget.style.background = "black";
}
function originalColor(e) {
e.currentTarget.style.background = "red";
}
for (h = 0; h < $mainMenuButton.length; h +=1) {
$mainMenuButton[h].addEventListener('click', function(e) {
if (e.currentTarget.style.backgroundColor === "red") {
newColor(e);
} else {
originalColor(e);
}
});
}
This should work.

You are not passing e(event) argument
Also note that Element.style.* reads inline css styles, not those styles which are assigned in CSS file/tag.
You could set red color initially in loop so that it could be accessed using Element.style.* property.
var $mainMenuButton = document.getElementsByClassName('desktopmenubutton');
function newColor(e) {
e.currentTarget.style.background = "black";
}
function originalColor(e) {
e.currentTarget.style.background = "red";
}
for (h = 0; h < $mainMenuButton.length; h += 1) {
$mainMenuButton[h].style.background = 'red';
$mainMenuButton[h].addEventListener('click', function(e) {
if (e.currentTarget.style.background == 'red') {
newColor(e);
} else {
originalColor(e);
}
});
}
* {
font-family: arial;
}
.desktopmenubutton {
width: 150px;
height: 100px;
background-color: red;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
color: white
}
.button2 {
left: 300px;
}
<div class="desktopmenubutton button1">Button 1</div>
<div class="desktopmenubutton button2">Button 2</div>

How to Create A Toggle with a Var to change state in Vanilla JS

I would like to add a simple click toggle with vanilla JS, but I seem to have hit a wall. I've create a variable to change the state of the function after clicking, but it doesn't seem to work. I'm starting to pull my hair out a bit now.
There is a pen here to show the problem: https://codepen.io/emilychews/pen/dWByjx
The code is here for quick reference:
HTML
<div class="box">Click Me</div>
CSS
.box {
font-family: arial;
letter-spacing: 1px;
display: flex;
justify-content: center;
align-items: center;
height: 200px;
width: 200px;
background-color: blue;
color: white;
}
JS
var box = document.querySelectorAll('.box')[0];
var isBlue = true;
if (isBlue === true) {
box.onclick = function() {
box.style.background = 'red';
isBlue = false;
}
} else {
box.onclick = function() {
box.style.background = 'blue';
isBlue = true;
}
}
Any help ideas would be wonderful.
Emily

Your test if (isBlue) is evaluated only once, at the beginning, and installs the onclick listener that changes color from blue to red. From then on, that same listener will always be executed, and set the color to red.
Instead, put your if/else logic inside the function:
var box = document.querySelectorAll('.box')[0];
var isBlue = true;
box.onclick = function() {
if (isBlue) {
box.style.background = 'red';
isBlue = false;
}
else {
box.style.background = 'blue';
isBlue = true;
}
}