从HTM执行JS函数

Execute JS function from HTM

本文关键字：函数 JS 执行 HTM      更新时间：2023-09-26

我写了一个小函数来显示页面上的当前星期几

   function displayDay(){
      var d = new Date();
      var dy = d.getDay();
      var day = "Day";
      switch(dy){
        case 0:
          day = "Sunday";
          break;
        case 1:
          day = "Monday";
          break;
        case 2:
          day = "Tuesday";
          break;
        case 3:
          day = "Wednesday";
          break;
        case 4:
          day = "Thursday";
          break;
        case 5:
          day = "Friday";
          break;
        case 6:
          day = "Saturday";
          break;
      }
        document.getElementById("display-day").innerHTML = day;  
    }
    displayDay();

Html:Enjoy the rest of your <span id="display-day"></span>

它工作，但在其他页面，没有span#display-day, innerHTML抛出一个错误，并阻止在js文件中执行进一步的功能。

我试图从HTML中执行函数，所以只有一个页面执行这个函数，但它不工作。下面是添加到html

中的代码
<script>
   displayDay();
</script>

和displayDay();当然是从JS文件中删除的。但是它不工作，我找不到任何资源来解释如何以这种方式执行函数，所以如果有人能指导我，我会很感激。

您可以添加如下条件语句:

var element = document.getElementById("display-day");
if (element) {
  element.innerHTML = day; 
}

document.getElementById如果没有找到，则返回null

像这样修改你的脚本标签:

<script>
   if( document.getElementById("display-day") ) displayDay();
</script>

Just put condition

if(document.getElementById("display-day")){
    document.getElementById("display-day").innerHTML = day; 
}

不能正常工作可能有三个原因:

  1. html中的脚本在 js文件之前执行，因此displayDay尚未定义。确保在脚本执行之前声明了函数。
  2. displayDay没有在全局作用域(即窗口)中定义，因此它不能在其容器外访问。var在javascript中是函数作用域，这意味着displayDay是在另一个函数中创建的(这是非常典型的，以避免用脚本的变量污染全局作用域)。要确保displayDay在任何地方都可以访问，请将其定义在任何englobing函数之外或将其附加到window对象:window.displayDay = displayDay;。
  3. 在浏览器实际创建span之前，您试图更新span的内容。为了避免这种情况，请将脚本放在页面的末尾或等待onload事件。

这是一个工作的jsfile。

Enjoy the rest of your <span id="display-day"></span>
<script>
// Replace this script by your js file inclusion.
// It would also work if you put it in the header though it is usually better
// to append all your scripts at the end of the body to avoid delaying the
// page rendering.
(function(){
  function displayDay(){
    var d = new Date();
    var dy = d.getDay();
    var day = "Day";
    switch(dy){
      case 0:
        day = "Sunday";
        break;
      case 1:
        day = "Monday";
        break;
      case 2:
        day = "Tuesday";
        break;
      case 3:
        day = "Wednesday";
        break;
      case 4:
        day = "Thursday";
        break;
      case 5:
        day = "Friday";
        break;
      case 6:
        day = "Saturday";
        break;
    }
    document.getElementById("display-day").innerHTML = day;  
  }
  // displayDay is still only accessible on the parent anonymous function here.
  window.displayDay = displayDay;
  // now we attached it to window so it is accessible everywhere.
}());
</script>
<script>
// This is after the span declaration so I could just execute displayDay. 
// However it is good practice to avoid DOM manipulation while
// the onload event hasn't been received yet. 
window.addEventListener("load", displayDay);
</script>

相关文章：