时间戳

首页 > 解决方案 > 为什么函数中的变量不传递给 HTML 文章？

javascript - 为什么函数中的变量不传递给 HTML 文章？

问题描述

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

我知道“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>

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

标签： javascripthtmlformsarticle

解决方案

你需要做两件事：

  1. false在函数结束时返回，validateForm()以便页面不刷新
  2. 更改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>

推荐阅读