个人中心
gpt4 book ai didi

javascript - 我不明白为什么我在这里收到 "Cannot read property ' length' of undefined"错误

转载 作者：行者123 更新时间：2023-12-02 16:12:21 30 4
gpt4 key购买 nike

我正在尝试创建一个多页或多阶段表单，用户在其中填写几条信息，单击“继续”，然后获取更多信息来填写。我希望所有这些都在一页上完成一个网站，直到他们准备好提交他们输入的所有信息，所以我使用了一些教程来达到我现在的水平。它是使用 css 来显示第一个进程，并隐藏其他进程，直到单击“继续”按钮为止。然后它会隐藏第一个进程并显示第二个进程，依此类推，直到结束。

在第 43 行，“if(country.length > 1){”处，我从 Google Chrome 开发者工具中收到错误“无法读取未定义的属性‘length’”。据我所知，processPhase1 中的所有内容在语法方面与 processPhase2 相同。我想我已经在需要的地方定义了“国家”......所以我不知所措。

这是代码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Tech Consulting, LLC.">
    <link rel="icon" href="../../favicon.ico">

    <title>Street Cred</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/jumbotron-narrow.css" rel="stylesheet">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link href='http://fonts.googleapis.com/css?family=Lilita+One' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Exo:400,900' rel='stylesheet' type='text/css'>


    <style>
        form#multiphase{ border:#000 1px solid; padding:24px; width:350px; }
        form#multiphase > #phase2, #phase3, #show_all_data{ display:none; }
    </style>

    <script>
        var name, email, phone, place, country, city, state, zip, routing;
        function _(x){
            return document.getElementById(x);
        }
        function processPhase1(){
            name = _("name").value;
            if(name.length > 2){
                _("phase1").style.display = "none";
                _("phase2").style.display = "block";
                _("progressBar").value = 33;
                _("status").innerHTML = "Phase 2 of 3";
            } else {
                alert("Please fill in the fields.");    
            }
        }
        function processPhase2(){
            country = _("country").value;
            if(country.length > 1){
                _("phase2").style.display = "none";
                _("phase3").style.display = "block";
                _("progressBar").value = 66;
                _("status").innerHTML = "Phase 3 of 3";
            } else {
                alert("Please make sure all fields are entered.");  
            }
        }
        function processPhase3(){
            routing = _("routing").value;
            if(routing.length > 0){
                _("phase3").style.display = "none";
                _("show_all_data").style.display = "block";
                _("display_name").innerHTML = name;
                _("display_email").innerHTML = email;
                _("display_phone").innerHTML = phone;
                _("display_country").innerHTML = country;
                _("display_routing").innerHTML = routing;
                _("progressBar").value = 100;
                _("status").innerHTML = "Data Overview";
            } else {
                alert("Please fill in everything.");    
            }
        }
        function submitForm(){
            _("multiphase").method = "post";
            _("multiphase").action = "insert_form.php";
            _("multiphase").submit();
        }
    </script>

  </head>

  <body>
    <div class="container">
      <div class="header clearfix">
      <i class="fa fa-chevron-circle-left fa-5x"></i>
      <i class="fa fa-chevron-circle-right fa-5x"></i>
        <div class="contact-greeting">
          <h1>Let's get to know each other.</h1>
          <p>Before we can get you the device you want, we need to know a little bit about you.</p>
        </div>
      </div>

      <div class="jumbotron">

      <progress id="progressBar" value="0" max="100" style="width:250px;"></progress>
        <h3 id="status">Phase 1 of 3</h3>
            <form id="multiphase" onsubmit="return false">
              <div id="phase1">
                  <p id="name">
                    <input name="name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="First and Last Name" id="name" />
                  </p>

                  <p id="email">
                    <input name="email" type="text" class="validate[required,custom[email]] feedback-input" id="email" placeholder="Email" />
                  </p>

                   <p id="phone">
                    <input name="phone" type="text" class="validate[required,custom[onlyNumber],length[0,100]] feedback-input" id="phone" placeholder="Telephone Number" />
                  </p>
                  <button onclick="processPhase1()">Continue</button>
              </div>

              <div id="phase2">
                  <p id="country">
                    <input name="country" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Country" id="country" />
                  </p>

                  <p id="place">
                    <input name="place" type="text" class="validate[required,length[0,100]] feedback-input" placeholder="Address" id="place" />
                  </p>

                  <p id="city">
                    <input name="city" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="City" id="city" />
                  </p>

                  <p id="state">
                    <input name="state" type="text" class="validate[required,custom[onlyLetter],length[0,2]] feedback-input" placeholder="State" id="state" />
                  </p>

                  <p id="zip">
                    <input name="zip" type="text" class="validate[required,custom[onlyNumber],length[0,5]] feedback-input" placeholder="Zip" id="zip" />
                  </p>
                  <button onclick="processPhase2()">Continue</button>
              </div>

              <div id="phase3">
                  <p id="text">
                    <textarea name="text" class="validate[required,length[6,300]] feedback-input" id="comment" placeholder="Questions or comments..."></textarea>
                  </p>
                  <button onclick="processPhase3()">Continue</button>
              </div>

              <div id="show_all_data">
                Name: <span id="display_fname"></span> <br>
                E-mail: <span id="display_email"></span> <br>
                Phone: <span id="display_phone"></span> <br>
                Address: <span id="display_country"></span> <br>
                <button onclick="submitForm()">Submit Data</button>
              </div>

              <div class="submit">
                <input type="submit" value="SEND" id="button-blue"/>
                <div class="ease"></div>
              </div>
            </form>
          </div>
        </div>

      <div class="row marketing-contact">
        <p></p><br><br><br>
      </div>


    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
  </body>
</html>

最佳答案

p 标签对应的

DOM 元素没有 value 属性。您需要删除 html 中重复的 id。如果您从 p 标记中删除 id="country"，则带有 id="country" 的 input 将是由 document.getElementById 和 processPhase2 找到的将起作用。

关于javascript - 我不明白为什么我在这里收到 "Cannot read property ' length' of undefined"错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30034434/

30 4 0
文章推荐： plugins - 如何访问插件生成器中的数据文件？
文章推荐： javascript - Angular Ui 网格 Coloumndefs 错误
文章推荐： javascript - 如何避免在用户定义函数中使用 JavaScript eval()
文章推荐： javascript - 向正则表达式构造函数添加限制
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com