我已经使用“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'));
});
})};