單擊按鈕時從跨度/標簽更改文本

Question

單擊reset按鈕后，我想使用JavaScript清除錯誤消息，但我似乎無法使其工作。

HTML：

<html>
  <head>
    <title>Simple Registration Form</title>
    <link rel="stylesheet" href="style.css" />
    <script type="text/javascript" src="script.js"></script>
  </head>
  <body>
    <form id="myForm" action="#">
      <div class="container">
        <div class="content">
          <label>
            First name:
            <br /><input
              type="text"
              id="fname"
              placeholder="Enter first name"
            /><br />
            <span class="notif" id="fn"></span><br />
          </label>

          <label>
            Last name:
            <br /><input
              type="text"
              id="lname"
              placeholder="Enter last name"
            /><br />
            <span class="notif" id="ln"></span><br />
          </label>

          <label>
            Birthdate:
            <br /><input
              type="date"
              id="birthdate"
              placeholder="Enter birthdate"
            /><br />
            <span class="notif" id="bday"></span>
          </label>

          <label>
            <br />Gender: <br /><select id="gender">
              <option value="select">Select</option>
              <option value="male">Male</option>
              <option value="female">Female</option></select
            ><br />
            <span class="notif" id="gndr"></span><br />
          </label>
        </div>
        <div class="content">
          <label>
            Username:
            <br /><input
              type="text"
              id="username"
              placeholder="Enter username"
            /><br />
            <span class="notif" id="usr"></span><br />
          </label>

          <label>
            E-mail:
            <br /><input
              type="email"
              id="email"
              placeholder="Enter email"
            /><br />
            <span class="notif" id="eml"></span><br />
          </label>

          <label>
            Confirm E-mail:
            <br /><input
              type="email"
              id="econf"
              placeholder="Retype email"
            /><br />
            <span class="notif" id="rt-eml"></span><br />
          </label>

          <label>
            Password:
            <br /><input
              type="password"
              id="password"
              placeholder="Enter password"
            /><br />
            <span class="notif" id="pass"></span><br />
          </label>

          <label>
            Confirm Password:
            <br /><input
              type="password"
              id="pconf"
              placeholder="Retype password"
            /><br />
            <span class="notif" id="rt-pass"></span><br />
          </label>
        </div>

        <div>
          <input
            type="submit"
            class="btn"
            onclick="validation();"
            value="Submit"
          />
          <input type="reset" class="btn" id="reset" value="Reset" />
        </div>
      </div>
    </form>
    <script src="script.js">
      validation();
      reset();
    </script>
  </body>
</html>

JS：

function validation() {
  var fname = document.getElementById('fname').value;
  if (fname == '') {
    document.getElementById('fn').innerHTML = 'Please enter first name.';
  }
  var lname = document.getElementById('lname').value;
  if (lname == '') {
    document.getElementById('ln').innerHTML = 'Please enter last name.';
  }
  var birth = document.getElementById('birthdate').value;
  if (birth == '') {
    document.getElementById('bday').innerHTML = 'Please enter birthdate.';
  }
  var gender = document.getElementById('gender').value;
  if (gender == 'select') {
    document.getElementById('gndr').innerHTML = 'Please enter your gender.';
  }
  var username = document.getElementById('username').value;
  if (username == '') {
    document.getElementById('usr').innerHTML = 'Please enter username.';
  }
  var email = document.getElementById('email').value;
  if (email == '') {
    document.getElementById('eml').innerHTML = 'Please enter email.';
  }
  var econf = document.getElementById('econf').value;
  if (econf == '') {
    document.getElementById('rt-eml').innerHTML = 'Please confirm your email.';
  }
  if (econf != email) {
    document.getElementById('rt-eml').innerHTML = 'Email did not match.';
  }
  var password = document.getElementById('password').value;
  if (password == '') {
    document.getElementById('pass').innerHTML = 'Please enter password.';
  }
  var pconf = document.getElementById('pconf').value;
  if (pconf == '') {
    document.getElementById('rt-pass').innerHTML =
      'Please confirm your password.';
  }
}

function reset() {
  document.getElementById('myForm').reset();
}

function resetErrors() {
  
}

CSS：

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
* {
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-size: 13px;
  top: 20%;
}

.container {
  top: 100px;
  position: relative;
  width: 350px;
  max-width: 100%;
  grid-column-gap: 10px;
  margin: auto;
  display: grid;

  grid-template-columns: auto auto;
  padding: 10px;
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.5);
  border-radius: 5px;
}

.content {
  margin: 0;
  padding: 0;
}

.btn {
  margin: 0;
  position: relative;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 70px;
  height: 25px;
  cursor: pointer;
  align-items: center;
  border-radius: 5px;
}

.btn:active {
  background-color: rgb(190, 190, 190);
}

.notif {
  font-size: 11px;
  color: red;
}

input[type='date'] {
  overflow: hidden;
  padding: 0;
  width: 140px;
  -webkit-padding-start: 1px;
  border-radius: 5px;
  padding-left: 0.5em;
  font-size: 12px;
}

input[type='text'],
input[type='email'],
input[type='password'] {
  border-radius: 5px;
  padding-left: 0.5em;
  width: 170;
  font-size: 12px;
}

我的 JavaScript 應該如何清除notif class 中的錯誤消息？

Answer 1

您可以 select 所有.notif並通過迭代它們來刪除它們的 innerHTML。

document.querySelectorAll('.notif').forEach(el => el.innerHTML = '')

Answer 2

提示：對於此類操作，請使用button 。 使用 onclick function 並以同樣的方式清除 innerHTML。

 function validation() { var fname = document.getElementById('fname').value; if (fname == 'function') { document.getElementById('fn').innerHTML = 'Please enter first name.'; } } validation(); function reset() { document.getElementById('fn').innerHTML = ''; }

 <button class="btn" id="reset" onclick="reset()">RESET</button> <label> First name: </label> <input type="text" id="fname" placeholder="Enter first name" value="function"/> <span class="notif" id="fn"></span>

Answer 3

要從元素中清除 html： document.getElementById('fn').innerHTML = ""

 const nameInpt = document.getElementById('name') const errEl = document.getElementById('err') const validateBtn = document.getElementById('validate') const resetBtn = document.getElementById('reset') function validate() { let name = nameInpt.value; if (name == '') errEl.innerHTML = 'Please enter first name.'; } function reset() { errEl.innerHTML = ""; } validateBtn.addEventListener('click', validate) resetBtn.addEventListener('click', reset)

 #err { color: red }

 <label> First name: <input type="text" id="name" placeholder="Enter first name" /> <span class="notif" id="err"></span> </label> <button type="button" id="validate">validate</button> <button type="button" id="reset">reset</button>

Answer 4

您創建了一個名為“validation”的 function，但尚未將其鏈接到 ID 為“fname”的輸入。

您需要創建一個事件，該事件將調用 function。

例子：

document.getElementById('fname').addEventListener('keyup', validation);

單擊按鈕時從跨度/標簽更改文本

問題描述

3 個解決方案

解決方案1
0 2021-12-19 16:10:23

解決方案2
0 2021-12-19 16:15:44

解決方案3
-1 2021-12-19 16:05:27

解決方案4
-1 2021-12-19 16:08:17

單擊按鈕時從跨度/標簽更改文本

問題描述

3 個解決方案

解決方案1 0 2021-12-19 16:10:23

解決方案2 0 2021-12-19 16:15:44

解決方案3 -1 2021-12-19 16:05:27

解決方案4 -1 2021-12-19 16:08:17

解決方案1
0 2021-12-19 16:10:23

解決方案2
0 2021-12-19 16:15:44

解決方案3
-1 2021-12-19 16:05:27

解決方案4
-1 2021-12-19 16:08:17