Question

我正在使用PHP，html和JavaScript对网站进行编程。单击图标时，我想在div中添加PHP（和html）内容。由于内容安全政策，我必须为JavaScript代码使用外部文件。我已经在另一个有按钮的PHP项目中尝试了该功能，该按钮在该处起作用。我相关的PHP代码是：

<div id="Target" > </div>

    <div class="task-form-add">

        <i class="task-form-add fa fa-plus-circle " id= "btnadd" ></i>

    </div>

具有：

    <script defer="" type="text/javascript" src="/myFolder/inputTask.js?1557323110"></script>

标题中的

。我的Javascript代码是：

function loadNewTask() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("Target").innerHTML += this.responseText;
        }
    };
    xhttp.open("GET", "elements.php", true);
    xhttp.send();
}

document.getElementById("btnadd").addEventListener("click", loadNewTask);

当我单击ID为“ btnadd”的图标时，我希望Elements.php文件中的HTML元素出现在ID为“ Target”的div内。

我将javascript更改为：

    function loadNewTask() {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          document.getElementById("Target").innerHTML += this.responseText;
        }
      };
      xhttp.open("GET", "/fftboard/app/Template/task_creation/show_input-task.php", true);
      xhttp.send();
    }

    function activateListeners(){
      var elementLoaded = checkElementLoaded();
      if(document.readyState == "complete" && typeof(elementLoaded) != 'undefined' && elementLoaded != null) {
      elementLoaded.addEventListener("click", loadNewTask);
    }
    else{
      window.setTimeout(activateListeners, 200);
    }   
    }

    function checkElementLoaded (){
      var elementLoaded = document.getElementById("btnadd");
      var loaded = false;
      if(typeof(elementLoaded) != 'undefined' && elementLoaded != null)
      {
        return elementLoaded;
       }

       return null;
       }


    activateListeners();

因为图标“ btnadd”也已加载到页面。现在我没有收到任何错误，但仍然无法正常工作...

Answer 1

文件的开头可能有<script defer="" type="text/javascript" src="/myFolder/inputTask.js?1557323110"></script>。

您可以将其放在标签附近吗？

问题是您正在搜索尚未加载的元素

Javascript外部文件找不到正确的元素

1 个答案: