php中的javascript代码无法访问html元素。 document.getElementById无法正常运作

Question

document.getElementById("n") in the script inside php is not able to access the paragraph with id="n" in html. php内脚本中的document.getElementById("n")无法访问html中id="n"的段落。 The inner html of the paragraph is not being changed. 该段落的内部html未被更改。 I also tried with jQuery but it was not able to change the innerHTML either. 我也尝试使用jQuery，但它也无法更改innerHTML 。

<?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>

Answer 1

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. document.getElementById('n')返回任何内容的原因是，它是在加载其余html（包括您尝试获取的元素）之前执行的。

So you got several options: 因此，您有几种选择：

Place your javascript underneath the html (best before the closing </html> ). 将您的JavaScript放在html下方（最好在</html>结束之前）。 That way it will be executed after element is loaded into the DOM. 这样，它将在元素加载到DOM 后执行。
Use a function that fires when the DOM is loaded and place your js code in there. 使用一个在加载DOM时触发的函数，并将您的js代码放在其中。

2.1. 2.1。 One way to do that is to use jQuery's $(document).ready() : 一种方法是使用jQuery的$(document).ready() ：

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

2.2. 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 SO-Post中描述了一些普通的JS方式：纯JavaScript等效于jQuery的$ .ready（）如何在页面/ dom准备就绪时调用函数

php中的javascript代码无法访问html元素。 document.getElementById无法正常运作

问题描述

1 个解决方案

解决方案1
2 已采纳 2015-09-25 16:30:12

php中的javascript代码无法访问html元素。 document.getElementById无法正常运作

问题描述

1 个解决方案

解决方案1 2 已采纳 2015-09-25 16:30:12

解决方案1
2 已采纳 2015-09-25 16:30:12