I am trying to replace a div with another div when a button is clicked because I want to replace the input area with the results area. When I hide the input section and replace it with the results, then everything else gets messed up because it acts like the results section is not there and other elements overlap it. Is there a way to make the results section a solid element so nothing can overlap it?

Thanks

<div >
 <div  id="inputArea">Input</div>
 <div  id="resultsArea">Results</div>
 <button onclick="showResults()" id="button">Show</button>
 <img src="image.png"> /* this image overlaps the results */
</div>

    .mainSection {
    width: 900px;
    height: 900px;
    border: 9px;
    }
    .inputArea {
    display: block;
    }
    .resultsArea {
    display: none;
    }

function showResults() {
  document.getElementById("inputArea").style.display="none";
  document.getElementById("button").style.display="none";
  document.getElementById("resultsArea").style.display="block";
}

CodePudding user response：

• display:none means that the tag in question will not appear on the page at all
• visibility:hidden means that the tag in question will not appear on the page but it will still take space

function showResults() {
  document.getElementById("inputArea").style.visibility="hidden";
  document.getElementById("button").style.visibility="hidden";
  document.getElementById("resultsArea").style.display="block";
}

CodePudding user response：

you can also use one div and change the innerHtml of it

function showResults() {
  document.getElementById("inputArea").innerHtml = `
  Here type the html you wont
  `;
}