Javascript onload function not running

Question

I'm trying to get the header to switch between the words "Board Certified Plastic Surgeon, Landon Keith" and "Landon Keith, Board Certified Plastic Surgeon" but nothing is happening and it looks like the onload function is not running

Ex. When I click the image the header show say "Landon Keith, Board Certified Plastic Surgeon" and when I click the image again it should say "Board Certified Plastic Surgeon, Landon Keith" and so on.

My code is the following:

    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>

Does your code reach to 'end' alert? Can you also check the console to see if there are any errors? — Giorgi Khorguani
– Giorgi Khorguani, Commented Apr 12, 2017 at 20:36
Do you see any error on console? Press F12 on chrome to see the console — let_the_coding_begin
– let_the_coding_begin, Commented Apr 12, 2017 at 20:37
Pretty sure onload="init()" overwrites window.onload=function(){} — emed
– emed, Commented Apr 12, 2017 at 20:37

Scott Marcus · Accepted Answer · 2017-04-12 20:41:16Z

2

Your inline onload handler on the body element is overwriting the onload in your JavaScript file (that is loaded earlier). Remove onload=init() from your body tag and your external code will run.

answered Apr 12, 2017 at 20:41

Scott Marcus

66k6 gold badges54 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Javascript onload function not running

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related