Question

我有一个输入表单，要求用户输入他们的名字。我有一个事件监听器，监听表单是否已提交。我能够访问用户在函数中输入的输入，但经过多次尝试后，我无法将用户输入存储在全局变量中。

我最近的尝试涉及使用JS创建一个p标签，然后在标签之间插入用户输入，希望以后可以访问p标签之间的信息。这也不起作用。

我不明白为什么我能够从各种元素中获取内容，但我却在努力访问和存储用户输入。我真的很感激任何帮助。

以下是我最近的尝试：

    <!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>
    <form id = "myForm">                
    <input type="text" id = "personName"><br>
    <button id = "nameSubmit">Submit</button>
    </form>

    <div id = "fdiv">
    </div>

    <script>
    myForm.addEventListener("submit", storeName);
    function storeName() {
    var temp = document.forms["myForm"].querySelector('input[type = "text"]').value;

    var para = document.createElement("p");
    para.textContent = temp;
    document.getElementById("fdiv").appendChild(para);

    }

    </script>

    </body>
    </html>

Answer 1

基本上，您遇到的问题是您的全局被删除，因为操作“提交”会强制重新加载页面。如果在eventListenerFunction中你改为

function storeName(event) {
    event.preventDefault();
var temp = document.forms["myForm"].querySelector('input[type = "text"]').value;

var para = document.createElement("p");
para.textContent = temp;
document.getElementById("fdiv").appendChild(para);

}

重新加载的问题将会解决，因为您正在阻止此事件的默认行为

＆＃13;

<!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>
    <form id = "myForm">
    <input type="text" id = "personName"><br>
    <button id = "nameSubmit">Submit</button>
    </form>

    <div id = "fdiv">
    </div>

    <script>
    console.log('reloaded');
    myForm.addEventListener("submit", storeName);
    function storeName(event) {
        event.preventDefault();
    var temp = document.forms["myForm"].querySelector('input[type = "text"]').value;

    var para = document.createElement("p");
    para.textContent = temp;
    document.getElementById("fdiv").appendChild(para);

    }

    </script>

    </body>
    </html>

＆＃13;

它会工作，因为你没有重新加载页面（我把一个日志放在重新加载之前你可以看到它，但现在，它没有，值得保存）

Answer 2

您希望在提交表单时执行脚本，但您的浏览器已经为此事件设置了默认操作，即刷新页面。

要阻止浏览器刷新页面，可以使用preventDefault()方法。像这样更改函数的第一行：

function storeName(e) {
  e.preventDefault();

Answer 3

如果你调试它，你会发现它确实在工作。在调试器中通过它换行，你会看到p标签出现在提交按钮下方。问题是它不会留在那里。您需要在表单中添加return false，如下所示：

<form id = "myForm" onsubmit="return false">

JS：尝试将用户输入存储在全局变量中

3 个答案: