Javascript：使用按钮 onclick 将显示的 Div 替换为另一个隐藏的 Div答案

【问题标题】：Javascript: Replace a Shown Div with another Hidden Div with Button onclickJavascript：使用按钮 onclick 将显示的 Div 替换为另一个隐藏的 Div
【发布时间】：2022-02-11 12:49:42
【问题描述】：

我想用另一个隐藏的 div 替换已经显示的 div，只需单击一下。我不希望它切换。下面是代码。

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

当我点击按钮时，我想要的输出应该是Display On Click。

但是现在当我点击顶部的按钮display by default 和按钮的Display On Click 时，我同时显示Display By Default 和Display On Click。我只想在同一行将Display By Default 替换为Display On Click。

【问题讨论】：

标签： javascript html jquery script

【解决方案1】：

<!DOCTYPE html>
  <html>
  <body>
    <div id="div1" style="display:block">
    <h2>first div</h2>
</div>
<div id="div2" style="display:none">
    <h2>second div</h2>
</div>
<button onclick=show()>click here</button>
</body>
<script>
function show() {
    let div1 = document.querySelector('#div1');
    let div2 = document.querySelector('#div2');

    if (div1.style.display == "block") {
        div1.style.display = "none";
        div2.style.display = "block";
    } else {
        div1.style.display = "block";
        div2.style.display = "none";
    }

  }
</script>
</html>

点击隐藏 div1 并显示 div2，接下来点击隐藏 div2 并显示 div1。

【讨论】：

非常感谢您的工作！

【解决方案2】：

你在这里定位了错误的元素document.getElementById("surf").style.display="none";。 "surf" 应改为 "mode"。这对我有用

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>

【讨论】：

它成功了，我想我没有注意到那个小错误，谢谢@ruleboy21