3

我的名字是迈克尔托斯卡诺。我目前正在为学校做一个 3 层项目，但是我被困在一个看似微不足道的步骤上。现在，我正在尝试通过单击一个按钮隐藏单个 HTML 表单，并通过单击另一个按钮显示。HTML 页面上只有 2 个表单。如果我尝试隐藏第二个表单，我现在所拥有的工作，但是如果我尝试仅隐藏第一个表单，它会隐藏整个页面，除了页面顶部的两个按钮（两个表单）。我想也许我不小心将第二个表单放在了第一个表单中（如果可能的话），但是在查看我的代码后，它看起来（至少对我来说）就像我用 . 反正整个HTML文件如下：

    <!DOCTYPE html>
    <html><head>

    <button type=button id=f1 onclick="func(1)">Order Form</button>
    <button type=button id=f2 onclick="func(2)">Retrieval Form</button>

    <script type="text/javascript">
    function func(a) {
        if(a==1) {
            document.getElementById("order").style.display="none";
        }
        if(a==2) {
            document.getElementById("order").style.display="block";
        }
    }
    </script>

    <script type="text/javascript">
        function showValue(newValue)
        {
            document.getElementById("range").innerHTML=newValue;
        }
    </script>
    </head>

   <body> 
<form id=order action=form.php >

    <p><center>Name: <input type=text
        name="name"
        placeholder="Enter Your Name"
        required
        autocomplete="on"></center><br>

    <center>Email: <input type=text
        name="email"
        placeholder="Enter Your Email"
        required
        autocomplete="off"></center><br>

    <center>Password: <input type=text
        name="password"
        placeholder="15 Characters Or Less"
        required
        autocomplete="off"></center><br>

    <center>Address: <input type=text
        name="address"
        placeholder="Enter Your Address"
        required
        autocomplete="off"></center><br>

    <center>Laptops: <input type=range 
        name=laptop 
        value=0 
        min=0 
        max=10 
        onChange="showValue(this.value)">

    <center>Monitors: <input type=range 
        name=monitor 
        value=0 
        min=0 
        max=10 
        onChange="showValue(this.value)">

    <center>Mouses: <input type=range 
            name=mouse  
        value=0 
        min=0 
        max=10 
        onChange="showValue(this.value)">

    <center>Keyboards: <input type=range
        name=keyboard
        value=0
        min=0
        max=10
        onChange="showValue(this.value)">

    <br>
    <br>

    <center>Shipping Carrier: <SELECT name="delivery">
        <option value="fedex">FEDEX</option>
        <option value="ups">UPS</option>
    </SELECT></center>

    <br>

    <center>Would you like an email receipt?<br>
    <center>Yes <input type="radio" name="group1" value=1> No
    <input type="radio" name="group1" value=0 checked></center><br>

    <br>

    <center><input type=submit value="Submit Order"></center></p>

    </form>

    <form id=retrieve action=form2.php>

    First Name: <input type=text name=first><br>
    Last Name: <input type=text name=last><br>
    Password: <input type=password name=p1><br>
    Retype Password: <input type=password name=p2><br>
    <input type=submit>

    </form>
</body>
</html>

我想指出，我对 HTML 和 javascript 还很陌生，所以如果任何人的回复都可以提供简短的解释，我将不胜感激。谢谢大家。

4

3 回答 3

7

有几个问题：

  • 您不需要为每个 Javascript 函数使用单独的脚本标记。只需将所有 Javascript 放在一个脚本标签中即可。
  • 我强烈建议使用 CSS 来居中元素而不是<center>标签。你有许多未关闭<center>的标签，要启动。就个人而言，我认为左对齐看起来比居中好得多。
  • 如果您的 HTML 是完整的文档，则需要标签<head>和<body>. 使用W3C 标记验证服务确保您拥有有效的 HTML 代码。
  • HTML 中的属性值应该用引号引起来，<form id=order>例如<form id="order">. 有可能甚至required需要required="required"。

  • 使用 javascript 而不是放置内联事件处理程序来“连接”javascript 事件被认为是最佳实践。例如：

    document.getElementById('f1').onclick = function () {
    func(1);
};

    我认为实际上最好在按钮上放置一个数据属性，该按钮具有显示/隐藏表单的 id，然后在 onclick 事件中（现在只需要一个没有 if 语句的函数版本）你只是拉出expando数据值。例如<button data-for="order">.

  • 在您的显示/隐藏代码中，您只使用一种表单。对另一个的引用在哪里？此外，要获得您正在寻找的切换效果，您需要检测表单是否已经隐藏并适当地更改其显示样式。
  • 您应该研究 Javascript==和===.
  • 您的 HTML 元素之间不需要如此多的垂直空间。我完全赞成打破长行，比大多数人都多，但是当标记如此分散时，它变得难以扫描。可以放在<br>行尾。
  • 许多 Javascript 程序员更喜欢将左大括号放在前一行的末尾。这是一个次要的考虑，但它有助于节省空白。你会看到在我的代码示例中我遵循了这个约定。这个选择由你。
  • 您的<select>标签应该是小写的。
  • “15 个字符或更少”是不正确的语法。它应该是“15 个字符或更少”或“15 个或更少字符”甚至更好，“最多 15 个字符”

请参阅此 JS Fiddle，了解我正在运行的已清理 HTML 文档的版本。

于 2013-04-05T18:24:55.557 回答
3

首先，您必须将按钮移动到文档正文中

之后，您可以使您的功能更好一些。

//names of functions as well as attributes should describe them
function show(elementId) { 
  //now we kick out both conditional we do not need them anymore

  //we hide both forms
  document.getElementById("order").style.display="none";
  document.getElementById("retrieve").style.display="none";

  //and then we simply show wanted one isn't that nicer and cleaner?
  document.getElementById(elementId).style.display="block";
}

现在当我们有了我们的功能时，我们可以将它应用到我们的按钮上

<button type="button" onclick="show('order');">Order Form</button>
<button type="button" onclick="show('retrieve');">Retrieval Form</button>

如您所见，我们踢掉了它们的 ID，因为它们是不必要的，我们将属性放在引号中。这必须去身体元素而不是头部！

而不是这种形式的块：

<p><center>Name: <input type=text
name="name"
placeholder="Enter Your Name"
required
autocomplete="on"></center><br>

你可以像这样做得更好：

<p style="text-align:center"><input type="text"
  name="name"
  placeholder="Enter Your Name"
  required="required"
  autocomplete="on" />
</p>

（是的，每一行都是一个新段落，所以你不需要使用 BR 标签）

于 2013-04-05T19:11:03.650 回答
1

你的代码有很多问题：

  1. 您<center>打开的标签多于关闭的标签
  2. 你没有<head>也没有<body>标签。
  3. 如果您想func()隐藏显示一种形式但隐藏另一种形式，则每种情况下都应该有两行 Javascript 代码，例如：document.getElementById("order").style.display="none"; document.getElementById("retrieve").style.display="block";
  4. 您还应该找到一种默认隐藏第二种形式的方法。
于 2013-04-05T18:23:24.037 回答