Javascript onload 函数未运行

标签 javascript html function onclick onload

我试图让标题在“委员会认证的整形外科医生,Landon Keith”和“Landon Keith,委员会认证的整形外科医生”之间切换,但没有任何反应,看起来像 onload 函数未运行

例如。当我单击图像时,标题显示“Landon Keith,委员会认证的整形外科医生”,当我再次单击图像时,它应该显示“委员会认证的整形外科医生,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>

最佳答案

body 元素上的内联 onload 处理程序正在覆盖 JavaScript 文件(之前加载的)中的 onload。从 body 标记中删除 onload=init() ,您的外部代码将会运行。

关于Javascript onload 函数未运行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43379158/

相关文章:

html - CSS div 重叠

JavaScript 顶部工具栏

javascript - 20秒内自动提交表格

javascript - 如何根据以下内容决定哪个 promise 执行 then/catch

javascript - 哪个现代 JS 框架允许我使用旧的 XML API?

javascript - 传递带有参数的可选回调函数

javascript - 此 Ajax javascript 代码无法正常工作

javascript - 动态(2 级)Javascript/CSS 加载 IE6

html - 一个http请求可以调用多个css文件吗?

python - 为 groupby 列编写自定义函数