Chris Topher Chris Topher - 1 month ago 6
HTML Question

Using if statement with innerHTML to alternate content, my method isn't working... completely

I'm trying to call a javascript function the reads the currnet button's innerHTML and uses an if statement to determine what items to show on screen. On first click it makes the desired changes, but won't do anything on the second click.



function signup() {
var test = document.getElementById('link-user').innerHTML;

if (test = 'Sign Up') {
document.getElementById('signup-name-first').style.display = 'block';
document.getElementById('signup-name-last').style.display = 'block';
document.getElementById('signup-email').style.display = 'block';
document.getElementById('signup-password').style.display = 'block';
document.getElementById('br1').style.display = 'block';
document.getElementById('br2').style.display = 'block';
document.getElementById('br3').style.display = 'block';
document.getElementById('btn-sub').innerHTML = 'Sign Up';
document.getElementById('link-user').innerHTML = 'Existing User';
document.getElementById('link-forgot').style.display = 'none';
} else {
document.getElementById('signup-name-first').style.display = 'none';
document.getElementById('signup-name-last').style.display = 'none';
document.getElementById('signup-email').style.display = 'none';
document.getElementById('signup-password').style.display = 'none';
document.getElementById('br1').style.display = 'none';
document.getElementById('br2').style.display = 'none';
document.getElementById('br3').style.display = 'none';
document.getElementById('btn-sub').innerHTML = 'Log In';
document.getElementById('link-user').innerHTML = 'Sign Up';
document.getElementById('link-forgot').style.display = 'block';
}
}

<section id="win-login" class="win-login eds-win-pop eds-ani-popup">
<form class="">
<br />
<input id="signup-name-first" type="text" placeholder="First Name" name="namefirst" class="input-txt eds-input-pop eds-ani-popup" />
<br id="br1" class="eds-input-pop" />
<input id="signup-name-last" type="text" placeholder="Last Name" name="namelast" class="input-txt eds-input-pop eds-ani-popup" />
<br id="br2" class="eds-input-pop" />
<input id="signup-email" type="text" placeholder="E-Mail Address" name="email" class="input-txt eds-input-pop eds-ani-popup" />
<br id="br3" class="eds-input-pop" />
<input type="text" placeholder="User Name" name="nameuser" class="input-txt" />
<br />
<br />
<input type="password" placeholder="Password" name="password" class="input-txt" />
<br />
<br />
<input id="signup-password" type="password" placeholder="Re-Enter Password" name="passwordconf" class="input-txt eds-input-pop eds-ani-popup" />
<br />
<button id="btn-sub" type="submit" class="btn-skyblu" action="">Login</button>
</form>
<br>
<a id="link-user" class="link-small" onclick="signup();">New User</a>
<br />
<a id="link-forgot" class="link-small" onclick="pwreset();">Forgot Password</a>
</section>




Answer

Your mistake is in this line:

if (test = 'Sign Up') {

What this says is if you can assign test to the value of 'Sign Up', run this code inside the if statement.

What you are looking for is the == operator, which checks for equal value.

if (test == 'Sign Up') {

function signup() {
  var test = document.getElementById('link-user').innerHTML;

  if (test == 'Sign Up') {
    document.getElementById('signup-name-first').style.display = 'block';
    document.getElementById('signup-name-last').style.display = 'block';
    document.getElementById('signup-email').style.display = 'block';
    document.getElementById('signup-password').style.display = 'block';
    document.getElementById('br1').style.display = 'block';
    document.getElementById('br2').style.display = 'block';
    document.getElementById('br3').style.display = 'block';
    document.getElementById('btn-sub').innerHTML = 'Sign Up';
    document.getElementById('link-user').innerHTML = 'Existing User';
    document.getElementById('link-forgot').style.display = 'none';
  } else {
    document.getElementById('signup-name-first').style.display = 'none';
    document.getElementById('signup-name-last').style.display = 'none';
    document.getElementById('signup-email').style.display = 'none';
    document.getElementById('signup-password').style.display = 'none';
    document.getElementById('br1').style.display = 'none';
    document.getElementById('br2').style.display = 'none';
    document.getElementById('br3').style.display = 'none';
    document.getElementById('btn-sub').innerHTML = 'Log In';
    document.getElementById('link-user').innerHTML = 'Sign Up';
    document.getElementById('link-forgot').style.display = 'block';
  }
}
<section id="win-login" class="win-login eds-win-pop eds-ani-popup">
  <form class="">
    <br />
    <input id="signup-name-first" type="text" placeholder="First Name" name="namefirst" class="input-txt eds-input-pop eds-ani-popup" />
    <br id="br1" class="eds-input-pop" />
    <input id="signup-name-last" type="text" placeholder="Last Name" name="namelast" class="input-txt eds-input-pop eds-ani-popup" />
    <br id="br2" class="eds-input-pop" />
    <input id="signup-email" type="text" placeholder="E-Mail Address" name="email" class="input-txt eds-input-pop eds-ani-popup" />
    <br id="br3" class="eds-input-pop" />
    <input type="text" placeholder="User Name" name="nameuser" class="input-txt" />
    <br />
    <br />
    <input type="password" placeholder="Password" name="password" class="input-txt" />
    <br />
    <br />
    <input id="signup-password" type="password" placeholder="Re-Enter Password" name="passwordconf" class="input-txt eds-input-pop eds-ani-popup" />
    <br />
    <button id="btn-sub" type="submit" class="btn-skyblu" action="">Login</button>
  </form>
  <br>
  <a id="link-user" class="link-small" onclick="signup();">New User</a>
  <br />
  <a id="link-forgot" class="link-small" onclick="pwreset();">Forgot Password</a>
</section>

Comments