css - Why is Javascript button not working? - Stack Overflow

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?

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?

• javascript
• css
• html

Share Improve this question Follow edited Jul 23, 2015 at 9:18 Matt asked Jul 23, 2015 at 9:14 MattMatt 13322 silver badges1111 bronze badges 0

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

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';
}

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>

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.

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>

Very simple

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

with

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

---

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