We Keep Coding

How can I control CSS with a button in JS

I Can not find the right code for the JS to control CSS. Upon opening link I need the "transform" to be off , and then turn on and toggle back and forth "transform" with the button. It started as an on/off mute button needing no css , so my paths ?
The buttons ( play/pause/etc)are in a div . Their function are in JS and all work, except, I need this one to reach into CSS but can't find my brain. A delete of the CSS and it opens and runs everything else and runs the way I would like. Thanks.
<button onclick="transform()">mirror</button>
#myplayer {
transform: rotateY(180deg);
}
var player = document.getElementById("myplayer");
function transform() {
if (player.transform)
player.transform = false
else
player.transform = true
}

Get the button element, add a click event handler to it, within the handler once the button is clicked, grab the video element then use .classList.toggle('class-name') to toggle a class.
document.getElementById("transformPlayer").addEventListener("click", function() {
document.getElementById("player").classList.toggle('transform180')
});
.transform180 {
transform: rotateY(180deg);
}
<button id="transformPlayer">mirror</button>
<video id="player" controls width="250">
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"
type="video/webm">
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
type="video/mp4">
</video>

change this
function transform() {
if (player.transform)
player.transform = false
else
player.transform = true
}
To this
function transform() {
if (player.style.transform){
player.style.transform = "";
}
else{
player.style.transform="rotate(180deg)";
}
}

Use a class
const player = document.querySelector('#myplayer')
const button = document.querySelector('button')
button.addEventListener('click', () => {
player.classList.toggle('rotate')
})
#myplayer {
background: red;
height: 100px;
width: 100px;
color: white;
}
#myplayer.rotate {
transform: rotateY(180deg);
}
<button>mirror</button>
<div id="myplayer">:)</div>

How to run a function for a div every time the span is clicked?

When the "xbutton" is clicked, I want the div to transition so that it rotates, gets smaller and changes opacity to be hidden (and also to set the display of the elemnts inside to none). This works as it should the first time that the "xbutton" is clicked, but on the others, it does not rotate. There is somthing wrong with my JS.
CSS:
#addPopUp {
opacity:1;
position:absolute;
width:50px;
height:50px;
transition: opacity, width, height, transform;
transition-timing-function:ease;
transition-duration:1s;
display:none;
}
#xbutton {
margin-left: 140px;
margin-top:-60;
position:absolute;
opacity:1;
transition:color, display,font-size, 0.06s;
}
HTML:
<div id="addPopUp">
<h3 id="h3">Select what you would like to add:</h3>
<span id="xbutton"><strong>×</strong></span>
</div>
JS:
document.getElementById("xbutton").onclick = function() {
document.getElementById("xbutton").style.display = "none"
document.getElementById("addPopUp").style.opacity = "0"
document.getElementById("addPopUp").style.transform = "rotate(360deg)"
document.getElementById("addPopUp").style.width = "50px"
document.getElementById("addPopUp").style.height = "50px"
document.getElementById("h3").style.display = "none"
}

If you're using CSS animations one important thing to be aware of is that CSS animations won't automatically restart unless you tell them so.
One way to do it is when adding your style you should remove it again so it can apply the style another time.
document.getElementById("xbutton").onclick = function() {
// resetting the styles before the animation begins:
document.getElementById("xbutton").style.display = "block"
document.getElementById("addPopUp").style.opacity = "1"
//etc...
document.getElementById("xbutton").style.display = "none"
document.getElementById("addPopUp").style.opacity = "0"
document.getElementById("addPopUp").style.transform = "rotate(360deg)"
document.getElementById("addPopUp").style.width = "50px"
document.getElementById("addPopUp").style.height = "50px"
document.getElementById("h3").style.display = "none"
}

Javascript Opacity transition for p element

I have a p element in HTML Code like
<p id="errorEmailMsg" hidden>Wrong Mail</p>
In javascript I want to make a transition, where it changes the opacity from 0 to 1 in 1second.
I tried to do something like
errorMessage.style.opacity = 0;
setTimeout(() => {
errorMessage.style.opacity = 1;
}, this.animationDelay + 20);
How can I achieve this? Thank you and have a nice day :)

I have created a demo with this effect:
https://codepen.io/jordyvd/pen/yLYBvbx
HTML
<p class="p">Some text</p>
<button class="button">Hide it</button>
CSS
.p {
opacity: 1;
transition: opacity 1s;
}
.p.hidden {
opacity: 0;
}
JavaScript
document.querySelector('.button').addEventListener('click', e => {
document.querySelector('.p').classList.toggle('hidden');
});
Click on the button to show/hide the text.
I suggest you look at CSS transitions: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

