时间戳

首页 > 解决方案 > 尝试显示隐藏文字，文字不断消失

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

问题描述

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

标签： javascripthtmldisplay

解决方案

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

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

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

表格上的 MDN 文档-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>

推荐阅读