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

I have an input form that asks a user to enter their name. I have an event listener that listens if the form has been submitted. I am able to access the input the user enters from within a function but after many attempts I have been unable to get the user input to be stored in a global variable.

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

My most recent attempt involves using JS to create a p tag and then inserting the user input between the tags in the hope that I can later access the information between the p tags. This is not working either.

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

I do not understand why I am able to get content from various elements but am struggling so much to access and store user input. I would really appreciate any help.

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

Below is my most recent attempt:

以下是我最近的尝试：

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

3 个解决方案

#1

Your want to execute the script when you submit the form, but your browser already has a default action for this event, that is a refresh of the page.

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

To prevent your browser to refresh the page, you can use the preventDefault() method. Change the first lines of your function like this:

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

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

#2

Basically the problem that you are facing is that your global is being wiped out because the action 'submit', forces a reload on the page. If in the eventListenerFunction you instead have

基本上你面临的问题是你的全局被淘汰，因为动作'提交'，强制重新加载页面。如果在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);

}

The problem of reloading would be solved because you are preventing the default behaviour of this event

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

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

It will work because you are not reloading the page (I put a log so you can see that before it was reloading but now, it doesnt and the value gets save)

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

#3

If you debug this, you will see that it is in fact working. Go through it line for line in a debugger and you'll see the p tag appears below your submit button. The problem is it doesn't stay there. You need to add a return false in your form like so:

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

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

#1