Question

标题几乎说明了一切。

我正在制作一个表格，该表格将使用div class =“ well”在报价中返回您的名字和姓氏。我现在呆了几个小时，试图找出我做错了什么。

<script> /* get info from inputs and add it to a quote. */
    function FillInfo(){
        var fname = document.forms ["SIgnUpForm"] ["fname"].value;
        var sname = document.forms ["SIgnUpForm"] ["sname"].value;
        var city = document.forms ["SIgnUpForm"] ["city"].value;

        document.getElementById("info").innerHTML =  "Thank you" + " " + fname + " " + sname + "from" + " " + city + "." + " " + "You are now being considered as our next adventurer. Good luck!";
    }
</script>

在正文中是：

<div class="heading2">
    <div class="container2">
        <p>Do you want to travel troughout space? Then fill out our form!</p><br>
        <form name="SignUpForm" onsubmit="return validateForm()" method="get">
            <input type="text" name="fname" placeholder="First name" required><br>
            <input type="text" name="sname" placeholder="Last name" required><br>
            <input type="text" name="city" placeholder="City" required><br><br>
            <div id="info" class="well"></div>
            <button class="otherpage" onclick="FillInfo();">Submit</button><br><br>
            <a href="Mainpage.html" class="BeginLink">Return</a>
        </form>
    </div>
</div>

当我单击“提交”按钮时，我希望它写下报价，但作为回报，我得到了这个提示：

未捕获的TypeError：无法读取未定义的属性'fname' 在FillInfo（我输入的内容，城市名称）在HTMLButtonElement.onclick（我输入到输入名称，城市中的东西）

Answer 1

我认为您只是输错了表单名称

您的HTML代码：SignUpForm

您的Javascript代码：SIgnUpForm

我修复了它，对我有用。

Answer 2

我使用formData获取了form对象，然后使用form.get(name)获取了内容。
这是获取内容的一种更优雅的方式。

我还用button替换了您的input type="button"，因为它刷新了页面。

注意：它不适用于iOS的IE和Safari浏览器

    function FillInfo(){
     let f = new FormData(document.querySelector('form'));

     var fname = f.get("fname");
     var sname = f.get("sname");
     var city = f.get("city");

     document.getElementById("info").innerHTML =  "Thank you" + " " + fname + " " + sname + " from " + " " + city + "." + " " + "You are now being considered as our next adventurer. Good luck!";
    }

   <div class="heading2">
        <div class="container2">
            <p>Do you want to travel troughout space? Then fill out our form!</p><br>
            <form name="SignUpForm" method="get">
                <input type="text" name="fname" placeholder="First name" required><br>
                <input type="text" name="sname" placeholder="Last name" required><br>
                <input type="text" name="city" placeholder="City" required><br><br>
                <div id="info" class="well"></div>
                <input type="button" class="otherpage" onclick="FillInfo();" value="Submit" /><br><br>
                <a href="Mainpage.html" class="BeginLink">Return</a>
            </form>  
       </div>      
    </div>

Answer 3

为什么？访问undefined时，这些问题不断出现，涉及JavaScript中的DOM错误。请在访问DOM之前确保已准备就绪。只是将脚本放在html之后并不能保证您这样做。

尽管“ SIgnUpForm”名称会给您带来错误，并且在此处已得到纠正，但不能解决整个问题。如果在访问html文档中的元素之前不能确保文档对象模型（DOM）准备就绪，则不同的处理器和网络速度以及浏览器机制可能会导致您遇到undefined属性错误。

<script> /* get info from inputs and add it to a quote. */
    window.onload = function () {
        function FillInfo(){
            var fname = document.forms ["SignUpForm"] ["fname"].value;
            var sname = document.forms ["SignUpForm"] ["sname"].value;
            var city = document.forms ["SignUpForm"] ["city"].value;


            document.getElementById("info").innerHTML =  "Thank you" + " " + fname + " " + sname + "from" + " " + city + "." + " " + "You are now being considered as our next adventurer. Good luck!";
        }
    });
</script>

此外，考虑使用jQuery的$(document).ready()方法来实现跨浏览器兼容性。

Answer 4

我只是修改代码，它可在所有浏览器中使用：

    <script> /* get info from inputs and add it to a quote. */
    function FillInfo(){
    let form = document.querySelector('form');

     var fname = form.elements["fname"];
     var sname = form.elements["sname"];
     var city = form.elements["city"];

     document.getElementById("info").innerHTML =  "Thank you" + " " + fname.value + " " + sname.value + " from " + " " + city.value + "." + " " + "You are now being considered as our next adventurer. Good luck!";
      return false;
    }
</script>

<div class="heading2">
    <div class="container2">
        <p>Do you want to travel troughout space? Then fill out our form!</p><br>
        <form name="SignUpForm" onsubmit="return validateForm()" method="get">
            <input type="text" name="fname" placeholder="First name" required><br>
            <input type="text" name="sname" placeholder="Last name" required><br>
            <input type="text" name="city" placeholder="City" required><br><br>
            <div id="info" class="well"></div>
            <button class="otherpage" type="button" onclick="FillInfo();">Submit</button><br><br>
            <a href="Mainpage.html" class="BeginLink">Return</a>
        </form>
    </div>
</div>

未捕获的TypeError：无法读取FillInfo（）上未定义的属性'fname'

4 个答案: