Javascript innerHTML/jQuery .html() only works once per id?

Question

I'm relatively new to the scene and I just don't get it.

So I'm checking IBAN-numbers if they're valid. I got that part going now. But now I want to show a message like "IBAN not ok" and "IBAN ok".

The way I'm trying to this is by creating an empty span element and change the innerHTML of that element by using the id.

HTML:

 <div class="form-group">
   <label for="confirm" class="cols-sm-2 control-<label">IBAN</label>
     <div class="cols-sm-10">
       <div class="input-group">
           <span class="input-group-addon"><i class="fa fa-lock fa-lg" aria-hidden="true"></i></span>
            <input type="text" class="form-control iban" name="iban" id="iban" required/>
            <span id="message"></span>
        </div>
      </div>
   <button id="checkiban" class="btn btn-primary btn-lg btn-block login-button" onclick="alertValidIBAN(null)">Check IBAN</button>
</div>

jQuery:

function alertValidIBAN(iban) {
var ibanvalid = isValidIBANNumber(document.getElementById("iban").value);
if(ibanvalid === false) {
    $("#message").html("IBAN onjuist").fadeOut(1000);
    console.log("IBAN not ok");
}
if(ibanvalid === 1) {
    $("#message").html("IBAN ok").fadeOut(1000);
    console.log("IBAN ok");
  }
}

So now if I press the button and the IBAN is invalid, I get the message that it's not ok, which is good! Then if I press the button again, nothing happens..

If I then refresh the page and enter a valid IBAN it shows the message that it's ok, which is good! Then if I press the button again, nothing happens..

Would be great if someone could help me with this! :)

Best regards

Answer 1

try this, add a show method

if(ibanvalid === false) {
    $("#message").show().html("IBAN onjuist").fadeOut(1000);
    console.log("IBAN not ok");
}
if(ibanvalid === 1) {
    $("#message").show().html("IBAN ok").fadeOut(1000);
    console.log("IBAN ok");
  }
}

Answer 2

JQuery fadeout() makes element invisible, so the second time you are calling it it changes the message but doesn't show it as it has 0 opacity. You will need to call .show() function too in order to make it visible, as @AswinRamesh said:

function alertValidIBAN(iban) {
var ibanvalid = isValidIBANNumber(document.getElementById("iban").value);
if(ibanvalid === false) {
    $("#message").show().html("IBAN onjuist").fadeOut(1000);
    console.log("IBAN not ok");
}
if(ibanvalid === 1) {
    $("#message").show().html("IBAN ok").fadeOut(1000);
    console.log("IBAN ok");
  }
}