Develop Reference

problem on onclick() event for more than one clicks done on a div

i have an html page where,when hovered over the first image a second image fades in/is shown.The first image has an onclick() event which performs a transition of rotating the image and scaling it by some number.During the transition, the first image disappears and some text appears on the same place(area of the div tag of the first image).I perform the transition through javascript and the hovering animation using css. Now when i click on the text(or the area of the div tag) the transition must reverse back i.e., the div area must be as it was before clicking(even with the hovering working.). I would like to know the answer through pure javascript please.
Thank you in advance.
timesclicked = 0;
document.getElementById("hoverImage").addEventListener("click", function()
{
var x = document.getElementById('container');
timesclicked+=1;
if(timesclicked%2!=0)
{
//obj.style.opacity = '0.5';
x.style.transform = 'rotateZ(-360deg) scale(1.4)';
x.style.transition = 'all 1.5s ease-in-out';
setTimeout(() => {
x.innerHTML = '<div style="font-size:16px; font-family: monospace; font-weight:bold; text-align:center; "> My Hero Academia, abbreviated as HeroAca is a Japanese superhero manga series written and illustrated by Kōhei Horikoshi. It has been serialized in Weekly Shōnen Jump since July 2014, and, as of February 2019, 22 volumes have been collected in tankōbon format.</div>'},'1300');
}
else
{
x.style.transform = 'rotateZ(-45deg) scale(1)';
x.style.transition = 'all 1.5s ease-in-out';
setTimeout(() => {
x.innerHTML = '<img src="https://picsum.photos/300">'},'500');
}
});
img
{
width: 300px;
height: 300px;
}
#mainImage,#hoverImage
{
left: 0px;
position: absolute;
top: 0px;
}
#hoverImage
{
opacity: 0;
transition: opacity 0.4s 0.1s ;
}
#hoverImage:hover
{
opacity: 1;
}
#container
{
background: url(https://picsum.photos/300);
background-size: cover;
width: 300px;
height: 300px;
position: absolute;
top:20%;
left:40%;
transform: rotateZ(-45deg);
}
#container:before
{
content: "";
display: block;
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: -1;
background-color: rgba(255, 255, 255, 0.6);
}
<div id="container" >
<img id="mainImage" src="https://picsum.photos/300">
<img id="hoverImage" src="https://picsum.photos/300">
</div>
As much as i know, I think the second clicking event is not happening because the eventlistener is on the hoverImage. I need a way to run the else part of the code somehow.

It looks like there are a few problems with your code, and you're going to have some debugging to do. That said, try this for a strategy:
Put your on-click event on the #container.
Put all the styling and transitioning details in the css. Your javascript will just add and remove a class from the #container.
Don't track the number of clicks unless you need it for something else. Have your if statement check for the presence or absence of the class you're toggling. (Or use an explicit toggle instead of an if-else block.)
Don't add and remove the text and background in the javascript, put them both in the HTML and control their visibility using the CSS.
edit:
People asked for examples and clarification. I'm stealing some of this from other people's answers.
I'm not completely sure I've understood OP's intentions correctly, and there are some rough-around-the-edgues details (like the cursor when you hover before clicking), but I think this should serve as an example:
let container = document.getElementById("container");
container.addEventListener("click", function(){
container.classList.toggle("selected");
});
#mainImage, #hoverImage, #selectedText {
width: 300px;
height: 300px;
left: 0px;
position: absolute;
top: 0px;
}
#hoverImage {
opacity: 0;
transition: opacity 0.4s 0.1s;
}
#container:hover > #hoverImage {
opacity: 1;
}
#container {
width: 300px;
height: 300px;
position: absolute;
top:20%;
left:40%;
transform: rotateZ(-45deg);
transition: all 1.5s ease-in-out;
}
#container.selected {
transform: rotateZ(-360deg) scale(1.4);
}
#container:before {
content: "";
display: block;
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: -1;
background-color: rgba(255, 255, 255, 0.6);
}
#selectedText {
font-size:16px;
font-family: monospace;
font-weight:bold;
text-align:center;
background: url(https://picsum.photos/300?text);
background-size: cover;
opacity: 0;
transition: opacity 0.1s 0.5s;
}
#container.selected > #selectedText {
opacity: 1;
transition: opacity 0.1s 1.3s;
}
<div id="container">
<img id="mainImage" src="https://picsum.photos/300?main">
<img id="hoverImage" src="https://picsum.photos/300?hover">
<div id="selectedText">
My Hero Academia, abbreviated as HeroAca is a Japanese superhero
manga series written and illustrated by Kōhei Horikoshi. It has been
serialized in Weekly Shōnen Jump since July 2014, and, as of
February 2019, 22 volumes have been collected in tankōbon format.
</div>
</div>

