如何使用JavaScript在特定HTML div中显示消息？

Question

这是我到目前为止所尝试的内容。

 <head> <script> function myFunction() { var a = document.forms["login"]["uname"].value; var b = document.forms["login"]["pwd"].value; if (a == "" || b == "") { error = "All fields must be entered."; document.getElementById("errorid").innerHTML = error; } } </script> </head> <body> <form name="login" action=""> <b>Enter username:</b> <input type="text" name="uname" /> <br /> <b>Enter password:</b> <input type="password" name="pwd" /> <br /> <p id="errorid"></p> <input onclick="myFunction()" type="submit" /> </form> </body> </html>

但它没有在ID = errorid的 p标签中显示错误消息我是否写错了代码？ 如果是，那么如何解决这个问题呢？

Answer 1

您显示消息的代码是正确的，这里的问题是单击按钮时提交表单。 您必须在未满足条件时阻止默认操作。

我建议你使用表单的submit事件，当返回false时，它将阻止默认操作（表单被提交）。

 <head> <script> function myFunction() { var a = document.forms["login"]["uname"].value; var b = document.forms["login"]["pwd"].value; if (a == "" || b == "") { error = "All fields must be entered."; document.getElementById("errorid").innerHTML = error; return false; } return true; } </script> </head> <body> <form name="login" action="" onsubmit="return myFunction()"> <b>Enter username:</b> <input type="text" name="uname" /> <br /> <b>Enter password:</b> <input type="password" name="pwd" /> <br /> <p id="errorid"></p> <input type="submit" /> </form> </body> </html>

Answer 2

如果用户必须输入所需的属性，您可以将输入所需的属性添加到输入中，如下所示： <input type='text' required>这样您就不必担心用户没有填写领域。 HTML5会自动处理。 试试吧

Answer 3

请进行以下更改：

在提交按钮上，替换以下代码：

<input onclick="myFunction()" type="submit" />

以下内容

<input onclick="return myFunction()" type="submit" />

那它应该工作正常

Answer 4

您的代码立即显示错误消息，然后由于提交而刷新。 以这种方式使用required属性，用户将无法在不填写所有必填字段的情况下提交表单

Answer 5

试试这个，更新你的代码

<html>
<head>
  <script>
    function myFunction() {
      var a = document.forms["login"]["uname"].value;
      var b = document.forms["login"]["pwd"].value;
      if (a == "" || b == "") {
        error = "All fields must be entered.";
        document.getElementById("errorid").innerHTML = error;
        return false;
      }
     return true; 
    }
  </script>
</head>

<body>
  <form name="login" action="">
     <p id="errorid"></p>
    <b>Enter username:</b>
    <input type="text" name="uname" />
    <br />
    <b>Enter password:</b>
    <input type="password" name="pwd" />
    <br />

    <input onclick="return myFunction()" type="submit" />
  </form>
</body>

</html>

Answer 6

将输入type="submit"更改为输入type="button" 。 像这样

<input onclick="myFunction()" type="button" value="Submit" />

提交按钮基本上会发布页面并导致页面重新加载（因为您没有在<form>标记中指定action =“”值）。 您的错误消息确实显示在<p>但它会在页面刷新后消失。

如果您要提交详细信息，可以通过以下几种方式进行操作。 但是，你不得不将其作为一个单独的问题。

如何使用JavaScript在特定HTML div中显示消息？

问题描述

6 个解决方案

解决方案1
4 已采纳 2016-01-11 12:44:40

解决方案2
0 2016-01-11 12:47:31

解决方案3
0 2016-01-11 12:48:35

解决方案4
0 2016-01-11 12:53:09

解决方案5
0 2016-01-11 12:59:18

解决方案6
-1 2016-01-11 12:43:43

如何使用JavaScript在特定HTML div中显示消息？

问题描述

6 个解决方案

解决方案1 4 已采纳 2016-01-11 12:44:40

解决方案2 0 2016-01-11 12:47:31

解决方案3 0 2016-01-11 12:48:35

解决方案4 0 2016-01-11 12:53:09

解决方案5 0 2016-01-11 12:59:18

解决方案6 -1 2016-01-11 12:43:43

解决方案1
4 已采纳 2016-01-11 12:44:40

解决方案2
0 2016-01-11 12:47:31

解决方案3
0 2016-01-11 12:48:35

解决方案4
0 2016-01-11 12:53:09

解决方案5
0 2016-01-11 12:59:18

解决方案6
-1 2016-01-11 12:43:43