How to Replace and Hide Div Contents Using Javascript

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

-------------Problems Reply------------

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()

Category:javascript Views:5 Time:2017-09-03

Related post

Copyright (C) dskims.com, All Rights Reserved.

processed in 0.153 (s). 10 q(s)