can't make element return to it's original state using JavaScript
0
I'm trying to make the box translate on the X axis by 500px then return to it's original status, why the same logic work on the title element but not on the box.
(note : I'm new at using JavaScript)
function colorChange() {
let title = document.getElementById('title');
if (title.style.color != 'red') {
title.innerText = 'I'm Red';
title.style.color = 'red';
title.style.transition = '2s';
title.style.animationDelay = '3s';
title.style.transform = 'rotateZ(360deg)';
}
else {
title.innerText = 'I'm Black';
title.style.color = 'black';
title.style.transition = '2s';
title.style.animationDelay = '3s';
title.style.transform = 'rotateZ(-360deg)';
}
}
function boxTranslate() {
let boxElement = document.getElementsByClassName('box')[0];
if (boxElement.style.color != 'red') {
boxElement.style.background = 'red';
boxElement.style.transform = 'translateX(500px)';
boxElement.style.transition = '1s';
}
else {
boxElement.style.background = 'royalblue';
boxElement.style.transform = 'translateX(-500px)';
boxElement.style.transition = '1s';
}
}.wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
}
.box {
height: 100px;
width: 100px;
background: royalblue;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<h1 id="title" onclick="colorChange()">I'm Black</h1>
</div>
<div class="big-box">
<div onclick="boxTranslate()" class="box"></div>
</div>
<script src="script.js"></script>
</body>
</html>javascript html css
asked Nov 20 '18 at 12:36
idrissAbbouidrissAbbou
177
add a comment |
0
I'm trying to make the box translate on the X axis by 500px then return to it's original status, why the same logic work on the title element but not on the box.
(note : I'm new at using JavaScript)
function colorChange() {
let title = document.getElementById('title');
if (title.style.color != 'red') {
title.innerText = 'I'm Red';
title.style.color = 'red';
title.style.transition = '2s';
title.style.animationDelay = '3s';
title.style.transform = 'rotateZ(360deg)';
}
else {
title.innerText = 'I'm Black';
title.style.color = 'black';
title.style.transition = '2s';
title.style.animationDelay = '3s';
title.style.transform = 'rotateZ(-360deg)';
}
}
function boxTranslate() {
let boxElement = document.getElementsByClassName('box')[0];
if (boxElement.style.color != 'red') {
boxElement.style.background = 'red';
boxElement.style.transform = 'translateX(500px)';
boxElement.style.transition = '1s';
}
else {
boxElement.style.background = 'royalblue';
boxElement.style.transform = 'translateX(-500px)';
boxElement.style.transition = '1s';
}
}.wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
}
.box {
height: 100px;
width: 100px;
background: royalblue;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<h1 id="title" onclick="colorChange()">I'm Black</h1>
</div>
<div class="big-box">
<div onclick="boxTranslate()" class="box"></div>
</div>
<script src="script.js"></script>
</body>
</html>javascript html css
asked Nov 20 '18 at 12:36
idrissAbbouidrissAbbou
177
you are comparing with the "color" style but setting the "background". Change your condition from color to background
– Anubrij Chandra
Nov 20 '18 at 12:44
add a comment |
0
0
0
0
I'm trying to make the box translate on the X axis by 500px then return to it's original status, why the same logic work on the title element but not on the box.
(note : I'm new at using JavaScript)
function colorChange() {
let title = document.getElementById('title');
if (title.style.color != 'red') {
title.innerText = 'I'm Red';
title.style.color = 'red';
title.style.transition = '2s';
title.style.animationDelay = '3s';
title.style.transform = 'rotateZ(360deg)';
}
else {
title.innerText = 'I'm Black';
title.style.color = 'black';
title.style.transition = '2s';
title.style.animationDelay = '3s';
title.style.transform = 'rotateZ(-360deg)';
}
}
function boxTranslate() {
let boxElement = document.getElementsByClassName('box')[0];
if (boxElement.style.color != 'red') {
boxElement.style.background = 'red';
boxElement.style.transform = 'translateX(500px)';
boxElement.style.transition = '1s';
}
else {
boxElement.style.background = 'royalblue';
boxElement.style.transform = 'translateX(-500px)';
boxElement.style.transition = '1s';
}
}.wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
}
.box {
height: 100px;
width: 100px;
background: royalblue;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<h1 id="title" onclick="colorChange()">I'm Black</h1>
</div>
<div class="big-box">
<div onclick="boxTranslate()" class="box"></div>
</div>
<script src="script.js"></script>
</body>
</html>javascript html css
asked Nov 20 '18 at 12:36
idrissAbbouidrissAbbou
177
I'm trying to make the box translate on the X axis by 500px then return to it's original status, why the same logic work on the title element but not on the box.
(note : I'm new at using JavaScript)
function colorChange() {
let title = document.getElementById('title');
if (title.style.color != 'red') {
title.innerText = 'I'm Red';
title.style.color = 'red';
title.style.transition = '2s';
title.style.animationDelay = '3s';
title.style.transform = 'rotateZ(360deg)';
}
else {
title.innerText = 'I'm Black';
title.style.color = 'black';
title.style.transition = '2s';
title.style.animationDelay = '3s';
title.style.transform = 'rotateZ(-360deg)';
}
}
function boxTranslate() {
let boxElement = document.getElementsByClassName('box')[0];
if (boxElement.style.color != 'red') {
boxElement.style.background = 'red';
boxElement.style.transform = 'translateX(500px)';
boxElement.style.transition = '1s';
}
else {
boxElement.style.background = 'royalblue';
boxElement.style.transform = 'translateX(-500px)';
boxElement.style.transition = '1s';
}
}.wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
}
.box {
height: 100px;
width: 100px;
background: royalblue;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<h1 id="title" onclick="colorChange()">I'm Black</h1>
</div>
<div class="big-box">
<div onclick="boxTranslate()" class="box"></div>
</div>
<script src="script.js"></script>
</body>
</html>function colorChange() {
let title = document.getElementById('title');
if (title.style.color != 'red') {
title.innerText = 'I'm Red';
title.style.color = 'red';
title.style.transition = '2s';
title.style.animationDelay = '3s';
title.style.transform = 'rotateZ(360deg)';
}
else {
title.innerText = 'I'm Black';
title.style.color = 'black';
title.style.transition = '2s';
title.style.animationDelay = '3s';
title.style.transform = 'rotateZ(-360deg)';
}
}
function boxTranslate() {
let boxElement = document.getElementsByClassName('box')[0];
if (boxElement.style.color != 'red') {
boxElement.style.background = 'red';
boxElement.style.transform = 'translateX(500px)';
boxElement.style.transition = '1s';
}
else {
boxElement.style.background = 'royalblue';
boxElement.style.transform = 'translateX(-500px)';
boxElement.style.transition = '1s';
}
}.wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
}
.box {
height: 100px;
width: 100px;
background: royalblue;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<h1 id="title" onclick="colorChange()">I'm Black</h1>
</div>
<div class="big-box">
<div onclick="boxTranslate()" class="box"></div>
</div>
<script src="script.js"></script>
</body>
</html>function colorChange() {
let title = document.getElementById('title');
if (title.style.color != 'red') {
title.innerText = 'I'm Red';
title.style.color = 'red';
title.style.transition = '2s';
title.style.animationDelay = '3s';
title.style.transform = 'rotateZ(360deg)';
}
else {
title.innerText = 'I'm Black';
title.style.color = 'black';
title.style.transition = '2s';
title.style.animationDelay = '3s';
title.style.transform = 'rotateZ(-360deg)';
}
}
function boxTranslate() {
let boxElement = document.getElementsByClassName('box')[0];
if (boxElement.style.color != 'red') {
boxElement.style.background = 'red';
boxElement.style.transform = 'translateX(500px)';
boxElement.style.transition = '1s';
}
else {
boxElement.style.background = 'royalblue';
boxElement.style.transform = 'translateX(-500px)';
boxElement.style.transition = '1s';
}
}.wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
}
.box {
height: 100px;
width: 100px;
background: royalblue;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<h1 id="title" onclick="colorChange()">I'm Black</h1>
</div>
<div class="big-box">
<div onclick="boxTranslate()" class="box"></div>
</div>
<script src="script.js"></script>
</body>
</html>javascript html css
javascript html css
asked Nov 20 '18 at 12:36
idrissAbbouidrissAbbou
177
asked Nov 20 '18 at 12:36
idrissAbbouidrissAbbou
177
asked Nov 20 '18 at 12:36
idrissAbbouidrissAbbou
177
asked Nov 20 '18 at 12:36
idrissAbbouidrissAbbou
177
asked Nov 20 '18 at 12:36
idrissAbbouidrissAbbou
177
177
you are comparing with the "color" style but setting the "background". Change your condition from color to background
– Anubrij Chandra
Nov 20 '18 at 12:44
add a comment |
you are comparing with the "color" style but setting the "background". Change your condition from color to background
– Anubrij Chandra
Nov 20 '18 at 12:44
you are comparing with the "color" style but setting the "background". Change your condition from color to background
– Anubrij Chandra
Nov 20 '18 at 12:44
you are comparing with the "color" style but setting the "background". Change your condition from color to background
– Anubrij Chandra
Nov 20 '18 at 12:44
add a comment |
3 Answers
3
active
oldest
votes
2
You have 2 problems in your code.
At the box you check
boxElement.style.color != 'red'but you need to check thebackgroundnot thecolorTo return it to the initial position, use
transform:translateX(0)because that's the initial position of the box before you translate it 500px on the x-axis.
The same you should do to the text. rotateZ(0deg)
When you use transform on an element. You do not change it's initial/default position, but you just 'edit/manipulate' it's position on the screen. It's initial position by default is still 0. That's why if you translate the box 500px you do not need to use -500pxbut instead use 0, because transform:translate(-500px) would move the box from it's current position 500px to the left of it's default/initial position.
function colorChange() {
let title = document.getElementById('title');
if (title.style.color != 'red') {
title.innerText = 'I'm Red';
title.style.color = 'red';
title.style.transition = '2s';
title.style.animationDelay = '3s';
title.style.transform = 'rotateZ(360deg)';
}
else {
title.innerText = 'I'm Black';
title.style.color = 'black';
title.style.transition = '2s';
title.style.animationDelay = '3s';
title.style.transform = 'rotateZ(0deg)';
}
}
function boxTranslate() {
let boxElement = document.getElementsByClassName('box')[0];
if (boxElement.style.background != 'red') {
boxElement.style.background = 'red';
boxElement.style.transform = 'translateX(500px)';
boxElement.style.transition = '1s';
}
else {
boxElement.style.background = 'royalblue';
boxElement.style.transform = 'translateX(0px)';
boxElement.style.transition = '1s';
}
}.wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
}
.box {
height: 100px;
width: 100px;
background: royalblue;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<h1 id="title" onclick="colorChange()">I'm Black</h1>
</div>
<div class="big-box">
<div onclick="boxTranslate()" class="box"></div>
</div>
<script src="script.js"></script>
</body>
</html>answered Nov 20 '18 at 12:41
Mihai TMihai T
11k1723
how I couldn't saw that I'm calling the wrong property, that kind of embarrassing, and also thanks for the advice for returning to the original status . that's work .
– idrissAbbou
Nov 20 '18 at 12:48
add a comment |
1
because your if statement depends on style.color, but you set style.background. You need to change your if-statement to:
if (boxElement.style.background != 'red') {
answered Nov 20 '18 at 12:40
JohnnyAWJohnnyAW
2,3141923
while this solves the problem of theifcondition, it doesn't return the box to it's initial value
– Mihai T
Nov 20 '18 at 13:03
add a comment |
1
It works on your text because you were checking for the .color style and not the .background style see my example below for a fixed version. In addition to changing the if statement you also need to update the else transform:translateX option to be 0
function colorChange() {
let title = document.getElementById('title');
if (title.style.color != 'red') {
title.innerText = 'I'm Red';
title.style.color = 'red';
title.style.transition = '2s';
title.style.animationDelay = '3s';
title.style.transform = 'rotateZ(360deg)';
}
else {
title.innerText = 'I'm Black';
title.style.color = 'black';
title.style.transition = '2s';
title.style.animationDelay = '3s';
title.style.transform = 'rotateZ(-360deg)';
}
}
function boxTranslate() {
let boxElement = document.getElementsByClassName('box')[0];
if (boxElement.style.background != 'red' ) {
boxElement.style.background = 'red';
boxElement.style.transform = 'translateX(500px)';
boxElement.style.transition = '1s';
}
else {
boxElement.style.background = 'royalblue';
boxElement.style.transform = 'translateX(0)';
boxElement.style.transition = '1s';
}
}.wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
}
.box {
height: 100px;
width: 100px;
background: royalblue;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<h1 id="title" onclick="colorChange()">I'm Black</h1>
</div>
<div class="big-box">
<div onclick="boxTranslate()" class="box"></div>
</div>
<script src="script.js"></script>
</body>
</html>answered Nov 20 '18 at 12:42
Aaron McGuireAaron McGuire
43218
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53393142%2fcant-make-element-return-to-its-original-state-using-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
You have 2 problems in your code.
At the box you check
boxElement.style.color != 'red'but you need to check thebackgroundnot thecolorTo return it to the initial position, use
transform:translateX(0)because that's the initial position of the box before you translate it 500px on the x-axis.
The same you should do to the text. rotateZ(0deg)
When you use transform on an element. You do not change it's initial/default position, but you just 'edit/manipulate' it's position on the screen. It's initial position by default is still 0. That's why if you translate the box 500px you do not need to use -500pxbut instead use 0, because transform:translate(-500px) would move the box from it's current position 500px to the left of it's default/initial position.
function colorChange() {
let title = document.getElementById('title');
if (title.style.color != 'red') {
title.innerText = 'I'm Red';
title.style.color = 'red';
title.style.transition = '2s';
title.style.animationDelay = '3s';
title.style.transform = 'rotateZ(360deg)';
}
else {
title.innerText = 'I'm Black';
title.style.color = 'black';
title.style.transition = '2s';
title.style.animationDelay = '3s';
title.style.transform = 'rotateZ(0deg)';
}
}
function boxTranslate() {
let boxElement = document.getElementsByClassName('box')[0];
if (boxElement.style.background != 'red') {
boxElement.style.background = 'red';
boxElement.style.transform = 'translateX(500px)';
boxElement.style.transition = '1s';
}
else {
boxElement.style.background = 'royalblue';
boxElement.style.transform = 'translateX(0px)';
boxElement.style.transition = '1s';
}
}.wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
}
.box {
height: 100px;
width: 100px;
background: royalblue;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<h1 id="title" onclick="colorChange()">I'm Black</h1>
</div>
<div class="big-box">
<div onclick="boxTranslate()" class="box"></div>
</div>
<script src="script.js"></script>
</body>
</html>answered Nov 20 '18 at 12:41
Mihai TMihai T
11k1723
how I couldn't saw that I'm calling the wrong property, that kind of embarrassing, and also thanks for the advice for returning to the original status . that's work .
– idrissAbbou
Nov 20 '18 at 12:48
add a comment |
2
You have 2 problems in your code.
At the box you check
boxElement.style.color != 'red'but you need to check thebackgroundnot thecolorTo return it to the initial position, use
transform:translateX(0)because that's the initial position of the box before you translate it 500px on the x-axis.
The same you should do to the text. rotateZ(0deg)
When you use transform on an element. You do not change it's initial/default position, but you just 'edit/manipulate' it's position on the screen. It's initial position by default is still 0. That's why if you translate the box 500px you do not need to use -500pxbut instead use 0, because transform:translate(-500px) would move the box from it's current position 500px to the left of it's default/initial position.
function colorChange() {
let title = document.getElementById('title');
if (title.style.color != 'red') {
title.innerText = 'I'm Red';
title.style.color = 'red';
title.style.transition = '2s';
title.style.animationDelay = '3s';
title.style.transform = 'rotateZ(360deg)';
}
else {
title.innerText = 'I'm Black';
title.style.color = 'black';
title.style.transition = '2s';
title.style.animationDelay = '3s';
title.style.transform = 'rotateZ(0deg)';
}
}
function boxTranslate() {
let boxElement = document.getElementsByClassName('box')[0];
if (boxElement.style.background != 'red') {
boxElement.style.background = 'red';
boxElement.style.transform = 'translateX(500px)';
boxElement.style.transition = '1s';
}
else {
boxElement.style.background = 'royalblue';
boxElement.style.transform = 'translateX(0px)';
boxElement.style.transition = '1s';
}
}.wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
}
.box {
height: 100px;
width: 100px;
background: royalblue;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<h1 id="title" onclick="colorChange()">I'm Black</h1>
</div>
<div class="big-box">
<div onclick="boxTranslate()" class="box"></div>
</div>
<script src="script.js"></script>
</body>
</html>answered Nov 20 '18 at 12:41
Mihai TMihai T
11k1723
how I couldn't saw that I'm calling the wrong property, that kind of embarrassing, and also thanks for the advice for returning to the original status . that's work .
– idrissAbbou
Nov 20 '18 at 12:48
add a comment |
2
2
2
You have 2 problems in your code.
At the box you check
boxElement.style.color != 'red'but you need to check thebackgroundnot thecolorTo return it to the initial position, use
transform:translateX(0)because that's the initial position of the box before you translate it 500px on the x-axis.
The same you should do to the text. rotateZ(0deg)
When you use transform on an element. You do not change it's initial/default position, but you just 'edit/manipulate' it's position on the screen. It's initial position by default is still 0. That's why if you translate the box 500px you do not need to use -500pxbut instead use 0, because transform:translate(-500px) would move the box from it's current position 500px to the left of it's default/initial position.
function colorChange() {
let title = document.getElementById('title');
if (title.style.color != 'red') {
title.innerText = 'I'm Red';
title.style.color = 'red';
title.style.transition = '2s';
title.style.animationDelay = '3s';
title.style.transform = 'rotateZ(360deg)';
}
else {
title.innerText = 'I'm Black';
title.style.color = 'black';
title.style.transition = '2s';
title.style.animationDelay = '3s';
title.style.transform = 'rotateZ(0deg)';
}
}
function boxTranslate() {
let boxElement = document.getElementsByClassName('box')[0];
if (boxElement.style.background != 'red') {
boxElement.style.background = 'red';
boxElement.style.transform = 'translateX(500px)';
boxElement.style.transition = '1s';
}
else {
boxElement.style.background = 'royalblue';
boxElement.style.transform = 'translateX(0px)';
boxElement.style.transition = '1s';
}
}.wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
}
.box {
height: 100px;
width: 100px;
background: royalblue;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<h1 id="title" onclick="colorChange()">I'm Black</h1>
</div>
<div class="big-box">
<div onclick="boxTranslate()" class="box"></div>
</div>
<script src="script.js"></script>
</body>
</html>answered Nov 20 '18 at 12:41
Mihai TMihai T
11k1723
You have 2 problems in your code.
At the box you check
boxElement.style.color != 'red'but you need to check thebackgroundnot thecolorTo return it to the initial position, use
transform:translateX(0)because that's the initial position of the box before you translate it 500px on the x-axis.
The same you should do to the text. rotateZ(0deg)
When you use transform on an element. You do not change it's initial/default position, but you just 'edit/manipulate' it's position on the screen. It's initial position by default is still 0. That's why if you translate the box 500px you do not need to use -500pxbut instead use 0, because transform:translate(-500px) would move the box from it's current position 500px to the left of it's default/initial position.
function colorChange() {
let title = document.getElementById('title');
if (title.style.color != 'red') {
title.innerText = 'I'm Red';
title.style.color = 'red';
title.style.transition = '2s';
title.style.animationDelay = '3s';
title.style.transform = 'rotateZ(360deg)';
}
else {
title.innerText = 'I'm Black';
title.style.color = 'black';
title.style.transition = '2s';
title.style.animationDelay = '3s';
title.style.transform = 'rotateZ(0deg)';
}
}
function boxTranslate() {
let boxElement = document.getElementsByClassName('box')[0];
if (boxElement.style.background != 'red') {
boxElement.style.background = 'red';
boxElement.style.transform = 'translateX(500px)';
boxElement.style.transition = '1s';
}
else {
boxElement.style.background = 'royalblue';
boxElement.style.transform = 'translateX(0px)';
boxElement.style.transition = '1s';
}
}.wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
}
.box {
height: 100px;
width: 100px;
background: royalblue;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<h1 id="title" onclick="colorChange()">I'm Black</h1>
</div>
<div class="big-box">
<div onclick="boxTranslate()" class="box"></div>
</div>
<script src="script.js"></script>
</body>
</html>function colorChange() {
let title = document.getElementById('title');
if (title.style.color != 'red') {
title.innerText = 'I'm Red';
title.style.color = 'red';
title.style.transition = '2s';
title.style.animationDelay = '3s';
title.style.transform = 'rotateZ(360deg)';
}
else {
title.innerText = 'I'm Black';
title.style.color = 'black';
title.style.transition = '2s';
title.style.animationDelay = '3s';
title.style.transform = 'rotateZ(0deg)';
}
}
function boxTranslate() {
let boxElement = document.getElementsByClassName('box')[0];
if (boxElement.style.background != 'red') {
boxElement.style.background = 'red';
boxElement.style.transform = 'translateX(500px)';
boxElement.style.transition = '1s';
}
else {
boxElement.style.background = 'royalblue';
boxElement.style.transform = 'translateX(0px)';
boxElement.style.transition = '1s';
}
}.wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
}
.box {
height: 100px;
width: 100px;
background: royalblue;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<h1 id="title" onclick="colorChange()">I'm Black</h1>
</div>
<div class="big-box">
<div onclick="boxTranslate()" class="box"></div>
</div>
<script src="script.js"></script>
</body>
</html>function colorChange() {
let title = document.getElementById('title');
if (title.style.color != 'red') {
title.innerText = 'I'm Red';
title.style.color = 'red';
title.style.transition = '2s';
title.style.animationDelay = '3s';
title.style.transform = 'rotateZ(360deg)';
}
else {
title.innerText = 'I'm Black';
title.style.color = 'black';
title.style.transition = '2s';
title.style.animationDelay = '3s';
title.style.transform = 'rotateZ(0deg)';
}
}
function boxTranslate() {
let boxElement = document.getElementsByClassName('box')[0];
if (boxElement.style.background != 'red') {
boxElement.style.background = 'red';
boxElement.style.transform = 'translateX(500px)';
boxElement.style.transition = '1s';
}
else {
boxElement.style.background = 'royalblue';
boxElement.style.transform = 'translateX(0px)';
boxElement.style.transition = '1s';
}
}.wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
}
.box {
height: 100px;
width: 100px;
background: royalblue;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<h1 id="title" onclick="colorChange()">I'm Black</h1>
</div>
<div class="big-box">
<div onclick="boxTranslate()" class="box"></div>
</div>
<script src="script.js"></script>
</body>
</html>answered Nov 20 '18 at 12:41
Mihai TMihai T
11k1723
answered Nov 20 '18 at 12:41
Mihai TMihai T
11k1723
answered Nov 20 '18 at 12:41
Mihai TMihai T
11k1723
answered Nov 20 '18 at 12:41
Mihai TMihai T
11k1723
11k1723
how I couldn't saw that I'm calling the wrong property, that kind of embarrassing, and also thanks for the advice for returning to the original status . that's work .
– idrissAbbou
Nov 20 '18 at 12:48
add a comment |
how I couldn't saw that I'm calling the wrong property, that kind of embarrassing, and also thanks for the advice for returning to the original status . that's work .
– idrissAbbou
Nov 20 '18 at 12:48
how I couldn't saw that I'm calling the wrong property, that kind of embarrassing, and also thanks for the advice for returning to the original status . that's work .
– idrissAbbou
Nov 20 '18 at 12:48
how I couldn't saw that I'm calling the wrong property, that kind of embarrassing, and also thanks for the advice for returning to the original status . that's work .
– idrissAbbou
Nov 20 '18 at 12:48
add a comment |
1
because your if statement depends on style.color, but you set style.background. You need to change your if-statement to:
if (boxElement.style.background != 'red') {
answered Nov 20 '18 at 12:40
JohnnyAWJohnnyAW
2,3141923
while this solves the problem of theifcondition, it doesn't return the box to it's initial value
– Mihai T
Nov 20 '18 at 13:03
add a comment |
1
because your if statement depends on style.color, but you set style.background. You need to change your if-statement to:
if (boxElement.style.background != 'red') {
answered Nov 20 '18 at 12:40
JohnnyAWJohnnyAW
2,3141923
while this solves the problem of theifcondition, it doesn't return the box to it's initial value
– Mihai T
Nov 20 '18 at 13:03
add a comment |
1
1
1
because your if statement depends on style.color, but you set style.background. You need to change your if-statement to:
if (boxElement.style.background != 'red') {
answered Nov 20 '18 at 12:40
JohnnyAWJohnnyAW
2,3141923
because your if statement depends on style.color, but you set style.background. You need to change your if-statement to:
if (boxElement.style.background != 'red') {
answered Nov 20 '18 at 12:40
JohnnyAWJohnnyAW
2,3141923
answered Nov 20 '18 at 12:40
JohnnyAWJohnnyAW
2,3141923
answered Nov 20 '18 at 12:40
JohnnyAWJohnnyAW
2,3141923
answered Nov 20 '18 at 12:40
JohnnyAWJohnnyAW
2,3141923
2,3141923
while this solves the problem of theifcondition, it doesn't return the box to it's initial value
– Mihai T
Nov 20 '18 at 13:03
add a comment |
while this solves the problem of theifcondition, it doesn't return the box to it's initial value
– Mihai T
Nov 20 '18 at 13:03
while this solves the problem of the
if condition, it doesn't return the box to it's initial value– Mihai T
Nov 20 '18 at 13:03
while this solves the problem of the
if condition, it doesn't return the box to it's initial value– Mihai T
Nov 20 '18 at 13:03
add a comment |
1
It works on your text because you were checking for the .color style and not the .background style see my example below for a fixed version. In addition to changing the if statement you also need to update the else transform:translateX option to be 0
function colorChange() {
let title = document.getElementById('title');
if (title.style.color != 'red') {
title.innerText = 'I'm Red';
title.style.color = 'red';
title.style.transition = '2s';
title.style.animationDelay = '3s';
title.style.transform = 'rotateZ(360deg)';
}
else {
title.innerText = 'I'm Black';
title.style.color = 'black';
title.style.transition = '2s';
title.style.animationDelay = '3s';
title.style.transform = 'rotateZ(-360deg)';
}
}
function boxTranslate() {
let boxElement = document.getElementsByClassName('box')[0];
if (boxElement.style.background != 'red' ) {
boxElement.style.background = 'red';
boxElement.style.transform = 'translateX(500px)';
boxElement.style.transition = '1s';
}
else {
boxElement.style.background = 'royalblue';
boxElement.style.transform = 'translateX(0)';
boxElement.style.transition = '1s';
}
}.wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
}
.box {
height: 100px;
width: 100px;
background: royalblue;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<h1 id="title" onclick="colorChange()">I'm Black</h1>
</div>
<div class="big-box">
<div onclick="boxTranslate()" class="box"></div>
</div>
<script src="script.js"></script>
</body>
</html>answered Nov 20 '18 at 12:42
Aaron McGuireAaron McGuire
43218
add a comment |
1
It works on your text because you were checking for the .color style and not the .background style see my example below for a fixed version. In addition to changing the if statement you also need to update the else transform:translateX option to be 0
function colorChange() {
let title = document.getElementById('title');
if (title.style.color != 'red') {
title.innerText = 'I'm Red';
title.style.color = 'red';
title.style.transition = '2s';
title.style.animationDelay = '3s';
title.style.transform = 'rotateZ(360deg)';
}
else {
title.innerText = 'I'm Black';
title.style.color = 'black';
title.style.transition = '2s';
title.style.animationDelay = '3s';
title.style.transform = 'rotateZ(-360deg)';
}
}
function boxTranslate() {
let boxElement = document.getElementsByClassName('box')[0];
if (boxElement.style.background != 'red' ) {
boxElement.style.background = 'red';
boxElement.style.transform = 'translateX(500px)';
boxElement.style.transition = '1s';
}
else {
boxElement.style.background = 'royalblue';
boxElement.style.transform = 'translateX(0)';
boxElement.style.transition = '1s';
}
}.wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
}
.box {
height: 100px;
width: 100px;
background: royalblue;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<h1 id="title" onclick="colorChange()">I'm Black</h1>
</div>
<div class="big-box">
<div onclick="boxTranslate()" class="box"></div>
</div>
<script src="script.js"></script>
</body>
</html>answered Nov 20 '18 at 12:42
Aaron McGuireAaron McGuire
43218
add a comment |
1
1
1
It works on your text because you were checking for the .color style and not the .background style see my example below for a fixed version. In addition to changing the if statement you also need to update the else transform:translateX option to be 0
function colorChange() {
let title = document.getElementById('title');
if (title.style.color != 'red') {
title.innerText = 'I'm Red';
title.style.color = 'red';
title.style.transition = '2s';
title.style.animationDelay = '3s';
title.style.transform = 'rotateZ(360deg)';
}
else {
title.innerText = 'I'm Black';
title.style.color = 'black';
title.style.transition = '2s';
title.style.animationDelay = '3s';
title.style.transform = 'rotateZ(-360deg)';
}
}
function boxTranslate() {
let boxElement = document.getElementsByClassName('box')[0];
if (boxElement.style.background != 'red' ) {
boxElement.style.background = 'red';
boxElement.style.transform = 'translateX(500px)';
boxElement.style.transition = '1s';
}
else {
boxElement.style.background = 'royalblue';
boxElement.style.transform = 'translateX(0)';
boxElement.style.transition = '1s';
}
}.wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
}
.box {
height: 100px;
width: 100px;
background: royalblue;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<h1 id="title" onclick="colorChange()">I'm Black</h1>
</div>
<div class="big-box">
<div onclick="boxTranslate()" class="box"></div>
</div>
<script src="script.js"></script>
</body>
</html>answered Nov 20 '18 at 12:42
Aaron McGuireAaron McGuire
43218
It works on your text because you were checking for the .color style and not the .background style see my example below for a fixed version. In addition to changing the if statement you also need to update the else transform:translateX option to be 0
function colorChange() {
let title = document.getElementById('title');
if (title.style.color != 'red') {
title.innerText = 'I'm Red';
title.style.color = 'red';
title.style.transition = '2s';
title.style.animationDelay = '3s';
title.style.transform = 'rotateZ(360deg)';
}
else {
title.innerText = 'I'm Black';
title.style.color = 'black';
title.style.transition = '2s';
title.style.animationDelay = '3s';
title.style.transform = 'rotateZ(-360deg)';
}
}
function boxTranslate() {
let boxElement = document.getElementsByClassName('box')[0];
if (boxElement.style.background != 'red' ) {
boxElement.style.background = 'red';
boxElement.style.transform = 'translateX(500px)';
boxElement.style.transition = '1s';
}
else {
boxElement.style.background = 'royalblue';
boxElement.style.transform = 'translateX(0)';
boxElement.style.transition = '1s';
}
}.wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
}
.box {
height: 100px;
width: 100px;
background: royalblue;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<h1 id="title" onclick="colorChange()">I'm Black</h1>
</div>
<div class="big-box">
<div onclick="boxTranslate()" class="box"></div>
</div>
<script src="script.js"></script>
</body>
</html>function colorChange() {
let title = document.getElementById('title');
if (title.style.color != 'red') {
title.innerText = 'I'm Red';
title.style.color = 'red';
title.style.transition = '2s';
title.style.animationDelay = '3s';
title.style.transform = 'rotateZ(360deg)';
}
else {
title.innerText = 'I'm Black';
title.style.color = 'black';
title.style.transition = '2s';
title.style.animationDelay = '3s';
title.style.transform = 'rotateZ(-360deg)';
}
}
function boxTranslate() {
let boxElement = document.getElementsByClassName('box')[0];
if (boxElement.style.background != 'red' ) {
boxElement.style.background = 'red';
boxElement.style.transform = 'translateX(500px)';
boxElement.style.transition = '1s';
}
else {
boxElement.style.background = 'royalblue';
boxElement.style.transform = 'translateX(0)';
boxElement.style.transition = '1s';
}
}.wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
}
.box {
height: 100px;
width: 100px;
background: royalblue;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<h1 id="title" onclick="colorChange()">I'm Black</h1>
</div>
<div class="big-box">
<div onclick="boxTranslate()" class="box"></div>
</div>
<script src="script.js"></script>
</body>
</html>function colorChange() {
let title = document.getElementById('title');
if (title.style.color != 'red') {
title.innerText = 'I'm Red';
title.style.color = 'red';
title.style.transition = '2s';
title.style.animationDelay = '3s';
title.style.transform = 'rotateZ(360deg)';
}
else {
title.innerText = 'I'm Black';
title.style.color = 'black';
title.style.transition = '2s';
title.style.animationDelay = '3s';
title.style.transform = 'rotateZ(-360deg)';
}
}
function boxTranslate() {
let boxElement = document.getElementsByClassName('box')[0];
if (boxElement.style.background != 'red' ) {
boxElement.style.background = 'red';
boxElement.style.transform = 'translateX(500px)';
boxElement.style.transition = '1s';
}
else {
boxElement.style.background = 'royalblue';
boxElement.style.transform = 'translateX(0)';
boxElement.style.transition = '1s';
}
}.wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
}
.box {
height: 100px;
width: 100px;
background: royalblue;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<h1 id="title" onclick="colorChange()">I'm Black</h1>
</div>
<div class="big-box">
<div onclick="boxTranslate()" class="box"></div>
</div>
<script src="script.js"></script>
</body>
</html>answered Nov 20 '18 at 12:42
Aaron McGuireAaron McGuire
43218
answered Nov 20 '18 at 12:42
Aaron McGuireAaron McGuire
43218
answered Nov 20 '18 at 12:42
Aaron McGuireAaron McGuire
43218
answered Nov 20 '18 at 12:42
Aaron McGuireAaron McGuire
43218
43218
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53393142%2fcant-make-element-return-to-its-original-state-using-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
you are comparing with the "color" style but setting the "background". Change your condition from color to background
– Anubrij Chandra
Nov 20 '18 at 12:44