2017-04-12 88 views
0

我試圖讓標題在「Board Certified整形外科醫生,Landon Keith」和「Landon Keith,董事會認證的整形外科醫生」之間切換,但沒有任何事情發生,它看起來像onload功能未運行Javascript onload功能未運行

Ex。當我點擊圖片時,頭部顯示會顯示「Board Certified整形外科醫生Landon Keith」,當我再次點擊圖片時,應該說「Board Certified整形外科醫生,Landon Keith」等等。

我的代碼如下:

var p = document.getElementById('pic'); 
 
    var h = document.getElementById('head'); 
 
    alert("oh"); 
 
    window.onload=function(){ 
 
    \t alert("inonload"); // This alert function is not showing up 
 
    
 
    \t p.onclick = function(){ 
 
    \t \t if (sessionStorage["clicked"] == "true"){ 
 
    \t \t \t alert ("if"); 
 
    \t \t \t sessionStorage["clicked"] = "false"; 
 
    \t \t \t h.innerHTML = "Board Certified Plastic Surgeon, Landon Keith"; 
 
    \t \t }else{ 
 
    \t \t \t alert ("else"); 
 
    \t \t \t sessionStorage["clicked"] = "true"; 
 
    \t \t \t h.innerHTML = "Landon Keith, Board Certified Plastic Surgeon"; 
 
    \t \t } 
 
    \t }; 
 
    }; 
 
    
 
    alert("end");
body{ 
 
    \t margin-bottom: 100px; 
 
    \t margin-right: 20px; 
 
    \t margin-left: 20px; 
 
    \t margin-top: 10px; 
 
    \t background-color: green; 
 
    \t font-family:Helvetica; 
 
    } 
 
    
 
    .navBar { 
 
    \t background-colour: red; 
 
    \t 
 
    } 
 
    
 
    #pagewrap { 
 
    \t background-color: yellow; 
 
    \t height: 280px; 
 
    \t width: 640px; 
 
    \t margin-left: auto; 
 
    \t margin-right: auto; 
 
    \t padding-top: 25px; 
 
    } 
 
    
 
    ul { 
 
    \t padding-left: 10px; 
 
    \t background-color: red; 
 
    \t list-style: none; 
 
    } 
 
    
 
    ul li { 
 
    \t display: inline; 
 
    } 
 
    
 
    ul li a { 
 
    \t text-decoration:none; 
 
    \t color:white; 
 
    } 
 
    
 
    img { 
 
    \t float: right; 
 
    \t padding-right: 20px; 
 
    } 
 
    
 
    h1 { 
 
    \t margin-left: 25px; 
 
    \t font-size: 14pt; 
 
    } 
 
    
 
    ol { 
 
    \t margin-left: 25px; 
 
    } 
 
    
 
    p { 
 
    \t 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()"> 
 
    \t <div id=pagewrap> 
 
    \t \t <img id="pic" src=image.png></img> 
 
    \t \t <ul> 
 
    \t \t \t <li class="navBarItem"><a href="#3">Reconstructive Surgery</a></li> 
 
    \t \t \t <li class="navBarItem"><a href="#4">Cosmetic Surgery</a></li> 
 
    \t \t \t <li class="navBarItem"><a href="#5">Awards</a></li> 
 
    \t \t \t <li class="navBarItem"><a href="#6">Testimonials</a></li> 
 
    \t \t </ul> 
 
    \t \t 
 
    \t \t <h1 id="head" >Landon Keith, Board Certified Plastic Surgery</h1> 
 
    \t \t <ol> 
 
    \t \t \t <li> M.D., <a href="#1"> University of SomeState></a></li> 
 
    \t \t \t <li> Specialization. <a href="#2"> John Hide></a></li> 
 
    \t \t </ol> 
 
    \t \t <p> 
 
    \t \t \t Keith and Company<BR> 
 
    \t \t \t 111 Street Name<BR> 
 
    \t \t \t Town, State, Postal Code<BR> 
 
    \t \t </p> 
 
    \t </div> 
 
    \t 
 
    </body>

+0

您的代碼是否達到'結束'提醒?你還可以檢查控制檯,看看是否有任何錯誤? –

+0

你在控制檯上看到任何錯誤嗎?在chrome上按F12來查看控制檯 –

+1

很確定onload =「init()」覆蓋window.onload = function(){} – emed

回答

2

你的body元素上內嵌onload處理程序被覆蓋在你的JavaScript文件onload(就是前面加載)。從body標記中刪除onload=init(),您的外部代碼將會運行。