当我尝试在节点中运行函数时，为什么Onclick =“ function（）”显示404？

Question

单击提交按钮时，我正在尝试运行displayitor功能。 但是，在网页上，单击按钮时会显示404。 似乎无法弄清楚为什么这样做。 我正在使用node.js。 玉快递。

extends layout

block content
    h1= title
    div(id="rename", class="Name")
        form(id = "filename", method ="post")
            input(id="new_name", type ="text", placeholder="File Name")
            input(id="Okay", type="submit", value="Okay", onclick="displayeditor('editor', 'rename')")
    div(id="editor")
        |Welcome to the home pages
        |This is the first Paragraph
    script(src="javascripts/ace.js", type="text/javascript")
    script.
            var editor=ace.edit("editor")
    script(src="/jvm.js", type="text/javascript")
    script.
        function displayeditor(id, id2)
            document.getElementById(id).style.display = 'block';
            document.getElementById(id2).style.display = 'none';
            //document.getElementById(id3).style.display = 'none';

Answer 1

表单内的按钮默认会在单击时提交表单，使用e.preventDefault()或return false; 以防止这种行为。

Answer 2

尝试如下重写您的Jade文件。 这里有一些错误：

• 您的Javascript代码必须是实际的Javascript-您需要括号/等。Jade不会替代您的JS代码本身-只是HTML标记。
• 您的JS函数需要返回false；否则，您单击的按钮将触发表单提交，这意味着您的用户会将这些数据发布到您的服务器（我认为您不想要）。

这是工作代码：

extends layout

block content
    h1= title
    div(id="rename", class="Name")
      form(id = "filename", method ="post")
        input(id="new_name", type ="text", placeholder="File Name")
        input(id="Okay", type="submit", value="Okay", onclick="displayeditor('editor', 'rename')")
    div(id="editor")
      |Welcome to the home pages
      |This is the first Paragraph
    script(src="javascripts/ace.js", type="text/javascript")
    script.
            var editor=ace.edit("editor");
    script(src="/jvm.js", type="text/javascript")
    script(type="text/javascript").
      function displayeditor(id, id2) {
        document.getElementById(id).style.display = 'block';
        document.getElementById(id2).style.display = 'none';
        return false;
      }