为什么函数中的变量没有传递给 HTML 文章？

Question

我可以让变量显示在函数中作为警报，但我无法让变量传递给文章。我做错了什么？

我知道 "a" 保存的信息是正确的，因为我已经用警报显示了它。

我试过使用以下方法传递变量：placeholderContent.recipientName = a;

我试过在函数内外声明变量，但也没用。

我试过制作一个嵌套函数来传递变量。

我是 javascript 的新手，花了几个小时研究它并尝试了不同的方法，但我无法让它工作。我希望有人能帮助我！

 function validateForm() {           
                a = document.forms["inviteForm"]["recipientName"].value;
                if (a == "") {
                    alert("Name must be filled out.");
                return false;
                         }
                document.getElementById("recipientName").textContent = a;
                }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="pageForm">
            <form action="#" Name=inviteForm onsubmit="return validateForm()">
                <label for="recipientName">Recipient name:</label>
                <input type="text" name="recipientName" id="recipientName" placeholder="Enter your Recipient Name" />
                <input type="submit" value="submit" />
            </form>
        </section>

        <article id="placeholderContent">
            Hello <span id="recipientName"></span>!
        </article>

用户在表单中输入名称并单击提交按钮后，页面上应显示变量 recipientName。

Answer 1

你需要做两件事：

Return false 在 validateForm() 函数的末尾使页面不刷新
更改要在其中显示数据的 span 元素的 ID。当前，该 ID 与 input 元素的 ID 冲突。

这是更新后的代码：

<!DOCTYPE html>
<html lang="en-US">

<head>
    <title>Invite Page</title>
    <link rel="stylesheet" type="text/css" href="css/main.css" />
</head>

<body>    
    <section id="pageForm">
        <form action="#" Name=inviteForm onsubmit="return validateForm()">
            <label for="recipientName">Recipient name:</label>
            <input type="text" name="recipientName" id="recipientName" placeholder="Enter your Recipient Name" />
            <input type="submit" value="submit" />
        </form>
    </section>

    <article id="placeholderContent">
        Hello <span id="recipientNameDisplay"></span>!
    </article> 

  <script>
    function validateForm() {           
      a = document.forms["inviteForm"]["recipientName"].value;
      if (a == "") {
        alert("Name must be filled out.");
        return false;
      }
      document.getElementById("recipientNameDisplay").textContent = a;
      return false;
    }
  </script>

</body>
</html>

Answer 2

ID 是唯一的，您在 article 和 input 字段中都使用了 recipientName，您不能在同一页面中使用它两次。我更改了文章中的 ID，一切正常。

 function validateForm() {           
            a = document.forms["inviteForm"]["recipientName"].value;
            if (a == "") {
                alert("Name must be filled out.");
            return false;
                     }
            document.getElementById("recipientName1").textContent = a;
            }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="pageForm">
        <form action="#" Name=inviteForm onsubmit="return validateForm()">
            <label for="recipientName">Recipient name:</label>
            <input type="text" name="recipientName" id="recipientName" placeholder="Enter your Recipient Name" />
            <input type="submit" value="submit" />
        </form>
    </section>

    <article id="placeholderContent">
        Hello <span id="recipientName1"></span>!
    </article>

为什么函数中的变量没有传递给 HTML 文章？

Why isn't the variable in the function passing to the HTML article?

html

javascript

forms

article