尝试显示隐藏文字，文字不断消失答案

【问题标题】：Attempt to display hidden text, text keeps disappearing尝试显示隐藏文字，文字不断消失
【发布时间】：2021-07-24 18:30:58
【问题描述】：

我正在尝试显示某一天 - 取决于单击的按钮。理想情况下，我会使用无线电输入 3 天，但按钮让我更接近。当我单击一个按钮时，文本出现然后很快消失。显然我做错了什么。 TIA，马克

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Document</title>
 </head>
 <body>

<form>
<button onclick="changeDay('thu');" style="width: 100%"> Thursday Performance</button><br>
<button onclick="changeDay('fri');" style="width: 100%"> Friday Performance</button><br>
<button onclick="changeDay('sat');" style="width: 100%"> Saturday Performance</button><br>

 <div id="thu" style="display:none;">
    This is Thursday
    </div>
 <div id="fri" style="display:none;">
    This is Friday
    </div>
 <div id="sat" style="display:none;">
    This is Saturday
    </div>

<script language="JavaScript">

function changeDay(show_day) {
    document.getElementById('thu').style.display = "none";
    document.getElementById('fri').style.display = "none";
    document.getElementById('sat').style.display = "none";
    document.getElementById(show_day).style.display = "block";
}
</script>
 </body>
</html>

【问题讨论】：

删除表单标签就可以了
谢谢！（我现在觉得有点傻）。如何将您的答案标记为正确？

标签： javascript html display

【解决方案1】：

这是因为您将按钮包装在 <form> 标记内，而且它也没有关闭。

我不确定，但我认为因为您将按钮包装在表单中，当您单击按钮时，表单会尝试提交数据，并且由于未正确设置它会重定向导致错误 404 在我的测试。

在这种情况下你不需要使用表单，当你只是调用操作数据的函数时，通常在发送数据时使用表单。

MDN Docs on form - The HTML form element represents a document section containing interactive controls for submitting information.

不带表单标签的截图

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Document</title>
 </head>
 <body>

<button onclick="changeDay('thu');" style="width: 100%"> Thursday Performance</button><br>
<button onclick="changeDay('fri');" style="width: 100%"> Friday Performance</button><br>
<button onclick="changeDay('sat');" style="width: 100%"> Saturday Performance</button><br>

 <div id="thu" style="display:none;">
    This is Thursday
    </div>
 <div id="fri" style="display:none;">
    This is Friday
    </div>
 <div id="sat" style="display:none;">
    This is Saturday
    </div>

<script language="JavaScript">

function changeDay(show_day) {
    document.getElementById('thu').style.display = "none";
    document.getElementById('fri').style.display = "none";
    document.getElementById('sat').style.display = "none";
    document.getElementById(show_day).style.display = "block";
}
</script>
 </body>
</html>

【讨论】：