javascript - 在哈巴狗中创建动态网址

我声明了一个名为“name”的变量。用户单击表单后，它应调用函数myFunction，该函数将用户键入的值分配给变量名。例如，如果用户键入“John”。网址为localhost:5000 / profile / John。但我得到document.getElementById(“username”)是未定义的。

-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>

最佳答案

试试这个。哈巴狗压痕有一些问题。而且pug只是服务器呈现html，但是在客户端，您应该通过js将名称设置为element。在codepen中测试了此代码，也看看https://codepen.io/aidonline01/pen/rNOwWJY :)

-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}}`;
    }

关于javascript - 在哈巴狗中创建动态网址，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/61470668/