Remove hidden attribute.
If you want the element to invisible by default use.
<p id="errorEmailMsg" style="opacity: 0">Wrong Mail</p>

How does the following line of JavaScript work?

I came across the following code:
Javascript:
var ElementClicked = document.getElementById(IdClicked);
ElementClicked.className = ElementClicked.className == 'hidden' ? '' : 'hidden';
CSS:
div.hidden{
height: 500px;
}
div{
height: 0px;
-webkit-transition: height 0.5s;
transition: height 0.5s;
overflow: hidden;
}
The HTML contains two divs:
<div id="homepage" class='hidden'>
.
.
.
<div id="intro_page" >
The author calls the JavaScript function with the first div.
I am unable to understand clearly what the JavaScript function is doing. I know what a conditional operator is and how it works.
Can someone explain briefly what the function basically does?

It toggles the hidden class. If the className was 'hidden', it is now ''. If it was anything else, it is now 'hidden'.

The class of variable ElementClicked is being toggled between 'hidden' and '' using a ternary operator ?.

If i explain it line by line than,
ElementClicked.className = ElementClicked.className == 'hidden' ? '' : 'hidden';
this conditional operator checks if is is hidden, n if it is changes its state to ''.
Now,
div.hidden{
height: 500px;
}
div{
height: 0px;
-webkit-transition: height 0.5s;
transition: height 0.5s;
overflow: hidden;
}
is a css code for beautification and setting it as hidden
and the last one is html code where division is having homepage
<div id="homepage" class='hidden'>
.
.
.
<div id="intro_page" >

var ElementClicked = document.getElementById(IdClicked);
ElementClicked points/refers to the div with id=IdClicked.
ElementClicked.className = ElementClicked.className == 'hidden' ? '' : 'hidden';
If ElementClicked owns the class "hidden", nothing appends. Else code adds class 'hidden' to ElementClicked.
Brief, this code add class hidden to ElementClicked. The element with id=IdClicked gets class hidden when the JS code is executed.

Having issue with jQuery hover function

JS
$(".row").live("hover",
function()
{
$(".remove").fadeIn();
}
);
$(".row").live("blur",
function()
{
$(".remove").fadeOut();
}
);
HTML Markup
<div class="row chapter" node="1">
<img class="remove" src="design/images/remove.png">
Sample
</div>
<div class="row chapter" node="2">
<img class="remove" src="design/images/remove.png">
Sample 2
</div>
What I want to do is,
to fade in on hover event, image with class .remove (which stands
inside hovered .row div) and fade out on blur event.
On .remove click, get parent div's node attribute
JsFiddle
http://jsfiddle.net/tt13/3VG5P/3/
Am I missing something?

To fade in on hover event, image with class .remove (which stands inside hovered .row div) and fade out on blur event.
This will toggle the class "remove" within the hovered row.
$('.row').hover(function() {
$(this).find('.remove').stop(true, true).fadeIn();
}, function(){
$(this).find('.remove').stop(true, true).fadeOut();
});
You should also use stop(true, true) to clear the animation queue and end any ongoing animation.
On .remove click, get parent div's node attribute
$('.remove').click(function() {
var $parent = $(this).parent();
var nodeValue = $parent.attr('node') || "missing-node-value";
console.log("node =", nodeValue); // DEBUG
$parent.slideUp();
});
View demo.

$(".row").hover(function(){
$(".remove", this).stop().fadeIn();
}, function(){
$(".remove", this).stop().fadeOut();
});
try this one.

This is a job for CSS, not jQuery. I would use this simple CSS:
.row .remove {
opacity: 0;
-webkit-transition: opacity 0.5s ease;
-moz-transition: opacity 0.5s ease;
-ms-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
}
.row:hover .remove {
opacity: 1;
}​
Demo http://jsfiddle.net/KPQ5h/
If you still want javascript:
$(".row").on({
mouseover: function() {
$(this).find('.remove').fadeIn();
},
mouseout: function() {
$(this).find('.remove').fadeOut();
}
});​
http://jsfiddle.net/KPQ5h/1/

Check the syntax:
(".remove").fadeIn();
//Should be
$(".remove").fadeIn();
Try:
$(this).children(".remove").fadeIn();
Edited:
BLUR events dont work on DIVs so you could try using mouseout, like
$(".row").live("mouseout", function() {
$(this).children(".remove").fadeOut();
});