javascript - 获取超出最大调用堆栈大小

我正在尝试在向导上添加 HTML 验证，但在控制台上遇到最大调用堆栈跟踪问题。虽然它没有给我带来太多问题，但我仍然很好奇为什么我会遇到这个问题以及如何解决它。我引用了这个link .

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<style>
* {
  box-sizing: border-box;
}

body {
  background-color: #f1f1f1;
}

#regForm {
  background-color: #ffffff;
  margin: 100px auto;
  font-family: Raleway;
  padding: 40px;
  width: 70%;
  min-width: 300px;
}

h1 {
  text-align: center;  
}

input {
  padding: 10px;
  width: 100%;
  font-size: 17px;
  font-family: Raleway;
  border: 1px solid #aaaaaa;
}

/* Mark input boxes that gets an error on validation: */
input.invalid {
  background-color: #ffdddd;
}

/* Hide all steps by default: */
.tab {
  display: none;
}

button {
  background-color: #4CAF50;
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  font-size: 17px;
  font-family: Raleway;
  cursor: pointer;
}

button:hover {
  opacity: 0.8;
}

#prevBtn {
  background-color: #bbbbbb;
}

/* Make circles that indicate the steps of the form: */
.step {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbbbbb;
  border: none;  
  border-radius: 50%;
  display: inline-block;
  opacity: 0.5;
}

.step.active {
  opacity: 1;
}

/* Mark the steps that are finished and valid: */
.step.finish {
  background-color: #4CAF50;
}
</style>
<body>

<form id="regForm" action="/action_page.php">
  <h1>Register:</h1>
  <!-- One "tab" for each step in the form: -->
  <div class="tab">Name:
    <p><input placeholder="First name..." oninput="this.className = ''" name="fname" required></p>
    <p><input placeholder="Phone..." oninput="this.className = ''" title="Numbers only allowed" name="lname" pattern="^[0-9]*$"></p>
  </div>
  <div class="tab">Contact Info:
    <p><input placeholder="E-mail..." oninput="this.className = ''" name="email"></p>
    <p><input placeholder="Phone..." oninput="this.className = ''" name="phone"></p>
  </div>
  <div class="tab">Birthday:
    <p><input placeholder="dd" oninput="this.className = ''" name="dd"></p>
    <p><input placeholder="mm" oninput="this.className = ''" name="nn"></p>
    <p><input placeholder="yyyy" oninput="this.className = ''" name="yyyy"></p>
  </div>
  <div class="tab">Login Info:
    <p><input placeholder="Username..." oninput="this.className = ''" name="uname"></p>
    <p><input placeholder="Password..." oninput="this.className = ''" name="pword" type="password"></p>
  </div>
  <div style="overflow:auto;">
    <div style="float:right;">

      <button type="button" class="button prev_btn" id="prevBtn" onclick="nextPrev(-1)" >Previous</button>
      <button type="button" class="button next_button" id="nextBtn" onclick="nextPrev(1)" >Next</button>
      <input type="submit" name="commit" value="" id="hidden_submit" style="display: none;" data-disable-with="">
    </div>
  </div>
  <!-- Circles which indicates the steps of the form: -->
  <div style="text-align:center;margin-top:40px;">
    <span class="step"></span>
    <span class="step"></span>
    <span class="step"></span>
    <span class="step"></span>
  </div>
</form>

<script>
var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the current tab

function showTab(n) {
  // This function will display the specified tab of the form...
  var currentTab = $('.tab');
  currentTab.eq(n).css("display", "block");

  if (n == 0) {
    $('#prevBtn').attr('disabled', true);
  } else {
    $('#prevBtn').attr('disabled', false).css("display", "inline")
  }
  if (n == (currentTab.length - 1)) {
    document.getElementById("nextBtn").innerHTML = "Submit";
  } else {
    document.getElementById("nextBtn").innerHTML = "Next";
  }
  //... and run a function tat will display the correct step indicator:
  fixStepIndicator(n)
}

function nextPrev(n) {
  // This function will figure out which tab to display

  var x = document.getElementsByClassName("tab");
  // Exit the function if any field in the current tab is invalid:
   var $myForm = $('#regForm');

      if(! $myForm[0].checkValidity()) {

      $myForm.find(':submit').click();
      return false;
    }
  // Hide the current tab:
  x[currentTab].style.display = "none";
  // Increase or decrease the current tab by 1:
  currentTab = currentTab + n;
  // if you have reached the end of the form...
  if (currentTab >= x.length) {
    // ... the form gets submitted:
    document.getElementById("regForm").submit();
    return false;
  }
  // Otherwise, display the correct tab:
  showTab(currentTab);
}

function fixStepIndicator(n) {
  // This function removes the "active" class of all steps...
  var i, x = $('.tab');
  for (i = 0; i < x.length; i++) {
    x[i].className = x[i].className.replace(" active", "");
  }
  //... and adds the "active" class on the current step:
  x[n].className += " active";
}
</script>

</body>
</html>

最佳答案

您的代码存在多个问题，在 MacOS 上的 Chrome 中，它不会溢出堆栈，但会显示其他问题。我没有指出任何一个，而是只研究了你的 JS。由于您使用的是 jQuery，因此您可以使用它的方法。请参阅代码片段了解更多信息。

$(function(){
  $('.tab input').on('input', function(){
    this.className = '';
  })
  
  $('#prevBtn').on('click', function(){
    nextPrev(-1);
  });

  $('#nextBtn').on('click', function(){
    nextPrev(1);
  });

  showTab(0);
});

function lastTabShown(index) {
  return index >= $('.tab').length - 1
}

function showTab(index) {
  $('#prevBtn').prop('disabled', index == 0);

  var $tabs = $('.tab');
  var $current = $tabs.filter(':visible');
  var $next = $tabs.eq(index);

  if ($current[0] && $current[0] != $next[0]) {
    $current.hide();
  }

  $next.show();
  updateStepIndicator(index);

  if (lastTabShown(index)) {
    $('#nextBtn').hide();
    $('#submit').show();
  } else {
    $('#nextBtn').show();
    $('#submit').hide();
  }  
}

function nextPrev(offset) {
  if (!document.getElementById('regForm').checkValidity()) {
    $('#submit').click();
    return false;
  }

  var index = $('.tab:visible').index() + offset;
  showTab(index);
}

function updateStepIndicator(index) {
  var steps = $('.step');

  steps.slice(0, index).addClass('finish');
  steps.eq(index).addClass('active');
  steps.slice(index + 1).removeClass('finish active');
}

* {
  box-sizing: border-box;
}

body {
  background-color: #f1f1f1;
}

#regForm {
  background-color: #ffffff;
  margin: 100px auto;
  font-family: Raleway;
  padding: 40px;
  width: 70%;
  min-width: 300px;
}

h1 {
  text-align: center;
}

input {
  padding: 10px;
  width: 100%;
  font-size: 17px;
  font-family: Raleway;
  border: 1px solid #aaaaaa;
}


/* Mark input boxes that gets an error on validation: */

input.invalid {
  background-color: #ffdddd;
}


/* Hide all steps by default: */

.tab {
  display: none;
}

.form-actions {
  text-align: right;
}

.form-actions input[type=submit] {
  display: none
}

button {
  background-color: #4CAF50;
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  font-size: 17px;
  font-family: Raleway;
  cursor: pointer;
}

button:hover {
  opacity: 0.8;
}

#prevBtn {
  background-color: #bbbbbb;
}

/* Make circles that indicate the steps of the form: */
.steps-container {
  margin-top: 40px;
  text-align: center;
}

.step {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbbbbb;
  border: none;
  border-radius: 50%;
  display: inline-block;
  opacity: 0.5;
}

.step.active {
  opacity: 1;
}


/* Mark the steps that are finished and valid: */

.step.finish {
  background-color: #4CAF50;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="regForm" action="/action_page.php">
  <h1>Register:</h1>
  
  <div id="tabs">
    <div class="tab">Name:
      <p><input placeholder="First name..." name="fname" required></p>
      <p><input placeholder="Phone..." title="Numbers only allowed" name="phone" pattern="^[0-9]*$"></p>
    </div>
    <div class="tab">Contact Info:
      <p><input placeholder="E-mail..." name="email"></p>
      <p><input placeholder="Phone..." name="phone"></p>
    </div>
    <div class="tab">Birthday:
      <p><input placeholder="dd" name="dd"></p>
      <p><input placeholder="mm" name="nn"></p>
      <p><input placeholder="yyyy" name="yyyy"></p>
    </div>
    <div class="tab">Login Info:
      <p><input placeholder="Username..." name="uname"></p>
      <p><input placeholder="Password..." name="pword" type="password"></p>
    </div>
  </div>

  <div class="form-actions">
    <button type="button" class="button prev_btn" id="prevBtn">Previous</button>
    <button type="button" class="button next_button" id="nextBtn">Next</button>
    <button type="submit" class="button submit-button" id="submit" name="commit">Register</button>
  </div>

  <div id="step-circles" class="steps-container">
    <span class="step"></span>
    <span class="step"></span>
    <span class="step"></span>
    <span class="step"></span>
  </div>
</form>

关于javascript - 获取超出最大调用堆栈大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58365146/

javascript - 获取超出最大调用堆栈大小

上一篇：javascript - 并行异步 Mongoose 查询 || eval(返回) 语法错误 : Illegal return statement

下一篇：javascript - 带 Turbolinks 的 Rails Bootstrap 4