3

我遇到的问题是，如果用户将userdata输入留空，我希望它以该输入为目标并显示文本，通知他们这是一个必填字段。

我正在使用innerHTML将消息发送到div或直接发送到输入字段，但没有显示任何内容。我也试过用<p>，<span>也没用。任何帮助表示赞赏。

<!doctype html>
<html>
  <head>
  </head>
  <body>
    <form>
      <input type="text" id="user1">
      <div id="error"></div>
      <button onClick="test()">Work</button>
    </form>
    <script type="text/javascript">
      function test(){
        var userdata = document.getElementById("user1").value;
        if(userdata == ""){
          document.getElementById("error").innerHTML="Please fill in Blanks";
        }
      }
    </script>
  </body>
</html>
4

2 回答 2

2

只需以这种方式更改您的按钮行：

<button onClick="test();return false;">Work</button>

InnerHTML 工作正常，但按钮的默认行为是发出“POST”请求，使页面刷新擦除 innerHtml 更改。return false 语句禁用此默认行为，使您的代码按预期工作。

它已经过测试并且可以正常工作。希望能帮助到你。

于 2013-07-20T08:01:47.610 回答
2

这是JSBIN

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <form>
      <input type="text" id="user1">
      <div id="error"></div>
      <button onClick="test();return false;">Work</button>
    </form>
</body>
</html>

并在JavaScript中添加 else 条件

if(userdata === ""){
     document.getElementById("error").innerHTML="Please fill in Blanks";
} else{
     document.getElementById("error").innerHTML="";
}
于 2013-07-20T08:08:18.847 回答