javascript code inside php is not able to access the html element. document.getElementById is not working

Question

document.getElementById("n") in the script inside php is not able to access the paragraph with id="n" in html. The inner html of the paragraph is not being changed. I also tried with jQuery but it was not able to change the innerHTML either.

<?php
    $username="root";
    $password="";
    $servername="localhost";
    $database="mydb";
    $conn=mysqli_connect($servername,$username,$password,$database);
    if(!($conn)){
        die(mysqli_connect_error());
    }
    $sql="select passenger from place where source='chennai' and destination='bengaluru'";
    $result=mysqli_query($conn,$sql);
    if(mysqli_num_rows($result)>0){
        echo '<script>document.getElementById("n").innerHTML="Do Something";</script>';
    }
    mysqli_close($conn);
?>
<html>
    <head lang="en-us">
        <title>Cards</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="js/materialize.min.js"></script>
        <script src="jquery-1.11.3.min.js"></script>
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link rel="stylesheet" href="css/materialize.min.css">
        <link rel="stylesheet" href="demo_css.css">
    </head>    
    <body>
        <p id="n"></p>
        <div class="container" id="con">
            <div class="card hoverable">
                <div class="card-content waves-effect waves-block waves-light">
                    <h1 class="card-title activator grey-text text-darken-4" id="content"></h1>
                </div>
                <div class="card-reveal">
                    <span class="card-title grey-text text-darken-4">Passengers<i class="material-icons right">close</i></span>
                </div>
            </div>
        </div>
    </body>
</html>

that's because the js generated by php is executed before the rest of the age is loaded. If you put it underneath the html-block it should work. — Jeff, Sep 25 '15 at 16:08
..and if you are already using jQuery you can use `$(document).ready()` to wait for the rest of the page to be loaded and ready to access. Or use a vanilla js approach like here: http://stackoverflow.com/questions/9899372/pure-javascript-equivalent-to-jquerys-ready-how-to-call-a-function-when-the — Jeff, Sep 25 '15 at 16:14
where is the javascript code? only php and html is listed here — Joseph Duty, Sep 25 '15 at 16:16

score 3 · Accepted Answer · edited May 23 '17 at 11:44

The reason for document.getElementById('n') returning nothing is, that it's executed before the rest of the html (including the element you are trying to get) is loaded.

So you got several options:

Place your javascript underneath the html (best before the closing </html>). That way it will be executed after element is loaded into the DOM.
Use a function that fires when the DOM is loaded and place your js code in there.

2.1. One way to do that is to use jQuery's $(document).ready():

$(document).ready(function() {
    document.getElementById("n").innerHTML="Do Something";
}

2.2. Some vanilla JS ways are described in that SO-Post: pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it

javascript code inside php is not able to access the html element. document.getElementById is not working

1 Answers1