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

Question

我正在尝试显示一天 - 取决于单击的按钮。理想情况下，我会在 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>

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

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

Attempt to display hidden text, text keeps disappearing

html

javascript

display