我正在尝试创建一个隔离面板的功能。我正在尝试调试,但控制台没有记录任何错误

问题描述 投票:0回答:0

我已经使用“toggle()”方法以及“add()”和“remove()”多次修改此函数,但无济于事。起初,我能够使用“console.log”在控制台中记录响应,但现在我无法获得响应。我无法在代码中找到问题,所以可能是语法错误。任何帮助将不胜感激。

e.preventDefault();

const logIn = document.getElementById('log-in');
const signUp = document.getElementById('new-account');
const selection = document.getElementById('practiceChoice');
const calculator = document.getElementById('Calculator');
const timesUp = document.getElementById('timesUp');
const panels = [logIn, signUp, selection, calculator];
//Panels
const start = document.getElementById('btnStart');
const replay = document.getElementById('btnPlay');
const signupBtn = document.getElementById('signupBtn');
const loginBtn = document.getElementById('goBack');

function removeActiveClasses() {
  panels.forEach(panels = \ > panels.classList.remove('active'));
};

function toggleActiveClasses(e) {
  const currentTarget = e.currentTarget;
  removeActiveClasses();
  currentTarget.classList.add('active');
}

start.addEventListener('click', () = \ > {
  removeActiveClasses();
  toggleActiveClasses(calculator);
});
.log-signup {
  display: none;
}

.log-signup-active {
  display: block;
}

.log-login {
  display: none;
}

.log-login-active {
  display: block;
}

.practice {
  display: none;
}

.practice-active {
  display: block;
}

.panel-calc {
  display: none;
}

.panel-calc-display {
  display: block;
}

.panel {
  display: none;
}

.panel-active {
  display: block;
}
<header>
  <div class="alltogether">

    <nav>
      <div class="header">

        <div class="nav">
          <ul>
            <a href="">
              <li> Play2Learn Logo</li>
            </a>
            <li>
              <a href="index.html">Home</a>
            </li>
            <li class="contains">
              <a href="">Games</a>
              <ul>
                <li><a href="anagram.html">Anagram Hunt</a></li>
                <li><a href="math.html">Math Facts</a></li>
              </ul>
            </li>
            <li>
              <a href="about.html">About</a></li>
            <li>
              <a href="" class="form">Login</a></li>
          </ul>
        </div>
</header>

<!--Log in form-->
<form id="log-in" class="log-login-active">
  <h3>Log in</h3>
  Email:<input id="email" type="text"></input>
  <br>Password:<input id="password" type="current-password"></input>
  <br><button id="login">Login</button>
  <div id="signupBtn">Need an account? Register.</div>
</form>

<!--Sign Up Form-->
<h3>Sign Up</h3>
Email Address:<input id="email" type="text"></input>
<br>Password:<input id="password" type="new-password"></input>
<br>Verify Password:<input type="verify-password"></input>
<br><input type="checkbox">I am over 13 and like playing games.</input>
<button id="newSubmit">Register</button>

<div id="goBack">Have an account? Log-in.</div>
</div>
</form>

<!--Equation Selection Menu-->
<main>
  <div id="practiceChoice" class="practice-active">
    <div class="group-practice">
      <h3>Math Facts Practice</h3>
      <form method="selectMenu">
        <select id="operation">
          <option class="" value="blank">---Please Select---</option>
          <option class="Addition" value="Addition">Addition</option>
          <option class="Subtraction" value="Subtraction">Subtraction</option>
          <option class="Multiplication" value="Multiplication">Multiplication</option>
          <option class="Division" value="Division">Division</option>
          <button id="btnStart" class="start-button">Go</button>
    </div>
    </form>

    <div class="go">
      <div id="Rules" class="rules2">
        <li>Select operation.</li>
        <li>Press <b>Go.</b></li>
        <li>How many problems can you solve in 30 seconds?</li>
      </div>
    </div>
  </div>
</main>

<!--MathFacts Practice Game Calc-->

<body>

  <div id="Calculator" name="mathGame" class="panel-calc">
    <div class="problem-container">
      <h3>Math Facts Practice</h3>

      <form id="transition">
        <div id="equationType">equation type</div>
        <div id="equationOutput">equation output</div>
        <!--Input-->

        <input type="text" id="calcInput" class="input">###</input>
    </div>
    </form>

    <!--calc buttons-->
    <button type="button" value="1" class="myBtn">1</button>
    <button type="button" value="2" class="myBtn">2</button>
    <button type="button" value="2" class="myBtn">3</button>
    <button type="button" value="4" class="myBtn">4</button>
    <button type="button" value="5" class="myBtn">5</button>
    <button type="button" value="6" class="myBtn">6</button>
    <button type="button" value="7" class="myBtn">7</button>
    <button type="button" value="8" class="myBtn">8</button>
    <button type="button" value="9" class="myBtn">9</button>
    <button type="button" value="0" class="myBtn">0</button>
    <button type="button" class="clear" id="spantwo" value="clear-input">Clear</button>
  </div>

  <div id="rtScore">
    <div class="score" id="plusOne"><label>Score:</label></div>
    <div class="timeleft" id="countDown"><label>Time Left:</label></div>
  </div>

  </div>
  </form>
</body>

<!--Timeout-->
<div id="timesUp" class="panel">
  <h3>Math Facts Practice</h3>

  <div id="p">
    <p>Times up!</p>
  </div>

  <h3>Your final score is:</h3>
  <div id="final-score">4/6</div>
  <button id="btnPlay">Play Again</button>
</div>
</div>

这是我第一次尝试这个功能....

function changePanel(){('load',()=\>{

  const goBack = document.getElementById('goBack');
  const btnStart = document.getElementById('btnStart');
  const calculator = document.getElementById('calculator');
  const timesUp = document.getElementById('timesUp');
  const logIn = document.getElementById('login');
  const panels = Array.from(document.querySelectorAll('.panel'));
  const practiceChoice = document.getElementById('practiceChoice');
  const signUp = document.getElementById('signupBtn');
  const newAccount = document.getElementById('new-account');
  const forms = Array.from(document.querySelectorAll('form'));

  let idx = 0;
  
  panels.forEach(panel=>panel.classList.remove('active'));
  practiceChoice.classList.add('active');

  signUp.addEventListener('click', ()=>{
    forms.forEach(form => form.classList.remove('active'));
    newAccount.classList.add('active');console.log('finished');
  });

  logIn.addEventListener('click', ()=>{
    forms.forEach(form =>form.classList.remove('active'));
    logIn.classList.add('active');
  });

  goBack.addEventListener('click', ()=>{
    forms.forEach(form => form.classList.remove('active'));
    logIn.classList.add('active');
  });

  btnStart.addEventListener('click', ()=>{
    forms.forEach(form => form.classList.remove('active'));
    calculator.classList.add('active');
  });

  timesUp.addEventListener('change', ()=>{
    forms.forEach(form => form.classList.remove('active'));
    panels.forEach(form => form.classList.remove('active'));
  });

})};
javascript html css addeventlistener event-listener
© www.soinside.com 2019 - 2024. All rights reserved.