you can add the click event listener on the container div.
timesclicked = 0;
document.getElementById("container").addEventListener("click", function()
{
var x = document.getElementById('container');
timesclicked+=1;
if(timesclicked%2!=0)
{
//obj.style.opacity = '0.5';
x.style.transform = 'rotateZ(-360deg) scale(1.4)';
x.style.transition = 'all 1.5s ease-in-out';
setTimeout(() => {
x.innerHTML = '<div style="font-size:16px; font-family: monospace; font-weight:bold; text-align:center; "> My Hero Academia, abbreviated as HeroAca is a Japanese superhero manga series written and illustrated by Kōhei Horikoshi. It has been serialized in Weekly Shōnen Jump since July 2014, and, as of February 2019, 22 volumes have been collected in tankōbon format.</div>'},'1300');
}
else
{
x.style.transform = 'rotateZ(-45deg) scale(1)';
x.style.transition = 'all 1.5s ease-in-out';
setTimeout(() => {
x.innerHTML = '<img src="https://picsum.photos/300">'},'500');
}
});
img
{
width: 300px;
height: 300px;
}
#mainImage,#hoverImage
{
left: 0px;
position: absolute;
top: 0px;
}
#hoverImage
{
opacity: 0;
transition: opacity 0.4s 0.1s ;
}
#hoverImage:hover
{
opacity: 1;
}
#container
{
background: url(https://picsum.photos/300);
background-size: cover;
width: 300px;
height: 300px;
position: absolute;
top:20%;
left:40%;
transform: rotateZ(-45deg);
}
#container:before
{
content: "";
display: block;
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: -1;
background-color: rgba(255, 255, 255, 0.6);
}
<div id="container" >
<img id="mainImage" src="https://picsum.photos/300">
<img id="hoverImage" src="https://picsum.photos/300">
</div>
</style>

if I understand your problem correctly, I think you just need to move the transition styles into your CSS
x.style.transition = 'all 1.5s ease-in-out';

onClick add/remove class inside loop is not working in jquery

I'm working on flexslider here onClick next I want to add class it is working but randomly click is coming when I first click class added then on second click not coming third click coming so on. I want to add a class every click. Here might be the problem in if()
$('.flex-next').on('click', function() {
if ($('.timeline span').hasClass('clicked')) {
$('.timeline span.clicked').removeClass('clicked');
$(this).addClass('clicked');
} else {
$('.timeline span').removeClass('clicked');
$('.timeline span').addClass('clicked');
}
});
.timeline {
content: '';
background-color: rgba(255, 255, 255, 0.52);
display: block;
width: 100px;
height: 2px;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
position: relative;
}
.timeline span:before {
position: absolute;
left: 0;
top: -1px;
content: '';
background-color: red;
display: block;
height: 3px;
animation: yourAnimation 1s 0s linear;
}
.timeline span.clicked {
position: absolute;
left: 0;
top: -1px;
content: '';
background-color: blue;
display: block;
height: 3px;
animation: yourAnimation 1s 0s linear;
}
#keyframes yourAnimation {
0% {
width: 0;
}
50% {
width: 50%;
}
82% {
width: 100%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flex-next">Click here</div>
<span class="timeline">
<span></span>
</span>

You can acheive the required functionality as
$('.flex-next').on('click', function(){
if (! ($('.timeline span').hasClass('clicked')) ) {
$('.timeline span').addClass('clicked');
setTimeOut(function(){
$('.timeline span').removeClass('clicked');
} , 200)
}
});

To add/remove a class on click, it is better to use jquery toggleClass function.
Moreover you may need to execute the click event after the document is loaded correctly
$( document ).ready(function() {
$('.flex-next').on('click', function(){
$('.timeline span').toggleClass( "clicked" );
});
});
For more info, you may refer to: http://api.jquery.com/toggleclass/

How to center span over image while maintaining mouseover functionality

<div class="pic">
<img src="image.jpg" height="250"/>
<span class="text" style="display:none">text here</span>
</div>
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script type="text/javascript">
$('img').css('opacity', 0.4);
$('img').next('span.text').show();
$('img').bind('mouseover', function () {
$(this).css('opacity', 1.0);
$(this).next('span.text').hide();
});
$('img').bind('mouseout', function () {
$(this).css('opacity', 0.3);
$(this).next('span.text').show();
});
</script>
I have an opaque image that becomes fully visible on mouseover. I added text with span that would disappear on mouseover and reappear on mouseout similarly to the opaqueness on the image. I tried to center the text with margin-left:auto and margin-right:auto in CSS, but lacked results. Is there a way to center the text while still having the opaqueness and the text disappear on mouseover? Is Javascript the best way to do it?
Thanks

Couldn't you do this with CSS?
body {
text-align: center;
}
.pic {
display: inline-block;
margin: 25px;
border: 1px solid red;
position:relative;
}
.pic img {
display: block;
opacity: 0.4;
transition: opacity 0.5s ease;
}
.text {
opacity: 1;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
transition: opacity 0.5s ease;
}
.pic:hover img {
opacity: 1;
}
.pic:hover .text {
opacity: 0;
}
<div class="pic">
<img src="http://lorempixel.com/output/city-q-c-250-250-7.jpg" />
<span class="text">text here</span>
</div>

Change colour of an element when clicked

I cannot figure out how to change the colour of my menu elements when the "center" container or the "right" container is clicked (returning its state once clicked on again).
Currently my 3 lines that are within my menu are white, I want to change them to red when these "center" and "right" containers are clicked.
HTML for menu and containers:
<div class="menu">
<div class="line"></div>
<div class= "container" id= "center">
<h1 style="color:white"><a>LOREM IPSUM<a/></h1>
</div>
<div class="container" id= "right">
<h1 style="color:white"><a>LOREM IPSUM</a></h1>
</div>
CSS for menu elements:
.menu .line {
height: 5px;
width: 40px;
background: #fff;
position: absolute;
top: 22.5px;
left: 5px;
-webkit-transition: all 250ms linear;
transition: all 250ms linear;
z-index: 100;
}
.menu .line:after, .menu .line:before {
content: ' ';
height: 5px;
width: 40px;
background: #fff;
position: absolute;
-webkit-transition: all 250ms linear;
transition: all 250ms linear;
}
.menu .line:before {
top: -10px;
}
.menu .line:after {
bottom: -10px;
}

Define new classes for the colors you want, e.g.
.red {
color: red !important;
}
.green {
color: green !important;
}
Then toggle them using jQuery:
$('#center').click(function() {
$(this).find('h1').toggleClass('red');
});
$('#right').click(function() {
$(this).find('h1').toggleClass('green');
});
Note: If you assign the original color using CSS then you don't need the !important.

I was unable to make sense of your sample html, so here's is an example demo using jQuery's .toggleClass

Add an onClick() method
Html:
<h1 style="color:white" onclick="changeColor(this);"><a>LOREM IPSUM<a/></h1>
and add this function in the <script> tag:
function changeColor(element){
element.style.color='red';
}

jQuery mouseover and mouseout not functioning as desired

Im having an issue where jquery mouseover and mouseout do not work with the css function..
I am trying to have transition effects for buttons on an image slider.
My HTML Code:
<div id="hero">
<div id="next">
<img class="nxt" src="http://www.uk-timber.co.uk/ebay2014/images/jsSlider/next.png"/>
</div>
<!--END--Next-->
<div id="prev">
<img class="prv" src="http://www.uk-timber.co.uk/ebay2014/images/jsSlider/prev.png"/>
</div>
<!--END--Prev-->
<div id="slider">
<img src="http://www.uk-timber.co.uk/ebay2014/images/jsSlider/slides/slide1.png"/>
<img src="http://www.uk-timber.co.uk/ebay2014/images/jsSlider/slides/slide2.png"/>
<img src="http://www.uk-timber.co.uk/ebay2014/images/jsSlider/slides/slide3.png"/>
</div>
<!--END--Slider-->
</div>
<!--END--Hero-->
My CSS Code:
#hero {
width: 944px; height: 360px;
position: relative;
margin: auto;
}
#slider {
width: 944px; height: 360px;
position: absolute;
overflow: hidden;
}
#next {
position: absolute;
top: 250px;
right: 15px;
z-index: 99;
cursor: pointer;
opacity: 0.3;
}
#prev {
position: absolute;
top: 250px;
left: 15px;
z-index: 99;
cursor: pointer;
opacity: 0.3;
}
and finally my JS Code:
$(function () {
$("#hero").mouseover(function () {
$this = $(this);
$this.find("#next").css(
"transition":"all 0.2s ease-in",
"opacity":"1"
);
}).mouseout(function () {
$this = $(this);
$this.find("#next").css(
"transition":"all 0.2s ease-out",
"opacity":"0.3"
);
});
});
Please bare in mind i am new to javascript and jquery so any help is much appreciated.

Try mouseleave function.
$(function(){
$("#hero").mouseover(function () {
$this = $(this);
$this.find("#next").css({
"transition":"all 0.2s ease-in",
"opacity":"1"
});
}).mouseleave(function () {
$this = $(this);
$this.find("#next").css({
"transition":"all 0.2s ease-out",
"opacity":"0.3"
});
});
});

I've put your code in a Fiddle. This won't work.
Then I cleaned it up a bit and got rid of some syntax errors here and voila: it works.
Note: If you're only going to change the opacity, you better do it with just CSS:
#next{
opacity: 0.3;
transition: all 0.2s;
transition-timing-function: ease-out;
}
#hero:hover #next{
opacity: 1;
transition-timing-function: ease-in;
}
/*DON'T FORGET TO PREFIX THE TRANSITION-ATTRIBUTES*/