代码

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

如果“是”

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

即可

＆＃13;

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

＆＃13;

.hide {
  display:none;
}

＆＃13;

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

＆＃13;

Answer 2

尝试：

＆＃13;

var form1 = document.getElementById("form1");
var form2 = document.getElementById("form2");

form1.addEventListener('click', noFunction);
form2.addEventListener('click', yesFunction);

function yesFunction(e) {
    e.preventDefault();
    document.getElementById("headline").innerHTML = "Thank you for your feedback";
    form1.style.visibility = "visible";
    form2.style.visibility = "hidden";
}

function noFunction(e){
    e.preventDefault();
    document.getElementById("headline").innerHTML = "We are sorry for the inconvenience";
    form1.style.visibility = "hidden";
    form2.style.visibility = "visible";
}

＆＃13;

<h2 id="headline"></h2>

<!-- If no -->
<form id="form1">
  <h4>What went wrong?</h4>
  <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>
  <input type="submit" name="submit" value="Submit">
</form>

<!-- If yes -->
<form id="form2">
  <h4>Could we improve this article?</h4>
  <input type="text" name="optional" placeholder="Optional.." ><br>
  <input type="submit" name="submit" value="Submit">
</form>

＆＃13;

如果您不希望隐藏的DOM保留在页面上，请尝试使用 form1.style.display = 'none'

Answer 3

这可以通过一点点JS和CSS轻松完成，您可以做的是，将div中的 YES 内容和 NO 封装在具有特定ID的div中，并在yesFucntion中删除yes div的隐藏类，同样的事情为没有div

代码

你的html可能看起来像这样：

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

你的JS：

function yesFunction() {
  document.getElementById("headline").innerHTML = "Thank you for your feedback";

  var d = document.getElementById("yes_section");
  d.className = d.className.replace('hidden','');
}

对于CSS：

你可以做一些像

这样的事情

.hidden {
   display: none;
}

Answer 4

您可以让它们被div包围并更改元素的可见性，如下所示：

＆＃13;

    <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";
		document.getElementById("noelement").hidden = true;
		document.getElementById("yeselement").hidden = false;
    }

    function noFunction(){
        document.getElementById("headline").innerHTML = "We are sorry for the inconvenience"
		document.getElementById("yeselement").hidden = true;
		document.getElementById("noelement").hidden = false;
    }
    </script>

    <div id="noelement" hidden>
		<!-- 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">
    </div>
    
    
    <div id="yeselement" hidden>
		<!-- If yes -->
		<h4>Could we improve this article?</h4>
		<input type="text" name="optional" placeholder="Optional.." ><br>
		<input type="submit" name="submit" value="Submit">
    </div>

＆＃13;

Answer 5

Well首先在yes或no块中添加两个id，如下所示。并替换脚本片段内的java脚本片段。希望它会奏效。

function yesFunction() {
  document.getElementById("headline").innerHTML = "Thank you for your feedback";
  document.getElementById("show-in-no").style.display = "none";
  document.getElementById("show-in-yes").style.display = "block";
}

function noFunction() {
  document.getElementById("headline").innerHTML = "We are sorry for the inconvenience";
  document.getElementById("show-in-yes").style.display = "none";
  document.getElementById("show-in-no").style.display = "block";
}

#show-in-yes,
#show-in-no {
  display: none;
}

<h3>Was this article helpful?</h3>

<button onclick="yesFunction()">Yes</button>
<button onclick="noFunction()">No</button>

<h3 id="headline"></h3>

<div id="show-in-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">
</div>
<!-- If yes -->
<div id="show-in-yes">
  <h4>Could we improve this article?</h4>
  <input type="text" name="optional" placeholder="Optional.."><br>
  <input type="submit" name="submit" value="Submit">
</div>

Javascript内容更改onclick

5 个答案:

代码