How to Replace and Hide Div Contents Using Javascript

Question

Can you help me to make a javascript function to: (1) show div contents in showarea when the two buttons are clicked, (2) replace content in the showarea if it contains show1/show2 (3) hide the content.

Scenario: When the button SUB button is clicked, it'll show Show1's contents to the ShowArea, but when the DOM button is clicked, it'll replace the contents of ShowArea which is Show1 and display the contents of Show2. But when you click again the DOM button, it will now hide the ShowArea and it's border.

Here is the sample code:

<div id="credentials">
  <div id="user">
    <button id="button" type="button" onclick="Open('Show1');">SUB</button> 
    <br>
    <button type="button" onclick="replace('Show1','Show2')">DOM</button>
  </div>
</div>

<div id="showarea" style="border: 2px solid #365278">
  <div id="studentlogin">
    <div id = "Show1">
        <form name="form" method="get" action="studenthome.html" onclick="replace()" onsubmit="return validateStudent(this)">
            Enter your ID NUMBER<br><input type="text" name="student" id="studentID" /><br>
            <input type="submit" value="Log-in" >       
        </form>
    </div>
  </div>

<div id="facultylogin">
<div id = "Show2">
<form name="form" method="get" action="facultyhome.html" onclick="replace()" onsubmit="return validateFaculty(this)">
Enter your FACULTY ID <br><input type="text" name="faculty" id="facultyID" /><br>
<input type="submit" value="Log-in" >   
</form>

</div>
</div>  
</div>
</div>

These two functions is what I've created. replace function to replace the content and Open to show or hide the div. but the replace() only works for the DOM..

function replace(id,content) { 
var container = document.getElementById(id); 
container.innerHTML = content; 
} 
function Open(idMyDiv){ 
var objDiv = document.getElementById(idMyDiv); 
if(objDiv.style.display == "inline"){ 
objDiv.style.display = "none"; 
} else { 
objDiv.style.display = "inline"; 
}

Thanks

You're going to have better luck if you try a few things first and show what you've tried here. — bvaughn, Mar 30 '15 at 15:31
These two functions is what I've created. replace function to replace the content and Open to show or hide the div. but the replace() only works for the DOM.. function replace(id,content) { var container = document.getElementById(id); container.innerHTML = content; } function Open(idMyDiv){ var objDiv = document.getElementById(idMyDiv); if(objDiv.style.display == "inline"){ objDiv.style.display = "none"; }else{ objDiv.style.display = "inline"; } } — ashe, Mar 30 '15 at 15:33
Similar question has already been answerd here: http://stackoverflow.com/questions/6957443/how-to-display-div-after-click-the-button-in-javascript — Mohammed Mohsin Talukder, Mar 30 '15 at 15:37
Difficult to read code in a comment. Update your original question with the code you've tried ashe. At a glance, it seems like you're using the correct methods/approaches. Prbably just a syntax error. — bvaughn, Mar 30 '15 at 15:38
Similar is also answered here: http://stackoverflow.com/questions/6957443/how-to-display-div-after-click-the-button-in-javascript — Mohammed Mohsin Talukder, Mar 30 '15 at 15:49

score 0 · Answer 1 · answered Mar 30 '15 at 15:35

0

I'm assuming this is 'homework assignment' and thus just going to hint: Node.replaceChild() If you're using a library like jQuery: jQuery.replaceWith()

answered Mar 30 '15 at 15:35

Guru Evi

184
5

Sadly, we're not allowed to use JQuery in this HTML. – ashe Mar 30 '15 at 15:37
That's why I pointed you to Node.replaceChild() which is native JS. The rest should be easy to follow. – Guru Evi Mar 30 '15 at 15:57
does it belong to javascript's library? 'cause we're not also allowed to use Javascript library... – ashe Mar 30 '15 at 16:49
It belongs to the native JavaScript library (it is built-in to JavaScript so it does not use an "external" library). What you are asking: Does it belong to JavaScript, cause we're not allowed to use JavaScript. – Guru Evi Mar 30 '15 at 16:56
because the use of predefined javaScript libraries and frameworks is not allowed. – ashe Mar 30 '15 at 17:32

How to Replace and Hide Div Contents Using Javascript

1 Answers1