Javascript 内容更改 onclick

Question

我是 Js 新手，我正在尝试创建一个带有 2 个按钮的函数。 我想要的是当单击按钮时，移动到另一个内容，并使旧内容消失。

<h3>Was this article helpful?</h3>

<button onclick="yesFunction()">Yes</button>
<button onclick="noFunction()">No</button>

<h3 id="headline"></h3>
<script>
function yesFunction() {
    document.getElementById("headline").innerHTML = "Thank you for your feedback";
}

function noFunction(){
    document.getElementById("headline").innerHTML = "We are sorry for the inconvenience"
}
</script>

例如，当我单击“否”时，我希望内容被替换为此内容，但保留在同一页面上:

  <!-- If no -->
<h4>What went wrong?</h4>
<form>
  <input type="radio" name="options" value="confusing" checked> The information is confusing<br>
  <input type="radio" name="options" value="not working"> The solution doesn`t work<br>
  <input type="radio" name="options" value="incomplete"> The solution is incomplete<br>
  <input type="radio" name="options" value="out of date"> The content is out of date<br>
  <input type="radio" name="options" value="other"> Other(please specify)<br>
  <input type="text" name="optional" placeholder="Optional.." ><br>
</form>
<input type="submit" name="submit" value="Submit">

如果"is"

<!-- If yes -->
<h4>Could we improve this article?</h4>
<input type="text" name="optional" placeholder="Optional.." ><br>
<input type="submit" name="submit" value="Submit">

等等..请帮忙:D

Answer 1

这一定能让你有一个大概的了解；所需要的只是巧妙地使用 css，即 display:none;

document.getElementById("but1").onclick = showYes;
document.getElementById("but2").onclick = showNo;

function showYes() {
   document.getElementById("type2").classList -= " hide"
   document.getElementById("type3").classList += " hide"
}

function showNo() {
   document.getElementById("type3").classList -= " hide"
   document.getElementById("type2").classList += " hide"
}

.hide {
  display:none;
}

<button id="but1">
Yes
</button>
<button id="but2">
No
</button>
<div id="type1">
content 1 .. appears by default
</div>
<div id="type2" class="hide">
content 2 .. Appears when Yes is Clicked
</div>
<div id="type3" class="hide">
content 3 .. Appears when No is Clicked
</div>