5 replies

Add a style with js

Hi everyone

I realise a page with a title and a button when I will clicked on the button a text should appear

But I don' t understand why the text is not appear

<body>
    <h2 class="sous-titre">What is Frontend Mentor, and how will it help me?</h2>
    <button type="button">+</button>
 
    <p class="text">
        <div id="lire1">Frontend Mentor offers realistic coding challenges to help developers improve their 
    frontend coding skills with projects in HTML, CSS, and JavaScript. It's suitable for 
    all levels and ideal for portfolio building.</div>
</p>

    
</body>

<body>
    <h2 class="sous-titre">What is Frontend Mentor, and how will it help me?</h2>
    <button type="button">+</button>
 
    <p class="text">
        <div id="lire1">Frontend Mentor offers realistic coding challenges to help developers improve their 
    frontend coding skills with projects in HTML, CSS, and JavaScript. It's suitable for 
    all levels and ideal for portfolio building.</div>
</p>

    
</body>

JS:

<script>

  const btn=document.querySelector('button');
  const text=document.querySelector('.text');
  const content=document.querySelector('#lire1');
     btn.addEventListener("click",()=>{
         content.classList.toggle("textAppear");
        console.log('pat66')
})
 

  
    </script>

<script>

  const btn=document.querySelector('button');
  const text=document.querySelector('.text');
  const content=document.querySelector('#lire1');
     btn.addEventListener("click",()=>{
         content.classList.toggle("textAppear");
        console.log('pat66')
})
 

  
    </script>

my css:

body{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

#lire1{
   visibility: hidden;
   opacity: 0;
}

.textAppear{
    visibility: visible;
    opacity: 1;
}

body{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

#lire1{
   visibility: hidden;
   opacity: 0;
}

.textAppear{
    visibility: visible;
    opacity: 1;
}

can I have a idea about what is going wrong ?
thanks by advance

KP-C

Kevin Powell - Community•3y ago•

5 replies

Pat66

Add a style with js

Hi everyone

I realise a page with a title and a button when I will clicked on the button a text should appear

But I don' t understand why the text is not appear

<body>
    <h2 class="sous-titre">What is Frontend Mentor, and how will it help me?</h2>
    <button type="button">+</button>
 
    <p class="text">
        <div id="lire1">Frontend Mentor offers realistic coding challenges to help developers improve their 
    frontend coding skills with projects in HTML, CSS, and JavaScript. It's suitable for 
    all levels and ideal for portfolio building.</div>
</p>

    
</body>

<body>
    <h2 class="sous-titre">What is Frontend Mentor, and how will it help me?</h2>
    <button type="button">+</button>
 
    <p class="text">
        <div id="lire1">Frontend Mentor offers realistic coding challenges to help developers improve their 
    frontend coding skills with projects in HTML, CSS, and JavaScript. It's suitable for 
    all levels and ideal for portfolio building.</div>
</p>

    
</body>

JS:

<script>

  const btn=document.querySelector('button');
  const text=document.querySelector('.text');
  const content=document.querySelector('#lire1');
     btn.addEventListener("click",()=>{
         content.classList.toggle("textAppear");
        console.log('pat66')
})
 

  
    </script>

<script>

  const btn=document.querySelector('button');
  const text=document.querySelector('.text');
  const content=document.querySelector('#lire1');
     btn.addEventListener("click",()=>{
         content.classList.toggle("textAppear");
        console.log('pat66')
})
 

  
    </script>

my css:

body{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

#lire1{
   visibility: hidden;
   opacity: 0;
}

.textAppear{
    visibility: visible;
    opacity: 1;
}

body{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

#lire1{
   visibility: hidden;
   opacity: 0;
}

.textAppear{
    visibility: visible;
    opacity: 1;
}

can I have a idea about what is going wrong ?
thanks by advance

Add a style with js

Similar Threads

Add a style with js

Similar Threads

Similar Threads

Similar Threads