How to trigger an HTML element inside a PHP file from an external JS file

Question

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"
    }   
});

Answer 1

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

https://www.w3schools.com/js/js_ajax_intro.asp

Answer 2

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.