J'essaie de faire traduire la boîte sur l'axe X par 500px puis de revenir à son état d'origine, pourquoi la même logique fonctionne sur l'élément titre mais pas sur la boîte.
(remarque: je suis novice dans l'utilisation de 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>
0
idrissAbbou 20 nov. 2018 à 15:36

3 réponses

Meilleure réponse

Vous avez 2 problèmes dans votre code.

  1. Dans la case, vous cochez boxElement.style.color != 'red' mais vous devez vérifier le background et non le color

  2. Pour le remettre à sa position initiale, utilisez transform:translateX(0) car c'est la position initiale de la boîte avant de la traduire 500 pixels sur l'axe des x.

La même chose que vous devez faire pour le texte. rotateZ(0deg)

Lorsque vous utilisez transform sur un élément. Vous ne changez pas sa position initiale / par défaut, mais vous «éditez / manipulez» simplement sa position à l'écran. Sa position initiale par défaut est toujours 0. C'est pourquoi si vous traduisez la boîte 500px, vous n'avez pas besoin d'utiliser -500px mais utilisez plutôt 0, car transform:translate(-500px) déplacerait la boîte de sa position actuelle 500px à gauche de sa valeur par défaut / position initiale.

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>
2
Mihai T 20 nov. 2018 à 12:41

Car votre instruction if dépend de style.color, mais vous définissez style.background. Vous devez changer votre instruction if en:

if (boxElement.style.background != 'red') {
1
JohnnyAW 20 nov. 2018 à 12:40

Cela fonctionne sur votre texte car vous recherchiez le style .color et non le style .background voir mon exemple ci-dessous pour une version fixe. En plus de modifier l'instruction if, vous devez également mettre à jour l'option else transform:translateX à 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>
1
Aaron McGuire 20 nov. 2018 à 12:42