Struggling to grasp the concept of DOM Event Listeners

Question

Struggling to grasp the concept of DOM Event Listeners

Hello, I have a question regarding some JavaScript code that I am struggling with.

function login() {
    var lgin = document.getElementById("logIn");
    lgin.style.display = "block";
    lgin.style.position = "fixed";
    lgin.style.width = "100%";
    lgin.style.height = "100%";
    lgin.style.paddingTop = "15px";
}

var lgButton = document.getElementById("openRooms");
lgButton.addEventListener("click", login, false);

<p><a href="#" id="openRooms">Log In</a></p>

<section id="logIn">
  <div class="form-style-6">
    <h3>Log In</h3>
    <form>
      <input type="text" name="field1" placeholder="Name" />
      <input type="email" name="field2" placeholder="Email Address" />
      <input type="password" name="field3" placeholder="Password" />
      <input type="submit" value="Submit" />
    </form>
     </div>
</section>

I am facing an issue where the JavaScript code I wrote is not functioning as expected.

If anyone could help me troubleshoot this, I would greatly appreciate it.

javascript html css dom

Answer 1

Answer №1

CSS Styling:

#loginForm.active {
  display: block;
  position: fixed;
  width: 100%;
  height: 100%;
  padding-top: 15%;
}

JavaScript Function:

document.addEventListener("DOMContentLoaded", function(event) { 
   function showLoginForm() {
     document.getElementById("loginForm").setAttribute("class", "active");
   }

   var loginButton = document.getElementById("openLoginPage");
   loginButton.addEventListener("click", showLoginForm, false);
});

Answer 2

CSS Styling:

#loginForm.active {
  display: block;
  position: fixed;
  width: 100%;
  height: 100%;
  padding-top: 15%;
}

JavaScript Function:

document.addEventListener("DOMContentLoaded", function(event) { 
   function showLoginForm() {
     document.getElementById("loginForm").setAttribute("class", "active");
   }

   var loginButton = document.getElementById("openLoginPage");
   loginButton.addEventListener("click", showLoginForm, false);
});

Answer 3

Answer №2

Ensure to attach your event handlers during the window load event.

window.addEventListener("load",function(){
  var btnLogin = document.getElementById("signInButton");
  btnLogin.addEventListener("click", signInUser, false);    
},false);

Answer 4

Ensure to attach your event handlers during the window load event.

window.addEventListener("load",function(){
  var btnLogin = document.getElementById("signInButton");
  btnLogin.addEventListener("click", signInUser, false);    
},false);

Struggling to grasp the concept of DOM Event Listeners

Answer №1

Answer №2

Similar questions

Getting Data from Selected Radio Buttons in AngularJS Using ng-repeat

Is it possible to manipulate content using jQuery?

Console command to change paragraph tag color---Modifying the color

Locate a specific data point within an array of JSON objects

Incorporate the slick-slider functionality smoothly into a WordPress website by utilizing JavaScript

How can you tell if a specific keyboard key is being pressed along with the CTRL button?

Each block in Svelte includes a unique shorthand attribute

I'm experiencing trouble with Shopify as it appears to be failing to execute

Attempting to transpile JavaScript or TypeScript files for compatibility within a Node environment

The API response indicates that the service is currently not accessible

Having trouble bringing in icons from the @mui/icons-material library

Is there a way to update the background dynamically?

Angular 2 communication between parent and child components

Creating images or PDFs from HTML with CSS filters: a guide

No visible changes resulting from the CSS file

Submitting information via jQuery

Trigger a modal from one sibling Angular component to another

Struggling to convert a JSON file into a TableView within a JavaScript application developed with Appcelerator

Navigate to the end of the progress bar once finished

Can fetch be used to retrieve multiple sets of data at once?