innerHTML显示不正确

我遇到的问题是，如果用户将userdata输入留空，我希望它将输入和显示文字作为目标，通知他们这是必填字段。innerHTML显示不正确

我使用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>

来源

2013-07-20 Hugo

“我还试图用\ n \ n和什么已经工作“，\ n \ n'是什么？ –

@LightStyle'\ n'是javascript中的一个新行字符。 – starbeamrainbowlabs

@starbeamrainbowlabs ROTFL我知道了，OP忘了用代码引用''作为他自己的标签的分隔符，所以他们没有出现，看到编辑就明白我在说什么;） –

只要改变你的按钮行这样：

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

innerHTML的工作正常，但按钮的默认行为作出“POST”的要求，使页面刷新擦除innerHtml更改。返回false语句会禁用此默认行为，使您的代码按其应有的工作方式工作。

这是测试和工作。希望它有帮助。

来源

2013-07-20 08:01:47 Jonathan

为什么'返回false'？它应该没有它的工作 – fmodos

+1的解释 – fmodos

谢谢@fmodos。请记住，我真的远没有成为Web开发专家，所以它可能存在一个更好，更优雅的方式来做到这一点。但是，嘿，它的工作！ ;） – Jonathan

这里是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添加其他条件也

if(userdata === ""){ 
    document.getElementById("error").innerHTML="Please fill in Blanks"; 
} else{ 
    document.getElementById("error").innerHTML=""; 
}

来源

2013-07-20 08:08:18

在javascript函数中添加else条件最好，为什么因为输入空值后点击工作就可以正常工作，但是输入数值后又点击工作然后内部HTML显示请填空......其错误。所以更好地添加其他条件。 –

你可以使用一个简单的三元运算符来做到这一点，很多代码保存 –

当我添加一个其他的，它不工作 – Hugo

innerHTML显示不正确

回答

相关问题