Question

我正在尝试显示用户名，并根据当天的时间显示消息。我已经创建了一个函数来执行此操作，我使用提交按钮调用了该函数。但是，当我点击网页上的提交时没有任何反应？我在每条消息后面都添加了“名称”，因此它显示了用户在表单中输入的名称。我在代码中做错了什么，我现在很困惑。感谢您提供的任何帮助，我已将代码放在下面：

<div id="main"><h2>Type your name in here:</h2>

<script type="text/javascript">
function runfunction()
{
var Datenow = new Date();   
 (Datenow.getHours() < 12 )  {     document.write("Good Morning!"); } else  
if ( Datenow.getHours() >= 12 && Datenow.getHours() <= 17 ) {  document.write("Good Afternoon,'Name'!"); } else   
if ( Datenow.getHours() > 17 && Datenow.getHours() <= 24 ) {     document.write("Good Evening,'Name'!"); } else  
if ( Datenow.getHours() > 24) { document.write("It's pretty late, 'Name', you should probably go to bed!");

}
</script>

<form action="">
<input type="text" name="Name" size="7" value="Name" />

<input type="button" name="process" onclick="runfunction()" value="Submit" />
</form>
</div>

Answer 1

当您点击<input type="button" />中的<form>时，会提交<form>;如果没有指定的action属性，表单将提交到当前URL，从而导致页面重新加载。

为防止这种情况发生，您可以在正在调用的函数中使用event.preventDefault()（这可以阻止默认操作）或return false：

function runfunction(e) {
  (e || Window.event).preventDefault();
  var Datenow = new Date(),
    currentHour = Datenow.getHours(),
      name = document.querySelector('input[name=Name]').value;

  if (currentHour < 12) {
    document.write("Good Morning!");
  } else
  if (currentHour >= 12 && currentHour <= 17) {
    document.write("Good Afternoon, " + name + "!");
  } else
  if (currentHour > 17 && currentHour <= 24) {
    document.write("Good Evening, " + name + "!");
  } else
  if (currentHour > 24) {
    document.write("It's pretty late, " + name + " you should probably go to bed!");

  }
}

<form action="">
<input type="text" name="Name" size="7" value="Name" />

<input type="button" name="process" onclick="runfunction(event)" value="Submit" />
</form>

此外，最好缓存一个变量，即当前小时，而不是每次脚本移动到后续else if评估时重复调用相同的方法以获得相同的值。

顺便提一下，小时将会，永远不会大于或等于24;它将从23:59:59直接移至00:00:00。

Answer 2

您的代码几乎没有问题：

您需要在加载元素后放置script标记。
请勿使用document.write()。
函数runfunction()没有结束花括号}
您的第一个if语句缺少if个关键字。

＆＃13;

<body>
  <div id="main">
    <h2>Type your name in here:</h2>
    <form action="">
      <input type="text" name="Name" size="7" value="Name" />

      <input type="button" name="process" value="Submit" />
      <div id="message"></div>
    </form>
  </div>
  <script type="text/javascript">
    document.querySelector("input[type=button]").onclick = function () {
        var name = document.querySelector("input[type=text]").value;
        var m = document.getElementById("message");
        var Datenow = new Date().getHours();
        if (Datenow < 12) {
          m.innerHTML = "<br />Good Morning! " + name + "!";
        } else
        if (Datenow >= 12 && Datenow <= 17) {
          m.innerHTML = "<br />Good Afternoon, " + name + "!";
        } else
        if (Datenow > 17 && Datenow <= 24) {
          m.innerHTML = "<br />Good Evening, " + name + "!";
        } else
        if (Datenow > 24) {
          m.innerHTML = "<br />It's pretty late, " + name + ", you should probably go to bed!";

        }
      }
  </script>
</body>

＆＃13;

Answer 3

你有一些小错误，比如忘了关闭这个功能。并且您可以在点击时返回false以防止表单提交

＆＃13;

function runfunction()
{
  var Datenow = new Date();

  if(Datenow.getHours() < 12 )  {    
    
   document.write("Good Morning!"); 
  } 
  else if ( Datenow.getHours() >= 12 && Datenow.getHours() <= 17 ) 
  { 
    document.write("Good Afternoon,'Name'!"); 
  } 
  else if ( Datenow.getHours() > 17 && Datenow.getHours() <= 24 )         {             document.write("Good Evening,'Name'!"); 
  }
  else  if ( Datenow.getHours() > 24) { 
    document.write("It's pretty late, 'Name', you should probably go to bed!");

}}

＆＃13;

<div id="main"><h2>Type your name in here:</h2>



<form action="">
<input type="text" name="Name" size="7" value="Name" />

<input type="button" name="process" onclick="runfunction(); return false;" value="Submit" />
</form>
</div>

＆＃13;

如何接收用户名，并根据一天中的时间（Javascript）显示消息？

3 个答案: