I work on php and javascript. Now I want to call the javascript functionalities in my php code but it is now working. the code of php that execute the javascript code is
echo '<script type="text/javascript">
alert( document.getElementById("popup"));
document.getElementById("popup").style.display = "block";
document.getElementById("popup").classList.toggle("active");
</script>';
but the alert gives a null value and does not execute the code of html. the code of html is
<div class="popup" id="popup">
<div class="overlay"></div>
<div class="content">
<!-- <div class="close-btn" onclick="closePopup()">×</div> -->
<div class="row">
<div class="col-lg-12 col-md-9 col-sm-12">
<img width="200" height="200" src="https://cdn.dribbble.com/users/2469324/screenshots/6538803/comp_3.gif">
<h2 id="errorHead">fields are required</h2>
<p id="errorMessage">
All fields are required. fill all fields
</p>
<button style="background-color: darkgreen; width: 130px; margin-top: 5%;" class="btn btn-success radiusChange backgroundChange" onclick="closePopup()"> Close</button>
</div>
</div>
</div>
</div>
how I execute this code, basically it is the popup that I want to run. please give the way to solve this problem.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Call JS Code</title>
<?php
echo '<script type="text/javascript">
alert("Execute Javascript Code");
</script>';
?>
</head>
<body>
</body>
</html>You have to wait for the document to be completely loaded before accessing its nodes.
May you try echoing the following ? You should get the #errorMessage content, ie you are now able to access the popup node and do your stuff
<script type="text/javascript">
window.onload = () => {
alert(document.getElementById("popup").querySelector("#errorMessage").innerText);
//you can deal with the popup node :)
};
</script>