-1

I used Javascript to darken the screen anytime I click a button and my form shows up, but my form darkens with the screen. I know f I was using CSS, I should use the :not selector but I need to know how to do it on JS. Pls can anyone help.

here is my HTML

<div id="mad" style="display: none; position: fixed; z-index: 100; left: 550px;">

          <div style="color: black; position: absolute; top: 10px; background-color: red; width: 40px; height: 30px; position: absolute; right: -530px; top: -6px; border-radius: 2px; display: flex; justify-content: center; align-items: center;" >X</div>
        <form action="" style="display: flex; justify-content: center; align-items: center; flex-direction: column;  background: #F8573B; height: 750px; width: 500px; z-index: 100; border-radius: 30px;">
        <div class="img" style="height: 250px; width: 250px; border-radius: 50%; background:url(./giit-site_files/nobody2.gif); position: absolute; top: 23px;"></div>
       <div style="position: absolute; top: 300px; display: flex; justify-content: center; align-items: center; flex-direction: column;">
        <input type="text" name="firstname" id="firstname" placeholder="Please input your firstname" style="margin: 10px; width: 380px; height: 25px; border-radius: 10px; border: solid black;">
        <input type="text" name="lastname" id="lastname" placeholder="Please input your lastname" style="margin: 10px; width: 380px; height: 25px; border-radius: 10px; border: solid black;">
 
       <input type="text" name="email" id="email" placeholder="Please input your email" style="margin: 10px; width: 380px; height: 25px; border-radius: 10px; border: solid black;">


        <input type="text" name="course" id="course" placeholder="Please input your course" style="margin: 10px; width: 380px; height: 25px; border-radius: 10px; border: solid black;">
        <input type="text" name="program" id="program" placeholder="Please input your program" style="margin: 10px; width: 380px; height: 25px; border-radius: 10px; border: solid black;">
        <p style="margin: 10px;">Can't decide your program, hit the program decider button <button>HERE</button></p>
        <input type="number" name="duration" id="duration" placeholder="Please input your program duration" style="margin: 10px; width: 380px; height: 25px; border-radius: 10px; border: solid black;">
        <button style="width: 130px; height: 40px; border-radius: 10px; margin-top: 15px; background-color: red; border: hidden; font-size: larger; color: white;" type="submit">SUBMIT</button>
       </div>

        </form>
         </div>

This is the html for the button

<p id="sign_up_here" onclick="myfunc1()">SIGN UP HERE</p>

This is my JS

<script>
   function myfunc1(){
    var mad = document.getElementById("mad")
    var body = document.querySelector('body')
    var nav = document.querySelector('nav')
    mad.style.display = "block"
    body.style.filter = "brightness(20%)"
   }
</script>

I believe if there is a way to use Css not selector in JS but I've searched the internet and couldn't find. I would appreciate if anyone could help me out

Philip Joe Yakubu
  • 1
  • 1
  • Use it in`querySelector` – kelsny Mar 30 '23 at 14:27
  • 1
    Welcome! The `:not` selector won't help you here, since your form is a child of the `body`. What I would recommend is when the form displays, have another element that is placed under the form, but above all other content on the screen. Check out how [Bootstrap Modal](https://getbootstrap.com/docs/5.0/components/modal/) works. – disinfor Mar 30 '23 at 14:28
  • You are applying `brightness(20%)` on the body. Which means you are adjusting the brightness of the body element and all the child elements nested in the body, which is everything including your form. So try instead to use an overlay. Just google "How to create an overlay with html and css" to help you get started. – Jo E. Mar 30 '23 at 14:30
  • Have you searched the internet? I just searched *javascript queryselector not selector* and found this: [How to Select Element That Does Not have Specific Class](https://stackoverflow.com/questions/21975881/how-to-select-element-that-does-not-have-specific-class) - works with any selector not just classes – Peter Krebs Mar 30 '23 at 14:31

1 Answers1

0

put the body content into a div, ex. (div id="body2"), and the div id="mad" out this.

<body 
<div id="body2"
 your page
</div>
<div id="mad" . . . .

<script>
function myfunc1(){
var mad = document.getElementById("mad")
var body = document.querySelector('body2')
var nav = document.querySelector('nav')
mad.style.display = "block"
body.style.filter = "brightness(20%)"
}
</script>
Fábio Moura
  • 1
  • 2