在单击“提交”按钮/链接之前，JavaScript在操作之前

Question

我是JavaScript的新手，我很难让我的操作正确执行。 在我单击提交按钮之前，程序正在运行我的代码。 到目前为止，已经涵盖了许多类似的问题，但是我不相信其中任何一个都涵盖了这个确切的问题。 请不要在其他地方将其标记为已回答（相信我，我阅读了这些文件）。 先谢谢您的帮助。

<html>
<body style="background-color: lightgrey">
<link rel='stylesheet' type='text/css' href='newcss.css'/>
<ol>
    <p style="color:black">Scan Location</p>
</ol>

<table class="scanLocation" align="center">
       <tr>
           <td>
               <ol>
                    <input type="text" name="fname" maxlength= "18" size= "33" input style="font-size:20px"/>

               </ol>
           </td>
       </tr>
       <tr>
           <td>
               <ol>
                   <form>
                        <input type="button" onclick="script" value="Submit"/>
                            <p id="seconds"></p>
                                <script>
                                    firstFunction();
                                    function firstFunction(){
                                    var date = new Date();
                                    var seconds = date.getUTCSeconds();
                                        myFunction();
                                        function myFunction(){
                                        document.getElementById("seconds").innerHTML = "seconds";
                                        }
                                        checkEven();
                                        function checkEven(seconds){
                                        return Math.floor(seconds%2) == Math.floor(0);
                                        }
                                        if(checkEven(seconds)){
                                            location.href='index2.jsp';
                                        }
                                        else{
                                            location.href='index3.jsp';
                                        }
                                        }
                                </script>
                   </form>
               </ol>
           </td>
       </tr>
</table>
</body>
<script type='text/javascript' src='script.js'></script>
</html>

Answer 1

脚本完全按照您编写的方式执行。 问题是您没有正确指定onclick事件，正确的版本是：

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

您应该从脚本本身中删除函数调用，我的意思是在打开脚本标记后的这一行：

firstFunction();

通常，绑定事件不是最好的选择，因为您的HTML应该只是演示文稿，也可以处理行为，在一个复杂的项目中，管理此类页面会很麻烦，但也许出于研究目的没关系。

Answer 2

您的代码应如下所示：

<html>
<head>
    <link rel='stylesheet' type='text/css' href='newcss.css'/>
</head>
<body style="background-color: lightgrey">
<ol>
    <p style="color:black">Scan Location</p>
</ol>
<form onsubmit="firstFunction()">
<table class="scanLocation" align="center">
       <tr>
           <td>
               <ol>
                    <input type="text" name="fname" maxlength= "18" size= "33" input style="font-size:20px"/>

               </ol>
           </td>
       </tr>
       <tr>
           <td>
               <ol>
                    <input type="submit" value="Submit"/>
                    <p id="seconds"></p>                                
               </ol>
           </td>
       </tr>
</table>
</form>

<script type='text/javascript' src='script.js'></script>
<script>
function firstFunction(){
  /* your logic here */
}                                  
</script>
</body>

</html>

我做了什么：

我在表格周围放置了表单标签，因为我怀疑您希望fname字段也成为表单的一部分，而不仅仅是按钮。
我将脚本块移到您的body底部（而不是在身体外部），在加载外部脚本后（根据您的逻辑判断，其中需要加载一些函数才能使“ firstFunction”正常工作
在表单中添加了onsubmit 。 这比绑定到按钮更好，因为有更多的方式可以提交表单，而不仅仅是单击提交按钮（即返回键）。 我出于相同的原因将按钮类型更改为submit 。
我在函数声明上方删除了函数调用firstFunction() 。 您尚不希望调用该函数，因为只需要触发该函数即可提交。 另外，最好在调用函数之前声明该函数，以防止出现竞争情况。
通过将其移动到页面的头部，我修复了指向您的样式表的链接。 根据规范，这是唯一允许链接样式表的地方。 您的方式可能会在大多数浏览器中使用，但最好以正确的方式进行。

在单击“提交”按钮/链接之前，JavaScript在操作之前

问题描述

2 个解决方案

解决方案1
0 2016-06-16 19:22:01

解决方案2
0 已采纳 2016-06-16 19:33:04

在单击“提交”按钮/链接之前，JavaScript在操作之前

问题描述

2 个解决方案

解决方案1 0 2016-06-16 19:22:01

解决方案2 0 已采纳 2016-06-16 19:33:04

解决方案1
0 2016-06-16 19:22:01

解决方案2
0 已采纳 2016-06-16 19:33:04