在pug中创建一个动态url

Question

我声明了一个名为 "name "的变量。一旦用户点击表单，它应该调用函数myFunction，将用户输入的值分配给变量名。例如，如果用户键入 "John"，那么url将是localhost:5000profileJohn。但我得到的是document.getElementById("username")是undefined。

-let name = "gg";    
    //- -function enteringName() {
    //-      - name = document.getElementById("username").value;
    //- -};

    <h1>Log in</h1>
    <form action="/profile/#{name}"  method="POST" id="loginForm" onclick="#{myFunction()}" >
      <label for="username">username:</label><br />
      <input type="text" id="username" name="username"/>
      <br />
      <label for="password">password:</label><br />
      <input type="text" id="password" name="password" /><br /><br />
      <input type="submit" value="Log in" />
      <br />
    </form>
    <p>

      <a href="http://localhost:3000/registration">register here</a>
    </p>
    <script>

function myFunction() {
 -name = document.getElementById("username").value;
}
</script>

Answer 1

试试这个。pug缩进有一些问题。另外，pug只是在服务器端渲染html，但在客户端你应该通过js将名称设置为元素。在codepen中测试了这段代码，也可以去那里看看。https:/codepen.ioaidonline01penrNOwWJY。 :)

-let name = "gg";
//- -function enteringName() {
//-      - name = document.getElementById("username").value;
//- -};

<h1>Log in 1</h1>
  <form action="/profile/#{name}"  method="POST" id="loginForm" onclick="myFunction()" >
    <label for="username">username:</label><br />
    <input type="text" id="username" name="username"/>
    <br />
    <label for="password">password:</label><br />
    <input type="text" id="password" name="password" /><br /><br />
    <input type="submit" value="Log in" />
    <br />
  </form>
<p>

<a href="http://localhost:3000/registration">register here</a>
</p>
script
  .
    function myFunction() {
      #{name} = document.getElementById("username").value;
      document.getElementById("loginForm").action = `/profile/${#{name}}`;
    }