为什么通过按<按钮>清除输入字段

时间：2018-02-05 15:31:05

标签： javascript html css

我有一条经典消息form，它不需要发送消息的功能。她创建的仅用于分析内容上的所有输入字段，如果input字段清除，则脚本必须显示客户的工具提示信息。

问题当我点击带有预先写好的字段的按钮时，字段中的内容就消失了。

＆＃13;
＆＃13; 
  var fromWho = document.querySelector('[name="from"]');
  var pass = document.querySelector('[name="pass"]');
  var repeatPass = document.querySelector('[name="repeatPass"]');  
  var message = document.querySelector('[name="message"]');
  var button = document.querySelector('button');


  function onClick(e) {

    if (fromWho.value = '') {
      var helpFrom = document.createElement('span');
      helpFrom.innerHTML = 'Please, insert sender data!';
      helpFrom.style.color = 'red';
    };

    if (pass.value = '') {
      var helpPass = document.createElement('span');
      helpPass.innerHTML = 'Please, insert password!';
      helpPass.style.color = 'red';
    };

    if (repeatPass.value != pass.value) {
      var helpRepeatPass = document.createElement('span');
      helpRepeatPass.innerHTML = 'Passwords do not match!';
      helpRepeatPass.style.color = 'red';
    };

    if (message.value = '') {
      var helpMessage = document.createElement('span');
      helpMessage.innerHTML = 'Wrie your message!';
      helpMessage.style.color = 'red';
    };  

    console.log(fromWho.value);
  }


  button.addEventListener( 'click', onClick );
＆＃13; 
    body {
      font-family: 'Arial', sans-serif;
      font-size: 12px;
    }
    p {
      display: inline-block;
      margin: 0 0 5px 0;
    }

    input, select {
      float: right;
    }
    input[type="button"] {
      float: left;
    }

    textarea {
      width: 288px;
      height: 114px;
      margin: 0px; 
      resize:  vertical;
    }

    .message-wrap {
      width: 294px;
      height: auto;
    }

    .message-wrap__from {
      margin-bottom: 5px;
      height: 22px;
    }

    .message-wrap__password  {
      margin-bottom: 5px;
      height: 22px;
    }

    .message-wrap__repeatPassword {
      margin-bottom: 5px;
      height: 22px;
    }    

    .message-wrap__toWhom {
      margin-bottom: 5px;
      height: 22px;
    }   

    .message-wrap__message {
      margin-bottom: 5px;
    }  

    .message-wrap__message > p {
      display: block;
    }

    .toWhom__select {
      width: 160.5px;
      height: 22px;    
    }
＆＃13; 
<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <style>
  </style>
</head>

<body>  

  <div class="message-wrap">
    <div class="message-wrap__from">
      <p>From</p>
      <input type="text" name="from">
    </div>
    <div class="message-wrap__password">
      <p>Your password</p>
      <input type="password" name="pass">
    </div>
    <div class="message-wrap__repeatPassword">
      <p>Repeate password</p>
      <input type="password" name="repeatPass">
    </div>
    <div class="message-wrap__toWhom">
      <p>To</p>
      <select class="toWhom__select">
        <option value="1">Logistic sector</option>
        <option value="2">Financial sector</option>
        <option value="3">Director</option>
      </select>
    </div>
    <div class="message-wrap__message">
      <p>Message:</p>
      <textarea name="message" name="message"></textarea>
    </div>
    <button>Check</button>
  </div>

  <script>
  </script>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：2)

如果需要使用==或===检查条件。 =将为变量赋予一个新值，这就解释了行为。

if (fromWho.value == '') {
  var helpFrom = document.createElement('span');
  helpFrom.innerHTML = 'Please, insert sender data!';
  helpFrom.style.color = 'red';
};
...

你的例子：

  var fromWho = document.querySelector('[name="from"]');
  var pass = document.querySelector('[name="pass"]');
  var repeatPass = document.querySelector('[name="repeatPass"]');  
  var message = document.querySelector('[name="message"]');
  var button = document.querySelector('button');


  function onClick(e) {

    if (fromWho.value == '') {
      var helpFrom = document.createElement('span');
      helpFrom.innerHTML = 'Please, insert sender data!';
      helpFrom.style.color = 'red';
    };

    if (pass.value == '') {
      var helpPass = document.createElement('span');
      helpPass.innerHTML = 'Please, insert password!';
      helpPass.style.color = 'red';
    };

    if (repeatPass.value != pass.value) {
      var helpRepeatPass = document.createElement('span');
      helpRepeatPass.innerHTML = 'Passwords do not match!';
      helpRepeatPass.style.color = 'red';
    };

    if (message.value == '') {
      var helpMessage = document.createElement('span');
      helpMessage.innerHTML = 'Wrie your message!';
      helpMessage.style.color = 'red';
    };  

    console.log(fromWho.value);
  }


  button.addEventListener( 'click', onClick );
    body {
      font-family: 'Arial', sans-serif;
      font-size: 12px;
    }
    p {
      display: inline-block;
      margin: 0 0 5px 0;
    }

    input, select {
      float: right;
    }
    input[type="button"] {
      float: left;
    }

    textarea {
      width: 288px;
      height: 114px;
      margin: 0px; 
      resize:  vertical;
    }

    .message-wrap {
      width: 294px;
      height: auto;
    }

    .message-wrap__from {
      margin-bottom: 5px;
      height: 22px;
    }

    .message-wrap__password  {
      margin-bottom: 5px;
      height: 22px;
    }

    .message-wrap__repeatPassword {
      margin-bottom: 5px;
      height: 22px;
    }    

    .message-wrap__toWhom {
      margin-bottom: 5px;
      height: 22px;
    }   

    .message-wrap__message {
      margin-bottom: 5px;
    }  

    .message-wrap__message > p {
      display: block;
    }

    .toWhom__select {
      width: 160.5px;
      height: 22px;    
    }
<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <style>
  </style>
</head>

<body>  

  <div class="message-wrap">
    <div class="message-wrap__from">
      <p>From</p>
      <input type="text" name="from">
    </div>
    <div class="message-wrap__password">
      <p>Your password</p>
      <input type="password" name="pass">
    </div>
    <div class="message-wrap__repeatPassword">
      <p>Repeate password</p>
      <input type="password" name="repeatPass">
    </div>
    <div class="message-wrap__toWhom">
      <p>To</p>
      <select class="toWhom__select">
        <option value="1">Logistic sector</option>
        <option value="2">Financial sector</option>
        <option value="3">Director</option>
      </select>
    </div>
    <div class="message-wrap__message">
      <p>Message:</p>
      <textarea name="message" name="message"></textarea>
    </div>
    <button>Check</button>
  </div>

  <script>
  </script>
</body>
</html>

相关问题
最新问题