'Javascript: Replace a Shown Div with another Hidden Div with Button onclick

i want to replace a div that is already displayed with another Hidden div with just one click. i don't want it to toggle. below is the code.

<html>

<script type="text/javascript">
function show(elementId) { 
 document.getElementById("surf").style.display="none";
 document.getElementById(elementId).style.display="block";
}
</script>

<div id="mode" style="display: visible;">Display By Default</div>

<div id="surf" style="display: none;">Display On Click</div>
<br/>
<button type="submit" id="submit" onclick="show('surf');" name="submit">Submit</button>
</html>

My desired output should be Display On Click when i click the button.

But right now i'm having both Display By Default and Display On Click showing when i click the button display by default at the top and Display On Click at button. i just want Display By Default to be replaced with Display On Click on same line.

javascripthtmljqueryscript


Solution 1:[1]

You are targeting the wrong element here document.getElementById("surf").style.display="none";. The "surf" should be "mode" instead. This worked for me

function show(elementId) { 
    document.getElementById("mode").style.display="none";
    document.getElementById(elementId).style.display="block";
}
<div id="mode" style="display: visible;">Display By Default</div>
<div id="surf" style="display: none;">Display On Click</div>
<br/>
<button type="submit" id="submit" onclick="show('surf');" name="submit">Submit</button>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 ruleboy21

Related Questions