Why is Javascript button not working?

Question

The effect I am trying to achieve is that when I click a button (called about), one of the div (id=homepage) gets hidden and another div (id=intro_page, which was previously hidden) is made visible.

I have the following HTML code:

<script type="text/javascript" src='js/index_script.js'></script> . . <input onclick="clicked_about()" type="button" value='About'></input> . . . <div id="homepage"> content </div> <div id="intro_page" style="display: none"> <h1 id="intro_page_caption"> About Me </h1> <div id="intro_main_text"> <p> I enjoy reading, swimming, jogging, painting and exploring. </p> </div> <div class="intro_pic1"> <figure> <img src="img/my_picture.jpg" alt="My Picture" height="250"> <figcaption>My Picture</figcaption> </figure> </div> </div>

Following is the JavaScript Code:

function clicked_about(){ document.getElementById(homepage).style.display = 'none'; document.getElementById(intro_page).style.display = 'block'; }

What I am seeing is that the code is hidden (because in HTML display is set to none), but when I click the button, nothing happens.

What am I doing wrong?

Sirko · Accepted Answer · 2015-07-23 09:18:16Z

The parameter to getElementById() is a string. So assuming you did not set some (global) variables homepage and intro_page, your clicked_about() function should look like this:

function clicked_about(){ document.getElementById('homepage').style.display = 'none'; document.getElementById('intro_page').style.display = 'block'; }

@Strukt With just changing the function as I mentioned, but using an <input> or a <button> element with the onclick attribute works: jsfiddle.net/db6gp31p However, I think, that assigning the callback using JS code is better. But in that case use addEventListener() and not the onclick property.

Shehroz Ahmed · Accepted Answer · 2015-07-23 09:24:26Z

I did some changes in your code check this :)

window.onload = function(){ var mybutton = document.getElementById("mybutton"); mybutton.addEventListener("click",function(){ document.getElementById("homepage").style.display = 'none'; document.getElementById("intro_page").style.display = 'block'; }); }

<button id="mybutton" type="button">About</button> <div id="homepage"> content </div> <div id="intro_page" style="display: none"> <h1 id="intro_page_caption"> About Me </h1> <div id="intro_main_text"> <p> I enjoy reading, swimming, jogging, painting and exploring. </p> </div> <div class="intro_pic1"> <figure> <img src="img/my_picture.jpg" alt="My Picture" height="250"> <figcaption>My Picture</figcaption> </figure> </div> </div>

xlecoustillier · Accepted Answer · 2015-07-23 09:18:13Z

Just enclose the ids in quotes:

function clicked_about(){ document.getElementById("homepage").style.display = 'none'; document.getElementById("intro_page").style.display = 'block'; }

Otherwise homepage and intro_page are variables, and therefore undefined, unless you previously defined them elsewhere.

Ajay Narain Mathur · Accepted Answer · 2015-07-23 09:19:36Z

The function getElementById accepts parameter in string format. Wrap you Id in " and it will work

function clicked_about() { document.getElementById("homepage").style.display = 'none'; document.getElementById("intro_page").style.display = 'block'; // missing quotes here }

<button onclick="javascript:clicked_about()" type="button">About</button> <div id="homepage"> content </div> <div id="intro_page" style="display: none"> <h1 id="intro_page_caption"> About Me </h1> <div id="intro_main_text"> <p>I enjoy reading, swimming, jogging, painting and exploring.</p> </div> <div class="intro_pic1"> <figure> <img src="img/my_picture.jpg" alt="My Picture" height="250"> <figcaption>My Picture</figcaption> </figure> </div> </div>

3pic · Accepted Answer · 2015-07-23 09:33:05Z

Very simple

document.getElementById("btn").onclick=function(){clicked_about();};

with

<button id="btn">About</button>

here is a JFiddle https://jsfiddle.net/upujp2q9/

Collectives™ on Stack Overflow

Why is Javascript button not working?

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Linked

Related