Javascript 如何在html中调用js代码？_Javascript_Jquery_Html

Javascript 如何在html中调用js代码？

javascript jquery html

Javascript 如何在html中调用js代码？,javascript,jquery,html,Javascript,Jquery,Html,我把html和js放在一个文件中。我想要两个不同的文件js，和html 这是一个文件（第一种情况），代码如下： <html> <head> <title>menu</title> <script src="https://cdn.jsdelivr.net/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdn.jsdeliv

我把

html

和

js

放在一个文件中。我想要两个不同的文件

js

，和

html

这是一个文件（第一种情况），代码如下：

<html>
<head>
    <title>menu</title>
    <script src="https://cdn.jsdelivr.net/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.min.js"></script>

</head>
<body>
<div class="container">
    <h2>Registration</h2>
    <form id="commentForm" method="post" action="Servlet" name="add_data">

        <label for="username">First Name</label>
        <input type="text" name="username" id="username" />

        <button type="submit">Register</button>

    </form>
    <script type="text/javascript">
        $(function() {
            // Initialize form validation on the registration form.
            // It has the name attribute "registration"
            $("form[name='add_data']").validate({
                // Specify validation rules
                rules: {
                    username: {
                        required: true,
                        minlength: 5
                    }
                },

                messages: {
                    username: "Please enter your firstname"
                },

                submitHandler: function(form) {
                    form.submit();
                }
            });
        });
    </script>
</div>
</body>
</html>

和文件

valid.js

，它们与

html

文件位于同一文件夹中。这是第一个示例中

块中代码的副本

$(function() {
    $("form[name='add_data']").validate({
        rules: {
            username: {
                required: true,
                minlength: 5
            }
        },
        messages: {
            username: "Please enter your firstname"
        },

        submitHandler: function(form) {
            form.submit();
        }
    });
});

HTML

和

JS

文件位于同一目录中。可能我需要调用html我的js代码？

这是我的错吗？为什么第二种情况不起作用？如何解决此问题？

在body标签的末尾添加

。

在第二种情况下似乎也有效。您可以尝试将

脚本标记放在页面底部并使用此标记
script src=“valid.js”type=“text/javascript”

包含type属性以与第一种情况保持一致，并且您可能希望在dev环境中使用某种web服务静态文件，而不是将文件拖到浏览器中。但是，它应该可以工作。JSP和JS文件代码工作正常，我创建了plunker供参考-

屏幕截图和控制台错误的问题是JS文件在目录结构中的位置
WEB-INF下的所有文件对外不可用。将静态文件放在WEB-INF文件夹下，并将JS文件移出WEB-INF，它就会工作
将valid.js移出WEB-INF后，更改引用中js路径的引用
 <script src="**valid.js**"></script>


在$（document）.ready（function（）{}）中添加有效的js函数代码；有控制台错误吗？在我看来，如果你所说的一切都是准确的话，它应该可以工作。如果您右键单击并查看source，然后单击valid.js，它会将您带到文件的文本读出器。如果不是，那么你的参考是错误的@长崎，$（function（）{}）
是document.ready for jquery的速记版本。我刚刚创建了plunker，它工作得很好-正如@Nieminen所提到的，这似乎是引用错误，所讨论的代码有什么问题？它也应该起作用！解释它为什么不工作？他正在使用$（function（）{}）这与他是在之前还是之后导入JS文件并不重要，因为JS将在加载DOM后运行。查看他的一个文件代码，其中JS位于表单下方，头标记中有两个文件。因为他提供的所有信息都没有任何错误，所以我给出了答案。它有时不起作用；在chrome上不工作如果它在头上没有原因我也有同样的问题…它在chrome上工作，不管他在哪里导入JS文件-当你添加'ready'时，但由于他没有添加它，如果它在头上就不会工作。不，不，不工作，我把我的JS文件放在根webapp文件夹中，IDE do refactor src=“../../valid.JS”它不起作用，我尝试复制你的路径“valid.js”（但我不理解它的意思**），结果与你在printscreen中看到的结果相同。尝试添加type=“text/javascript”。。。。。你们现在可以分享控制台日志了吗？和我在屏幕上发送的完全一样。这意味着需要能够获取内部WEB-INF，然后向上=../../。。但是我不能访问WEB-INF。需要从上面的webapp文件夹中访问，但是如何。。。
 <script src="**valid.js**"></script>