Javascript innerHTML / jQuery .html()每个id只能运行一次吗?

时间:2018-01-17 07:17:29

标签: javascript jquery innerhtml

我对这个场景比较陌生,而我却得不到它。

所以,如果他们有效,我会检查IBAN号码。我现在已经完成了这一部分。但现在我想要显示一条消息,例如" IBAN不行,"和" IBAN好的"。

我尝试这种方式的方法是创建一个空的span元素,并使用id更改该元素的innerHTML。

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");
  }
}

所以现在如果我按下按钮并且IBAN无效,我会收到消息说它不好,这很好!然后,如果我再次按下按钮,则没有任何反应..

如果我然后刷新页面并输入有效的IBAN,则会显示消息表明它没问题,这很好!然后,如果我再次按下按钮,则没有任何反应..

如果有人可以帮助我,那会很棒! :)

祝你好运

2 个答案:

答案 0 :(得分:2)

试试这个,添加一个show方法

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");
  }
}

答案 1 :(得分:1)

JQuery fadeout()使元素不可见,因此第二次调用它时会更改消息,但不会显示消息,因为它具有0不透明度。您还需要调用.show()函数才能使其可见,正如@AswinRamesh所说:

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");
  }
}