html - Switching between two div elements using Javascript

I have the following code for going from div "mainFrameOne" to div "mainFrameTwo". However, it cannot go back to mainFrameOne after changing to mainFrameTwo. And I want it to be able to keep switching back and forth. How would I best acplish this?

HTML :

<div id="mainFrameOne">
    <p>mainFrameOne</p>
</div>
<div id="mainFrameTwo" style="display:none;">
    <p>mainFrameTwo</p>
</div>
<button onclick="myFunction()">Click me</button>

JS :

function myFunction() { 
    document.getElementById("mainFrameOne").style.display="none"; 
    document.getElementById("mainFrameTwo").style.display="block"; 
}

HTML :

<div id="mainFrameOne">
    <p>mainFrameOne</p>
</div>
<div id="mainFrameTwo" style="display:none;">
    <p>mainFrameTwo</p>
</div>
<button onclick="myFunction()">Click me</button>

JS :

function myFunction() { 
    document.getElementById("mainFrameOne").style.display="none"; 
    document.getElementById("mainFrameTwo").style.display="block"; 
}

Share Improve this question edited Feb 19, 2016 at 9:21 Zakaria Acharki 67.5k15 gold badges78 silver badges106 bronze badges asked Feb 19, 2016 at 9:16 OneMoreQuestion 1,7534 gold badges25 silver badges51 bronze badges

2 Possible duplicate of Toggle display:none style with JavaScript – Clemens Himmer Commented Feb 19, 2016 at 9:20

Add a ment |

1 Answer 1

Sorted by: Reset to default 10

Add condition to check if the div is visible then hide it and show the other one if else do the reverse :

function myFunction() {
   var mainFrameOne = document.getElementById("mainFrameOne"); 
   var mainFrameTwo = document.getElementById("mainFrameTwo");

   mainFrameOne.style.display = (
       mainFrameOne.style.display == "none" ? "block" : "none"); 
   mainFrameTwo.style.display = (
       mainFrameTwo.style.display == "none" ? "block" : "none"); 
}

Hope this helps.

function myFunction() {
   var mainFrameOne = document.getElementById("mainFrameOne"); 
   var mainFrameTwo = document.getElementById("mainFrameTwo");

   mainFrameOne.style.display = (
       mainFrameOne.style.display == "none" ? "block" : "none"); 
   mainFrameTwo.style.display = (
       mainFrameTwo.style.display == "none" ? "block" : "none"); 
}

<div id="mainFrameOne">
    <p>mainFrameOne</p>
</div>
<div id="mainFrameTwo" style="display:none;">
    <p>mainFrameTwo</p>
</div>
<button onclick="myFunction()">Click me</button>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - Switching between two div elements using Javascript - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)