Javascript 没有 onload 函数运行

Question

我试图让 header 在 "Board Certified Plastic Surgeon, Landon Keith" 和 "Landon Keith, Board Certified Plastic Surgeon" 这两个词之间切换，但什么也没发生，看起来 onload 函数没有运行

例如。当我单击图像时，header 显示 "Landon Keith, Board Certified Plastic Surgeon"，当我再次单击图像时，它应该显示 "Board Certified Plastic Surgeon, Landon Keith" 等等。

我的代码如下：

    var p = document.getElementById('pic');
    var h = document.getElementById('head');
    alert("oh");
    window.onload=function(){
     alert("inonload");  // This alert function is not showing up
    
     p.onclick = function(){
      if (sessionStorage["clicked"] == "true"){
       alert ("if");
       sessionStorage["clicked"] = "false";
       h.innerHTML = "Board Certified Plastic Surgeon, Landon Keith";
      }else{
       alert ("else");
       sessionStorage["clicked"] = "true";
       h.innerHTML = "Landon Keith, Board Certified Plastic Surgeon";
      }
     };
    };
    
    alert("end");

    body{
     margin-bottom: 100px;
     margin-right: 20px;
     margin-left: 20px;
     margin-top: 10px;
     background-color: green;
     font-family:Helvetica;
    }
    
    .navBar {
     background-colour: red;
     
    }
    
    #pagewrap {
     background-color: yellow;
     height: 280px;
     width: 640px;
     margin-left: auto;
     margin-right: auto;
     padding-top: 25px;
    }
    
    ul {
     padding-left: 10px;
     background-color: red;
     list-style: none;
    }
    
    ul li {
     display: inline;
    }
    
    ul li a {
     text-decoration:none;
     color:white;
    }
    
    img {
     float: right;
     padding-right: 20px;
    }
    
    h1 {
     margin-left: 25px;
     font-size: 14pt;
    }
    
    ol {
     margin-left: 25px;
    }
    
    p {
     margin-left: 25px;
    }

  <!DOCTYPE html>
    <html>
    <head>
    <title>Keith and Company</title>
    <link rel="stylesheet" type="text/css" href="css.css">
    <script src='js.js'></script>
    </head>
    <body onload="init()">
     <div id=pagewrap>
      <img id="pic" src=image.png></img>
      <ul>
       <li class="navBarItem"><a href="#3">Reconstructive Surgery</a></li>
       <li class="navBarItem"><a href="#4">Cosmetic Surgery</a></li>
       <li class="navBarItem"><a href="#5">Awards</a></li>
       <li class="navBarItem"><a href="#6">Testimonials</a></li>
      </ul>
      
      <h1 id="head" >Landon Keith, Board Certified Plastic Surgery</h1>
      <ol>
       <li> M.D., <a href="#1"> University of SomeState></a></li>
       <li> Specialization. <a href="#2"> John Hide></a></li>
      </ol>
      <p>
       Keith and Company<BR>
       111 Street Name<BR>
       Town, State, Postal Code<BR>
      </p>
     </div>
     
    </body>

Answer 1

body 元素上的内联 onload 处理程序正在覆盖 JavaScript 文件（较早加载）中的 onload。从您的 body 标签中删除 onload=init()，您的外部代码将运行。

Javascript 没有 onload 函数运行

Javascript onload function not running

html

javascript

function

onclick

onload

Javascript 没有 onload 函数 运行

Javascript onload function not running

html

javascript

function

onclick

onload

Javascript 没有 onload 函数运行