(Javascript) 需要帮助用 html 和 js 查找代码中的错误

Question

我是编码新手。 抱歉，如果我对一个微不足道的问题感到困扰，但目前我一直在寻找为什么我的代码中的函数 validate2 不起作用。 我已经把我的代码放在 codepen 上： https ://codepen.io/anniane/pen/jvOOwe

 function displayOption() { var incometype = document.getElementById("incometype").value; var wage = document.getElementById("wage"); var share = document.getElementById("share"); var lease = document.getElementById("lease"); var saving = document.getElementById("saving"); var retire = document.getElementById("retire"); var entre = document.getElementById("entre"); var biz = document.getElementById("biz"); var bke = document.getElementById("bke"); if (incometype == "wage") { wage.style.display = "block"; share.style.display = "none"; lease.style.display = "none"; saving.style.display = "none"; retire.style.display = "none"; entre.style.display = "none"; biz.style.display = "none"; bke.style.display = "none"; } else if (incometype == "share") { wage.style.display = "none"; share.style.display = "block"; lease.style.display = "none"; saving.style.display = "none"; retire.style.display = "none"; entre.style.display = "none"; biz.style.display = "none"; bke.style.display = "none"; } else if (incometype == "lease") { wage.style.display = "none"; share.style.display = "none"; lease.style.display = "block"; saving.style.display = "none"; retire.style.display = "none"; entre.style.display = "none"; biz.style.display = "none"; bke.style.display = "none"; } else if (incometype == "saving") { wage.style.display = "none"; share.style.display = "none"; lease.style.display = "none"; saving.style.display = "block"; retire.style.display = "none"; entre.style.display = "none"; biz.style.display = "none"; bke.style.display = "none"; } else if (incometype == "retire") { wage.style.display = "none"; share.style.display = "none"; lease.style.display = "none"; saving.style.display = "none"; retire.style.display = "block"; entre.style.display = "none"; biz.style.display = "none"; bke.style.display = "none"; } else if (incometype == "entre") { wage.style.display = "none"; share.style.display = "none"; lease.style.display = "none"; saving.style.display = "none"; retire.style.display = "none"; entre.style.display = "block"; biz.style.display = "none"; bke.style.display = "none"; } else if (incometype == "biz") { wage.style.display = "none"; share.style.display = "none"; lease.style.display = "none"; saving.style.display = "none"; retire.style.display = "none"; entre.style.display = "none"; biz.style.display = "block"; bke.style.display = "none"; } else if (incometype == "bke") { wage.style.display = "none"; share.style.display = "none"; lease.style.display = "none"; saving.style.display = "none"; retire.style.display = "none"; entre.style.display = "none"; biz.style.display = "none"; bke.style.display = "block"; } } function validate2() { var cpny = document.getElementById("cpny").value; var hdld = document.getElementById("hdld").value; var incomerate = document.getElementById("incomerate").value; var inctype = document.getElementById("inctype").value; var avginc = document.getElementById("avginc").value; var location = document.getElementById("location").value; var status = document.getElementById("status").value; var shareorg = document.getElementById("shareorg").value; var sharefreq = document.getElementById("sharefreq").value; var shareother = document.getElementById("shareother").value; var leasetype = document.getElementById("leasetype").value; var leaseside = document.getElementById("leaseside").value; var leaseown = document.getElementById("leaseown").value; var leaseother = document.getElementById("leaseother").value; var savingacc = document.getElementById("savingacc").value; var savingbal = document.getElementById("savingbal").value; var savingother = document.getElementById("savingother").value; var retireother = document.getElementById("retireother").value; var errcpny; var errhdld; var errincomerate; var errinctype; var erravginc; var errshareorg; var errsharefreq; var errshareother; var errleasetype; var errleaseown; var errleaseother; var errsavingacc; var errsavingbal; var errsavingother; var errretireother; if (cpny == "dntn" || cpny == "hkd") { errcpny = "Loại hình công ty không thỏa mãn chính sách!"; } else { errcpny = ""; } var errorcpny = document.getElementById("errorcpny"); errorcpny.innerText = errcpny; errorcpny.style.display = "block"; if (hdld < 3) { errhdld = "Thời gian công tác không thỏa mãn chính sách!"; } else { errhdld = ""; } var errorhdld = document.getElementById("errorhdld"); errorhdld.innerText = errhdld; errorhdld.style.display = "block"; if (incomerate == "3") { errincomerate = "Tần suất nhận thu nhập không thỏa mãn chính sách!"; } else { errincomerate = ""; } var errorincomerate = document.getElementById("errorincomerate"); errorincomerate.innerText = errincomerate; errorincomerate.style.display = "block"; if (inctype == "cash" && cpny == "tnhh1tv") { errinctype = "Hình thức nhận lương không thỏa mãn chính sách!"; } else { errinctype = ""; } var errorinctype = document.getElementById("errorinctype"); errorinctype.innerText = errinctype; errorinctype.style.display = "block"; if ( (location == "hnhcm" && status == "single" && avginc < 7) || (location == "hnhcm" && status == "married" && avginc < 10) || (location == "other" && status == "single" && avginc < 5) || (location == "other" && status == "married" && avginc < 7) ) { erravginc = "Tổng thu nhập trung bình không thỏa mãn chính sách!"; } else { erravginc = ""; } var erroravginc = document.getElementById("erroravginc"); erroravginc.innerText = erravginc; erroravginc.style.display = "block"; if (shareorg == "2") { errshareorg = "Doanh nghiệp KH góp vốn không thỏa mãn chính sách!"; } else { errshareorg = ""; } var errorshareorg = document.getElementById("errorshareorg"); errorshareorg.innerText = errshareorg; errorshareorg.style.display = "block"; if (sharefreq == "less") { errsharefreq = "Tần suất KH nhận lợi tức không thỏa mãn chính sách!"; } else { errsharefreq = ""; } var errorsharefreq = document.getElementById("errorsharefreq"); errorsharefreq.innerText = errsharefreq; errorsharefreq.style.display = "block"; if (shareother == "no") { errshareother = "Khách hàng không có nguồn thu khác, không thỏa mãn chính sách!"; } else { errshareother = ""; } var errorshareother = document.getElementById("errorshareother"); errorshareother.innerText = errshareother; errorshareother.style.display = "block"; if (leasetype == "ds" && leaseside == "ind") { errleasetype = "Nguồn thu từ cho thuê tài sản không thỏa mãn chính sách!"; } else { errleasetype = ""; } var errorleasetype = document.getElementById("errorleasetype"); errorleasetype.innerText = errleasetype; errorleasetype.style.display = "block"; if (leaseown == "other") { errleaseown = "Tài sản cho thuê không thỏa mãn chính sách!"; } else { errleaseown = ""; } var errorleaseown = document.getElementById("errorleaseown"); errorleaseown.innerText = errleaseown; errorleaseown.style.display = "block"; if (leaseother == "no") { errleaseother = "Khách hàng không có nguồn thu khác, không thỏa mãn chính sách!"; } else { errleaseother = ""; } var errorleaseother = document.getElementById("errorleaseother"); errorleaseother.innerText = errleaseother; errorleaseother.style.display = "block"; if (savingacc == "other") { errsavingacc = "Lãi tiết kiệm từ tài khoản không gửi tại VPBank sẽ không thỏa mãn chính sách!"; } else { errsavingacc = ""; } var errorsavingacc = document.getElementById("errorsavingacc"); errorsavingacc.innerText = errsavingacc; errorsavingacc.style.display = "block"; if (savingbal == "no") { errsavingbal = "Điều kiện về số dư bình quân không thỏa mãn chính sách!"; } else { errsavingbal = ""; } var errorsavingbal = document.getElementById("errorsavingbal"); errorsavingbal.innerText = errsavingbal; errorsavingbal.style.display = "block"; if (savingother == "no") { errsavingother = "Khách hàng không có nguồn thu khác, không thỏa mãn chính sách!"; } else { errsavingother = ""; } var errorsavingother = document.getElementById("errorsavingother"); errorsavingother.innerText = errsavingother; errorsavingother.style.display = "block"; if (retireother == "no") { errretireother = "Khách hàng không có nguồn thu khác, không thỏa mãn chính sách!"; } else { errretireother = ""; } var errorretireother = document.getElementById("errorretireother"); errorretireother.innerText = errretireother; errorretireother.style.display = "block"; if (errcpny) return false; if (errhdld) return false; if (errincomerate) return false; if (errinctype) return false; if (erravginc) return false; if (errshareorg) return false; if (errsharefreq) return false; if (errshareother) return false; if (errleasetype) return false; if (errleaseown) return false; if (errleaseother) return false; if (errsavingacc) return false; if (errsavingbal) return false; if (errsavingother) return false; if (errretireother) return false; }

 <form action="step4.php" method="POST" onsubmit="return validate2()"> <h4>Nguồn thu nhập chính của khách hàng đến từ</h4> <select class="category" name="incometype" id="incometype" onchange="displayOption()"> <option value="">Hãy chọn nguồn thu chính của khách hàng</option> <option value="wage">Lương</option> <option value="share">Cổ tức</option> <option value="lease">Cho thuê tài sản</option> <option value="saving">Lãi tiền gửi</option> <option value="retire">Lương hưu trí</option> <option value="bke">Bảng kê thu nhập</option> <option value="entre">Doanh nghiệp do khách hàng làm chủ</option> <option value="biz">Hộ kinh doanh</option> </select> <div id="wage" style="display:none"> <h4>Khách hàng đang làm việc tại loại hình công ty nào?</h4> <div id="errorcpny" style="color: red; display:none; font-weight: bold;"></div> <div id="errorhdld" style="color: red; display:none; font-weight: bold;"></div> <div id="errorincomerate" style="color: red; display:none; font-weight: bold;"></div> <div id="errorinctype" style="color: red; display:none; font-weight: bold;"></div> <div id="erroravginc" style="color: red; display:none; font-weight: bold;"></div> <select class="category" name="cpny" id="cpny"> <option value="dnnn">Doanh nghiệp NN</option> <option value="tnhh2tv">Công ty TNHH 2 thành viên trở lên</option> <option value="ctcp">Công ty cổ phần</option> <option value="dntn">Doanh nghiệp tư nhân</option> <option value="tnhh1tv">Công ty TNHH 1 thành viên</option> <option value="hkd">Hộ kinh doanh</option> </select> <br> <h4>Khách hàng làm tại công ty trên được bao lâu?</h4> <input type="number" name="hdld" id="hdld"> tháng <br> <h4>Khách hàng nhận thu nhập bao lâu một lần?</h4> <select class="category" name="incomerate" id="incomerate"> <option value="1">1 đến 3 tháng/lần</option> <option value="2">3 đến 12 tháng/lần</option> <option value="3">trên 12 tháng/lần</option> </select> <h4>Khách hàng nhận lương theo hình thức nào</h4> <select class="category" name="inctype" id="inctype"> <option value="cash">Tiền mặt</option> <option value="payroll">Chuyển khoản</option> </select> <br> <h4>Tổng thu nhập trung bình (bao gồm lương và các khoản trợ cấp) của cả 2 vợ chồng trong vòng 3 tháng gần nhất</h4> <input type="number" name="avginc" id="avginc"> triệu VND <h4>Nơi cư trú & làm việc</h4> <select class="category" name="location" id="location"> <option value="hnhcm">Hà Nội & Hồ Chí Minh</option> <option value="other">Các tỉnh/thành phố khác</option> </select> <br> <h4>Tình trạng hôn nhân</h4> <select class="category" name="status" id="status"> <option value="single">Độc thân</option> <option value="married">Đã kết hôn</option> </select> <br> </div> <div id="share" style="display:none"> <h4>Công ty KH góp vốn thành lập được bao lâu?</h4> <select class="category" name="shareorg" id="shareorg"> <option value="2">Dưới 2 năm</option> <option value="more">Từ 2 năm trở lên</option> </select> <div id="errorshareorg" style="color: red; display:none; font-weight: bold;"></div> <br> <h4>Tần suất khách hàng nhận cổ tức/lợi nhuận?</h4> <div id="errorsharefreq" style="color: red; display:none; font-weight: bold;"></div> <select class="category" name="sharefreq" id="sharefreq"> <option value="2">Ít nhất 02 lần trong 02 năm gần nhất</option> <option value="less">Ít hơn 02 lần trong 02 năm gần nhất</option> </select> <br> <h4>Khách hàng có nguồn thu khác không?</h4> <div id="errorshareother" style="color: red; display:none; font-weight: bold;"></div> <select class="category" name="shareother" id="shareother"> <option value="yes">Có</option> <option value="no">Không</option> </select> <h4>Tổng thu nhập của khách hàng từ lợi nhuận cổ tức trong 3 kì gần nhất:</h4> <input type="number" name="shareavg" id="shareavg"> triệu VND <br> </div> <div id="lease" style="display:none"> <h4>Tài sản cho thuê là bất động sản hay động sản?</h4> <div id="errorleasetype" style="color: red; display:none; font-weight: bold;"></div> <select class="category" name="leasetype" id="leasetype"> <option value="bds">Bất động sản</option> <option value="ds">Động sản</option> </select> <br> <h4>Bên thuê tài sản là tổ chức hay cá nhân?</h4> <select class="category" name="leaseside" id="leaseside"> <option value="org">Tổ chức</option> <option value="ind">Cá nhân</option> </select> <br> <h4>Tài sản thuộc quyền sở hữu của KH hay người khác</h4> <div id="errorleaseown" style="color: red; display:none; font-weight: bold;"></div> <select class="category" name="leaseown" id="leaseown"> <option value="self">Của khách hàng</option> <option value="other">Của người khác/theo ủy quyền của người khác</option> </select> <br> <h4>Khách hàng có nguồn thu khác không?</h4> <div id="errorleaseother" style="color: red; display:none; font-weight: bold;"></div> <select class="category" name="leaseother" id="leaseother"> <option value="yes">Có</option> <option value="no">Không</option> </select> <br> </div> <div id="saving" style="display:none"> <h4>STK khách hàng mở tại VPBank hay nơi khác?</h4> <div id="errorsavingacc" style="color: red; display:none; font-weight: bold;"></div> <select class="category" name="savingacc" id="savingacc"> <option value="vpb">VPBank</option> <option value="other">Nơi khác</option> </select> <br> <h4>Số dư bình quân của tài khoản tiết kiệm có được duy trì liên tục tối thiểu 3 tháng tính đến thời điểm đề xuất vay vốn không?</h4> <div id="errorsavingbal" style="color: red; display:none; font-weight: bold;"></div> <select class="category" name="savingbal" id="leasebal"> <option value="yes">Có</option> <option value="no">Không</option> </select> <br> <h4>Khách hàng có nguồn thu khác không?</h4> <div id="errorsavingother" style="color: red; display:none; font-weight: bold;"></div> <select class="category" name="savingother" id="savingother"> <option value="yes">Có</option> <option value="no">Không</option> </select> <br> </div> <div id="retire" style="display:none"> <h4>Khách hàng có nguồn thu khác không?</h4> <div id="errorretireother" style="color: red; display:none; font-weight: bold;"></div> <select class="category" name="retireother" id="retireother"> <option value="yes">Có</option> <option value="no">Không</option> </select> <br> <input type="submit" value="Tiếp tục"> </form>

期待得到答案并了解有关编码的更多信息。 非常感谢！

Answer 1

如果您在浏览器的开发人员工具上运行您的笔，您会发现以下错误：

类型错误：无法读取 null 的属性“值”

在线上

var savingbal = document.getElementById("savingbal").value;

因为onsubmit处理程序中存在错误，所以不会return false ，因此提交操作成功。

问题似乎是一个复制粘贴问题——名称为savingbal的select仍然具有leasebal ，因此document.getElementById("savingbal")返回null 。

<select class="category" name="savingbal" id="leasebal">

修复这个

<select class="category" name="savingbal" id="savingbal">

似乎使onsubmit处理程序工作。