未捕获的类型错误：无法读取 FillInfo() 处未定义的属性'fname'

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>

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

未

捕获的类型错误：无法读取未定义的属性"fname" 在FillInfo(我输入名称，城市的内容( 在HTMLButtonElement.onclick(我输入名称，城市的内容(

Answer 1

我想你只是输入了错误的表单名称

您的 HTML 代码：注册表单

您的Javascript代码：SIgnUpForm

我

修复了它，它对我有用。

Answer 2

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

我还用input type="button"替换了您的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

为什么？这些问题不断出现，关于访问DOM时 JavaScript 中的undefined错误。在访问之前，请确保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>