What's new
By:

Javascript

L

loktoy

Established
anu po kaya problima nito

Uncaught TypeError: Cannot read properties of null (reading 'classList')

ito code ko
<?php
$email_addressErr = "Email|phone is not registered!";
echo '<script>
document.getElementById("messageAlert").classList.add("alert-danger");
document.getElementById("messageAlert").style.display = "block";
document.getElementById("messageAlert").innerHTML = "' . $email_addressErr . '";
</script>';

?>
<div id="messageAlert" class="alert alert-danger" style="display:none;"></div>
<script>

document.getElementById("loginButton").addEventListener("click", function() {
document.getElementById("messageAlert").style.display = "none";
document.getElementById("messageAlert").innerHTML = "";
});
</script>
 
The error message you're seeing, "Uncaught TypeError: Cannot read properties of null (reading 'classList')", indicates that you are trying to access the 'classList' property of a null value.

In your code, the error occurs because you are trying to access the 'classList' property of the element with the id "messageAlert" before it exists in the DOM.

To fix this issue, you can move the script block that modifies the "messageAlert" element after the element itself, or alternatively, you can wrap your JavaScript code within a window.onload event listener to ensure that the DOM is fully loaded before accessing elements.

Here's an example of how you can modify your code to fix the error:

PHP: 
<?php
$email_addressErr = "Email|phone is not registered!";
echo '<div id="messageAlert" class="alert alert-danger" style="display:none;"></div>';
echo '<script>
    window.onload = function() {
        document.getElementById("messageAlert").classList.add("alert-danger");
        document.getElementById("messageAlert").style.display = "block";
        document.getElementById("messageAlert").innerHTML = "' . $email_addressErr . '";
    
        document.getElementById("loginButton").addEventListener("click", function() {
            document.getElementById("messageAlert").style.display = "none";
            document.getElementById("messageAlert").innerHTML = "";
        });
    }
</script>';
?>

By wrapping the JavaScript code within the window.onload event listener, you ensure that the code will only be executed once the DOM is fully loaded. This way, you can safely access the "messageAlert" element without encountering the "Cannot read properties of null" error.
 
paano
🤖 said:
The error message you're seeing, "Uncaught TypeError: Cannot read properties of null (reading 'classList')", indicates that you are trying to access the 'classList' property of a null value.

In your code, the error occurs because you are trying to access the 'classList' property of the element with the id "messageAlert" before it exists in the DOM.

To fix this issue, you can move the script block that modifies the "messageAlert" element after the element itself, or alternatively, you can wrap your JavaScript code within a window.onload event listener to ensure that the DOM is fully loaded before accessing elements.

Here's an example of how you can modify your code to fix the error:

PHP: 
<?php
$email_addressErr = "Email|phone is not registered!";
echo '<div id="messageAlert" class="alert alert-danger" style="display:none;"></div>';
echo '<script>
    window.onload = function() {
        document.getElementById("messageAlert").classList.add("alert-danger");
        document.getElementById("messageAlert").style.display = "block";
        document.getElementById("messageAlert").innerHTML = "' . $email_addressErr . '";
   
        document.getElementById("loginButton").addEventListener("click", function() {
            document.getElementById("messageAlert").style.display = "none";
            document.getElementById("messageAlert").innerHTML = "";
        });
    }
</script>';
?>

By wrapping the JavaScript code within the window.onload event listener, you ensure that the code will only be executed once the DOM is fully loaded. This way, you can safely access the "messageAlert" element without encountering the "Cannot read properties of null" error.
Click to expand...
paano nman po sya ma sstyle po mapaliit yun size ng output nya
 
loktoy said:
paano nman po sya ma sstyle po mapaliit yun size ng output nya
Click to expand...
To make the size of the output smaller, you can apply CSS styles to the "messageAlert" element. Here's an example of how you can modify your code to make the output smaller:

PHP: 
<?php
$email_addressErr = "Email|phone is not registered!";
echo '<div id="messageAlert" class="alert alert-danger" style="display:none; font-size: 12px;"></div>';
echo '<script>
    window.onload = function() {
        document.getElementById("messageAlert").classList.add("alert-danger");
        document.getElementById("messageAlert").style.display = "block";
        document.getElementById("messageAlert").innerHTML = "' . $email_addressErr . '";
   
        document.getElementById("loginButton").addEventListener("click", function() {
            document.getElementById("messageAlert").style.display = "none";
            document.getElementById("messageAlert").innerHTML = "";
        });
    }
</script>';
?>

In the above code, I added the "font-size: 12px;" style to the "messageAlert" element to make the text appear smaller. You can adjust the value (12px) according to your preference to make the output size smaller or larger.

Feel free to modify the CSS styles within the "style" attribute of the "messageAlert" element to achieve the desired appearance.
 
🤖 said:
To make the size of the output smaller, you can apply CSS styles to the "messageAlert" element. Here's an example of how you can modify your code to make the output smaller:

PHP: 
<?php
$email_addressErr = "Email|phone is not registered!";
echo '<div id="messageAlert" class="alert alert-danger" style="display:none; font-size: 12px;"></div>';
echo '<script>
    window.onload = function() {
        document.getElementById("messageAlert").classList.add("alert-danger");
        document.getElementById("messageAlert").style.display = "block";
        document.getElementById("messageAlert").innerHTML = "' . $email_addressErr . '";
  
        document.getElementById("loginButton").addEventListener("click", function() {
            document.getElementById("messageAlert").style.display = "none";
            document.getElementById("messageAlert").innerHTML = "";
        });
    }
</script>';
?>

In the above code, I added the "font-size: 12px;" style to the "messageAlert" element to make the text appear smaller. You can adjust the value (12px) according to your preference to make the output size smaller or larger.

Feel free to modify the CSS styles within the "style" attribute of the "messageAlert" element to achieve the desired appearance.
Click to expand...
dito po kaya pano ko sya malalagyan ng message na success to log in

if ($db_user_type == '1') {
header("Location: admin/dashboard.php");
exit(); // Don't forget to exit after redirecting
} else {
header("Location: user/voucher.php");

exit(); // Don't forget to exit after redirecting
}
 
loktoy said:
dito po kaya pano ko sya malalagyan ng message na success to log in

if ($db_user_type == '1') {
header("Location: admin/dashboard.php");
exit(); // Don't forget to exit after redirecting
} else {
header("Location: user/voucher.php");

exit(); // Don't forget to exit after redirecting
}
Click to expand...
To display a success message after logging in, you can pass a query parameter in the URL when redirecting to the desired page. Then, on the destination page, you can check for the presence of the query parameter and display the appropriate message.

Here's an example of how you can modify your code to display a success message after logging in:

PHP: 
if ($db_user_type == '1') {
    header("Location: admin/dashboard.php?login=success");
    exit(); // Don't forget to exit after redirecting
} else {
    header("Location: user/voucher.php?login=success");
    exit(); // Don't forget to exit after redirecting
}

In the example above, the query parameter login=success is added to the URL. Adjust the URL and query parameter as needed.

Next, on the destination page (e.g., admin/dashboard.php or user/voucher.php), you can retrieve the query parameter and display the success message accordingly. Here's an example:

PHP: 
<?php
if (isset($_GET['login']) && $_GET['login'] == 'success') {
    echo '<div class="alert alert-success">Login successful!</div>';
}
?>

In this example, the success message is displayed inside a <div> element with the class "alert-success". You can modify the HTML and CSS according to your needs to style the success message as desired.
 
🤖 said:
To display a success message after logging in, you can pass a query parameter in the URL when redirecting to the desired page. Then, on the destination page, you can check for the presence of the query parameter and display the appropriate message.

Here's an example of how you can modify your code to display a success message after logging in:

PHP: 
if ($db_user_type == '1') {
    header("Location: admin/dashboard.php?login=success");
    exit(); // Don't forget to exit after redirecting
} else {
    header("Location: user/voucher.php?login=success");
    exit(); // Don't forget to exit after redirecting
}

In the example above, the query parameter login=success is added to the URL. Adjust the URL and query parameter as needed.

Next, on the destination page (e.g., admin/dashboard.php or user/voucher.php), you can retrieve the query parameter and display the success message accordingly. Here's an example:

PHP: 
<?php
if (isset($_GET['login']) && $_GET['login'] == 'success') {
    echo '<div class="alert alert-success">Login successful!</div>';
}
?>

In this example, the success message is displayed inside a <div> element with the class "alert-success". You can modify the HTML and CSS according to your needs to style the success message as desired.
Click to expand...
🤖 said:
The error message you're seeing, "Uncaught TypeError: Cannot read properties of null (reading 'classList')", indicates that you are trying to access the 'classList' property of a null value.

In your code, the error occurs because you are trying to access the 'classList' property of the element with the id "messageAlert" before it exists in the DOM.

To fix this issue, you can move the script block that modifies the "messageAlert" element after the element itself, or alternatively, you can wrap your JavaScript code within a window.onload event listener to ensure that the DOM is fully loaded before accessing elements.

Here's an example of how you can modify your code to fix the error:

PHP: 
<?php
$email_addressErr = "Email|phone is not registered!";
echo '<div id="messageAlert" class="alert alert-danger" style="display:none;"></div>';
echo '<script>
    window.onload = function() {
        document.getElementById("messageAlert").classList.add("alert-danger");
        document.getElementById("messageAlert").style.display = "block";
        document.getElementById("messageAlert").innerHTML = "' . $email_addressErr . '";
   
        document.getElementById("loginButton").addEventListener("click", function() {
            document.getElementById("messageAlert").style.display = "none";
            document.getElementById("messageAlert").innerHTML = "";
        });
    }
</script>';
?>

By wrapping the JavaScript code within the window.onload event listener, you ensure that the code will only be executed once the DOM is fully loaded. This way, you can safely access the "messageAlert" element without encountering the "Cannot read properties of null" error.
Click to expand...
pano ko po pala matatanggal kasi po kahit irefresh ko di po nawawala yun message alert
 
To remove the message alert when the page is refreshed, you can modify your code to clear the message when the page loads.

Here's an example of how you can achieve that:

PHP: 
<?php
$email_addressErr = "Email|phone is not registered!";
echo '<div id="messageAlert" class="alert alert-danger" style="display:none;"></div>';
echo '<script>
    window.onload = function() {
        var messageAlert = document.getElementById("messageAlert");
        messageAlert.classList.add("alert-danger");
        messageAlert.style.display = "block";
        messageAlert.innerHTML = "' . $email_addressErr . '";
   
        var loginButton = document.getElementById("loginButton");
        loginButton.addEventListener("click", function() {
            messageAlert.style.display = "none";
            messageAlert.innerHTML = "";
        });
        
        // Clear the message when the page is refreshed
        window.addEventListener("beforeunload", function() {
            messageAlert.style.display = "none";
            messageAlert.innerHTML = "";
        });
    }
</script>';
?>

In this example, the window.addEventListener("beforeunload") event is used to clear the message when the page is refreshed. The event listener is triggered before the page is unloaded, allowing you to remove the message and clear its contents.

By adding this event listener, the message alert will be cleared every time the page is refreshed, ensuring that it is not displayed again after the page reloads.

loktoy said:
pano ko po pala matatanggal kasi po kahit irefresh ko di po nawawala yun message alert
Click to expand...
To remove the message alert when the page is refreshed, you can modify your code to clear the message when the page loads.

Here's an example of how you can achieve that:

PHP: 
<?php
$email_addressErr = "Email|phone is not registered!";
echo '<div id="messageAlert" class="alert alert-danger" style="display:none;"></div>';
echo '<script>
    window.onload = function() {
        var messageAlert = document.getElementById("messageAlert");
        messageAlert.classList.add("alert-danger");
        messageAlert.style.display = "block";
        messageAlert.innerHTML = "' . $email_addressErr . '";
   
        var loginButton = document.getElementById("loginButton");
        loginButton.addEventListener("click", function() {
            messageAlert.style.display = "none";
            messageAlert.innerHTML = "";
        });
        
        // Clear the message when the page is refreshed
        window.addEventListener("beforeunload", function() {
            messageAlert.style.display = "none";
            messageAlert.innerHTML = "";
        });
    }
</script>';
?>

In this example, the window.addEventListener("beforeunload") event is used to clear the message when the page is refreshed. The event listener is triggered before the page is unloaded, allowing you to remove the message and clear its contents.

By adding this event listener, the message alert will be cleared every time the page is refreshed, ensuring that it is not displayed again after the page reloads.
 
🤖 said:
To remove the message alert when the page is refreshed, you can modify your code to clear the message when the page loads.

Here's an example of how you can achieve that:

PHP: 
<?php
$email_addressErr = "Email|phone is not registered!";
echo '<div id="messageAlert" class="alert alert-danger" style="display:none;"></div>';
echo '<script>
    window.onload = function() {
        var messageAlert = document.getElementById("messageAlert");
        messageAlert.classList.add("alert-danger");
        messageAlert.style.display = "block";
        messageAlert.innerHTML = "' . $email_addressErr . '";
  
        var loginButton = document.getElementById("loginButton");
        loginButton.addEventListener("click", function() {
            messageAlert.style.display = "none";
            messageAlert.innerHTML = "";
        });
       
        // Clear the message when the page is refreshed
        window.addEventListener("beforeunload", function() {
            messageAlert.style.display = "none";
            messageAlert.innerHTML = "";
        });
    }
</script>';
?>

In this example, the window.addEventListener("beforeunload") event is used to clear the message when the page is refreshed. The event listener is triggered before the page is unloaded, allowing you to remove the message and clear its contents.

By adding this event listener, the message alert will be cleared every time the page is refreshed, ensuring that it is not displayed again after the page reloads.


To remove the message alert when the page is refreshed, you can modify your code to clear the message when the page loads.

Here's an example of how you can achieve that:

PHP: 
<?php
$email_addressErr = "Email|phone is not registered!";
echo '<div id="messageAlert" class="alert alert-danger" style="display:none;"></div>';
echo '<script>
    window.onload = function() {
        var messageAlert = document.getElementById("messageAlert");
        messageAlert.classList.add("alert-danger");
        messageAlert.style.display = "block";
        messageAlert.innerHTML = "' . $email_addressErr . '";
  
        var loginButton = document.getElementById("loginButton");
        loginButton.addEventListener("click", function() {
            messageAlert.style.display = "none";
            messageAlert.innerHTML = "";
        });
       
        // Clear the message when the page is refreshed
        window.addEventListener("beforeunload", function() {
            messageAlert.style.display = "none";
            messageAlert.innerHTML = "";
        });
    }
</script>';
?>

In this example, the window.addEventListener("beforeunload") event is used to clear the message when the page is refreshed. The event listener is triggered before the page is unloaded, allowing you to remove the message and clear its contents.

By adding this event listener, the message alert will be cleared every time the page is refreshed, ensuring that it is not displayed again after the page reload
Click to expand...
di po nagpakita yun message na success po

<?php
include "./config/config.php";
$email_address = $password = '';
$email_addressErr = $passwordErr = '';
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
if (empty($_POST['email'])) {
$email_addressErr = "Email|phone is required!";
} else {
$email_address = $_POST['email'];
}
if (empty($_POST['password'])) {
$passwordErr = "Password is required!";
} else {
$password = $_POST['password'];
}
if ($email_address && $password) { // Correct the variable name from $username to $email_address
$check_email = mysqli_query($con, "SELECT * FROM registration WHERE email_address = '$email_address'");
$check_email_row = mysqli_num_rows($check_email);
if ($check_email_row > 0) {
while ($row = mysqli_fetch_assoc($check_email)) {
$user_id = $row['user_id'];
$db_password = $row['password'];
$db_user_type = $row['user_type'];
if ($password == $db_password) {
session_start();
$_SESSION['user_id'] = $user_id;
if ($db_user_type == '1') {
header("Location: admin/dashboard.php?login=success");
exit(); // Don't forget to exit after redirecting
} else {
header("Location: user/voucher.php?login=success");

exit(); // Don't forget to exit after redirecting
}

if (isset($_GET['login']) && $_GET['login'] == 'success') {
echo '<div class="alert alert-success">Login successful!</div>';
}
 

Similar threads

About this Thread

  • 8
    Replies
  • 572
    Views
  • 1
    Participants
Last reply from:
loktoy

New Topics

Trending Topics

Online now

Members online
1,180
Guests online
1,435
Total visitors
2,615

Forum statistics

Threads
2,273,447
Posts
28,949,561
Members
1,235,749
Latest member
hhu677
Back
Top