Question

以下代码存在问题：我试图在javascript中创建一个元素，但每次单击时该元素都会出现并消失。

function hi() {
  let user = document.getElementById('username').value;
  let email = document.getElementById('email').value;
  let password = document.getElementById('password').value;
  let cpassword = document.getElementById('cspassword').value;

  if (user == "" || email == "" || password == "" || cpassword == "") {
    alert('no field can be left empty')
  } else if (password != cpassword) {
    let par = document.createElement('p');
    let text = document.createTextNode('passwords do not match');
    par.appendChild(text);
    document.querySelector('form').appendChild(par);
  } else {
    alert('welcome');
  }
}

<!DOCTYPE html>
<html>

<head>
  <title>forms</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-compatible" content="ie=edge">
</head>

<body>
  <form class="myform">
    <input type="text" placeholder="username" id="username" name="">
    <input type="email" placeholder="Email" id="email" name="email">
    <input type="password" placeholder="password" id="password" name="password">
    <input type="password" placeholder="cpassword" id="cspassword" name="cpassword">
    <button onclick="hi();">submit</button>
  </form>
  <script src="forms.js"></script>
</body>

</html>

如果密码不正确，预期的行为应该是创建一个段落。

Answer 1

使用button代替<input type="button" onclick="hi();" value="submit"/>标签

请参阅Button vs input type button

function hi(){
let user = document.getElementById('username').value;
let email = document.getElementById('email').value;
let password = document.getElementById('password').value;
let cpassword = document.getElementById('cspassword').value;

if(user == "" || email == "" || password == "" || cpassword == "" ){
  alert('no field can be left empty')
}
else if(password != cpassword){
  let par = document.createElement('p');
  let text = document.createTextNode('passwords do not match');
  par.appendChild(text);
  document.querySelector('form').appendChild(par);
}
else {
  alert('welcome');
}
}

<form class="myform">
            <input type="text" placeholder="username" id="username" name="">
            <input type="email" placeholder="Email" id="email" name="email">
            <input type="password" placeholder="password" id="password" name="password">
            <input type="password" placeholder="cpassword" id="cspassword" name="cpassword">
            <input type="button" onclick="hi();" value="submit"/>
        </form>

Answer 2

SELECT DISTINCT
       dt AS "TIMESTAMP",
       COUNT( CASE new_status WHEN 1 THEN IT_ID END ) OVER ( ORDER BY dt RANGE BETWEEN UNBOUNDED PRECEDING AND CURRENT ROW )
         - COUNT( CASE old_status WHEN 1 THEN IT_ID END ) OVER ( ORDER BY dt RANGE BETWEEN UNBOUNDED PRECEDING AND CURRENT ROW )
         AS Status1,
       COUNT( CASE new_status WHEN 2 THEN IT_ID END ) OVER ( ORDER BY dt RANGE BETWEEN UNBOUNDED PRECEDING AND CURRENT ROW )
         - COUNT( CASE old_status WHEN 2 THEN IT_ID END ) OVER ( ORDER BY dt RANGE BETWEEN UNBOUNDED PRECEDING AND CURRENT ROW )
         AS Status2,
       COUNT( CASE new_status WHEN 3 THEN IT_ID END ) OVER ( ORDER BY dt RANGE BETWEEN UNBOUNDED PRECEDING AND CURRENT ROW )
         - COUNT( CASE old_status WHEN 3 THEN IT_ID END ) OVER ( ORDER BY dt RANGE BETWEEN UNBOUNDED PRECEDING AND CURRENT ROW )
         AS Status3,
       COUNT( CASE new_status WHEN 4 THEN IT_ID END ) OVER ( ORDER BY dt RANGE BETWEEN UNBOUNDED PRECEDING AND CURRENT ROW )
         - COUNT( CASE old_status WHEN 4 THEN IT_ID END ) OVER ( ORDER BY dt RANGE BETWEEN UNBOUNDED PRECEDING AND CURRENT ROW )
         AS Status4
FROM   test_data t
       RIGHT OUTER JOIN (
         SELECT min_dt + LEVEL - 1 AS dt
         FROM   ( SELECT MIN("TIMESTAMP") AS min_dt,
                         MAX("TIMESTAMP") AS max_dt
                  FROM   test_data 
                )
         CONNECT BY min_dt + LEVEL - 1 <= max_dt
       ) c
       ON ( c.dt = t."TIMESTAMP" )
ORDER BY "TIMESTAMP" DESC

function hi(event) {
  let user = document.getElementById('username').value;
  let email = document.getElementById('email').value;
  let password = document.getElementById('password').value;
  let cpassword = document.getElementById('cspassword').value;

  if (user == "" || email == "" || password == "" || cpassword == "") {
    alert('no field can be left empty')
  } else if (password != cpassword) {
    let par = document.createElement('p');
    let text = document.createTextNode('passwords do not match');
    par.appendChild(text);
    document.querySelector('form').appendChild(par);


    event.preventDefault();   // This will prevent page get refresh...

  } else {
    alert('welcome');
  }
}

Answer 3

没有理由更喜欢<input type="button">而不是<button>，但是在您的情况下，您应该使用<input type="submit">，因为您的按钮应该提交表单。
< / li>
也许您想在再次单击创建消息之前检查消息是否已发布。
您应该使用eventlistener。
您可以使用required属性检查输入字段是否为空。

HTML

<form class="myform">
    <input type="text" placeholder="username" id="username" name="">
    <input type="email" placeholder="Email" id="email" name="email">
    <input type="password" placeholder="password" id="password" name="password">
    <input type="password" placeholder="cpassword" id="cspassword" name="cpassword">
    <input id="abc" type="submit" value="submit" />
</form>

javascript

const passwordMatch = (a, b) => a == b;
const fieldsEmpty = (a, b, c, d) => a == "" || b == "" || c == "" || d == "";
var msgPasswordDoesNotMatchDisplayed = false;
var msgPasswordDoesNotMatch = void 0;
{
    msgPasswordDoesNotMatch = function(form) {
      let par = document.createElement('p');
      par.id = "message";
      let text = document.createTextNode('passwords do not match');
      par.appendChild(text);
      form.appendChild(par);
    }
}
var clearMessage = void 0;
{
    clearMessage = function () {
      var messageDiv = document.getElementById('message');
        if (messageDiv != null && typeof messageDiv !== 'undefined') {
       document.removeChild(messageDiv);
      }
    }
}
var hi = void 0;
{
    hi = function (e) {
        e.preventDefault();
        var form = this.form;
        var user = document.getElementById('username').value;
        var email = document.getElementById('email').value;
        var password = document.getElementById('password').value;
        var cpassword = document.getElementById('cspassword').value;
        if (fieldsEmpty(user, email, password, cpassword)) {
            alert('no field can be left empty');
        }
        else if (!passwordMatch(password, cpassword)) {
            if (!msgPasswordDoesNotMatchDisplayed) {
                msgPasswordDoesNotMatch(form);
                msgPasswordDoesNotMatchDisplayed = true;
            }
        }
        else {
           clearMessage();
           alert('welcome');
        }
    }
}
document.getElementById('abc').addEventListener('click', hi, false);

如果密码不正确，我无法在文本框下创建元素

3 个答案: