Question

我在表单上有验证函数，当前使用alert来显示带有消息的弹出框：

HTML

<label for="password" >Password:</label>
    <input type="password" id="password" name="password" placeholder="password" required>
<label for="password2" >Password:</label>
    <input type="password2" id="password2" name="password2" placeholder="confirm assword" required>

        <div class="error" id="error"></div>

JS

function confirmPassword() {
    var password = document.getElementById("password").value
    var password2 = document.getElementById("password2").value
        if(password != password2) {
            alert('You entered two different passwords, please make sure both password fields match.');
        }
}

如何让当前显示在弹出框中的文字显示在<div class="error" id="error"></div>中？

Answer 1

更改

 alert('You entered two different passwords, please make sure both password fields match.');

到

 document.getElementById("error").innerHTML = 'You entered two different passwords, please make sure both password fields match.';

Answer 2

你可以改变这个：

alert('You entered two different passwords, please make sure both password fields match.');

to（如Kevin P所述）：

document.getElementById("error").innerHTML = "You entered two different passwords, please make sure both password fields match.";

或者使用jquery（因为你标记了jquery）：

$("#error").html("You entered two different passwords, please make sure both password fields match.");

另外，为避免错误，请使用严格的不等号：

if(x !== y){
    // some code here
}else{
    // some code here
}

Answer 3

document.getElementById（“error”）。innerHTML =“您输入了两个不同的密码，请确保两个密码字段都匹配。”;

Answer 4

您可以这样做：

＆＃13;

function showPopup(text, title) {
  $('#popup-body').empty();
  popup = $('#popup');
  popup.css("display", "block");
  $('#backdrop-div').css("display", "block");
  popupHead = $('#popup-header-text');
  popupHead.html(title);
  popupBody = $('#popup-body');
  popupBody.html(text);
}

function show() {
  showPopup($('#text').val(), $('#title').val());
}

(function() {
  $('#backdrop-div').click(function() {
    $('#popup').css("display", "none");
    $('#backdrop-div').css("display", "none");
  });
  $(document).keyup(function(event) {
    if ($('#popup').css("display") == "block") {
      if (event.which == 27) {
        $('#popup').css("display", "none");
        $('#backdrop-div').css("display", "none");
      }
    }
  });
})();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
  .popup-box {
    position: absolute;
    width: 500px;
    height: 200px;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -250px;
    background-color: #FFFFFF;
    z-index: 100000000;
    border: 2px solid #000000;
    border-radius: 15px;
  }
  .popup-header {
    margin-top: -19px;
    border-bottom: 2px solid #000000;
    background: red;
    text-align: center;
    font-family: Impact, Charcoal, sans-serif;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
  }
  .popup-body {
    margin-top: 10px;
    margin-bottom: 10px;
    height: 40px;
    background: #FFFFFF;
    font-family: Impact, Charcoal, sans-serif;
    text-align: center;
  }
  .popup-header-text {
    margin-top: 40px;
  }
</style>
<div id="backdrop-div" style="width: 1000%; height: 1000%; z-index: 20000; background-color: #000000; opacity: 0.3; top: 0; left: 0; position: fixed; display: none"></div>
<div id="popup" class="popup-box" style="display: none;">
  <div id="popup-header" class="popup-header">
    <h3 id="popup-header-text">Header</h3>
  </div>
  <div id="popup-body" class="popup-body">Text</div>
</div>

<div>
  Text:
  <textarea id="text">You entered two different passwords, please make sure both password fields match.</textarea>
  <br>Title:
  <input id="title" value="ERROR!!!">
  <br>
  <button onclick="show();">Show popup!</button>
</div>

＆＃13;

但是，您可能希望更改某些内容，例如CSS。

，而不是复制代码

在页面div而不是弹出框中显示JavaScript警报

4 个答案: