Displaying Text When Clicked

user_17482331 0
Viewed 41

In this project, my aim is to change emoji when I click and also I want "it wasn't funny bro" text to show up when I click to the emoji. When I click to the emoji it changes, but the text does not show up. I followed the same steps, it works for emojis but doesn't work for text. I could not figure out why it's not working. My code looks like this:

const beginningFace = document.querySelector(".beginning");
const reactionFace = document.querySelector(".reaction");

const beginningText = document.querySelector(".beginningT");
const reactionTextFirst = document.querySelector(".reactionT-first");
const reactionTextSecond = document.querySelector(".reactionT-second");


beginningFace.addEventListener('click',()=>{

    if(reactionFace.classList.contains('reaction')){
        reactionFace.classList.add('active');
        beginningFace.classList.remove('active');
        
    }

});

beginningText.addEventListener('click',()=>{
    if(reactionTextFirst.classList.contains('reactionT-first') && reactionTextSecond.classList.contains('reactionT-second')){
        reactionTextFirst.classList.add('active');
        reactionTextSecond.classList.add('active');
        beginningFace.classList.remove('active');
    }



});
@import url('https://fonts.googleapis.com/css2?family=Mr+Dafoe&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Exo:wght@900&display=swap');

body, html {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background-color: #202076;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  perspective: 700px;
  
}

.beginningT {
  display: none;
}

.reactionT-first {
  display:none;
  position: relative;
  font-family: 'Exo';
  font-size: 5em;
  margin: 0;
  transform: skew(-15deg);
  letter-spacing: 0.03em;
}

.reactionT-second{
  display: none;
  font-family: 'Mr Dafoe';
  margin: 0;
  font-size: 5.5em;
  margin-top: -0.6em;
  color: white;
  text-shadow: 0 0 0.05em #fff, 0 0 0.2em #fe05e1, 0 0 0.3em #fe05e1;
  transform: rotate(-7deg);
}

.emoji{
    font-size: 18rem;
    cursor: pointer;
    user-select: none;
    
}


.beginning{
    display: none;
} 

.reaction{
    display: none;
}

.active{
    display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <link rel="stylesheet" href="style.css">

</head>
<body>
    

    <div class="emoji beginning active"></div>
    <div class="emoji reaction"></div>
    
    <div class ="text beginningT active" style="font-size: 2rem; font-style: italic; font-family: Verdana, Geneva, Tahoma, sans-serif; color: #F98299;">My reaction after your joke↑ (click to see it!)</div>
    <div class="text reactionT-first">IT WASN'T</div>
    <div class="text reactionT-second">FUNNY BRO</div>

  




    <script src="app.js"></script>
</body>
</html>

web css html javascript
1 Answers

If you want your other text to show up when you click on the emoji, you have to do all the logic inside beginningFace.addEventListener, instead of using two diffent event listeners. I moved the logic, and removed the second click listener.

These lines were missing in the first click listener

    reactionTextFirst.classList.add('active');
    reactionTextSecond.classList.add('active');
    beginningText.classList.remove('active');


const beginningFace = document.querySelector(".beginning");
const reactionFace = document.querySelector(".reaction");

const beginningText = document.querySelector(".beginningT");
const reactionTextFirst = document.querySelector(".reactionT-first");
const reactionTextSecond = document.querySelector(".reactionT-second");


beginningFace.addEventListener('click',()=>{

    if(reactionFace.classList.contains('reaction')){
        reactionFace.classList.add('active');
        beginningFace.classList.remove('active');

        reactionTextFirst.classList.add('active');
        reactionTextSecond.classList.add('active');
        beginningText.classList.remove('active');
    }

});
@import url('https://fonts.googleapis.com/css2?family=Mr+Dafoe&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Exo:wght@900&display=swap');

body, html {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background-color: #202076;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  perspective: 700px;
  
}

.beginningT {
  display: none;
}

.reactionT-first {
  display:none;
  position: relative;
  font-family: 'Exo';
  font-size: 5em;
  margin: 0;
  transform: skew(-15deg);
  letter-spacing: 0.03em;
}

.reactionT-second{
  display: none;
  font-family: 'Mr Dafoe';
  margin: 0;
  font-size: 5.5em;
  margin-top: -0.6em;
  color: white;
  text-shadow: 0 0 0.05em #fff, 0 0 0.2em #fe05e1, 0 0 0.3em #fe05e1;
  transform: rotate(-7deg);
}

.emoji{
    font-size: 18rem;
    cursor: pointer;
    user-select: none;
    
}


.beginning{
    display: none;
} 

.reaction{
    display: none;
}

.active{
    display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <link rel="stylesheet" href="style.css">

</head>
<body>
    

    <div class="emoji beginning active"></div>
    <div class="emoji reaction"></div>
    
    <div class ="text beginningT active" style="font-size: 2rem; font-style: italic; font-family: Verdana, Geneva, Tahoma, sans-serif; color: #F98299;">My reaction after your joke↑ (click to see it!)</div>
    <div class="text reactionT-first">IT WASN'T</div>
    <div class="text reactionT-second">FUNNY BRO</div>

  




    <script src="app.js"></script>
</body>
</html>

user_24222240
Related