I am facing an issue where my form darkens with the screen every time I click a button to show it, using JavaScript. If I were using CSS, I know I could use the :not selector, but I need guidance on how to achieve this in JS. Can anyone assist me?
Below is the HTML code:
<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>
And here is my JavaScript function:
<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 have been trying to find a way to apply the CSS :not selector logic in JavaScript, but haven't had any luck so far. Any help would be greatly appreciated.