Kevin Powell - Community•12mo ago

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

3 Replies

Pi, a future fluent jp speaker•12mo ago

Maybe it is because #lire1 is overriden the specificity? Id's have more prioriority than classes

clevermissfox•12mo ago

You can use [id=“lidel”]{visibility: hidden; opacity:0] instead to keep the specificity even with the class. Or give the element a class of .lidel too and use that in your stylesheet https://discord.com/channels/436251713830125568/1196876248643817622/1196876248643817622

Pat66OP•12mo ago

thanks for your message is a code I just found an internet I was trying to add js on it ...I use class

Gaming

Programming

Add a style with js