I would like to trigger an HTML element within a PHP file from a JS file with an event listener. This is my PHP file:
<?php echo password : is <div style='visibility:visible' id='password'> ".$pass."</div>
<button id='togglePassword'>See</button>"; ?>
and this is my JS file. Obviously I'm using an event listener which pointing on my password and toggle! Here is my JS file:
const toggle = document.getElementById('togglePassword');
const password = document.getElementById('password');
toggle.addEventListener("click", function () {
console.log("test")
if(password.style.visibility==="visible"){
password.style.visibility= "hidden"
}else {
password.style.visibility = "visible"
}
});
If I understand your question correctly it looks like you're trying to get information from the server with such request being triggered from a javascript event. You can try to achieve that with AJAX. With AJAX you can
Read data from a web server - after the page has loaded Update a web page without reloading the page Send data to a web server - in the background
Just echo a script tag with src and the rest of the work is as usual.
<?php
echo "password : is <div style='visibility:visible' id='password'> " . $pass . "</div>
<button id='togglePassword'>See</button>";
echo "<script src='./app.js'></script>"; // you can echo normal html
And in your app.js do your TOGGLE thing.