функция onblur не работает для меня - может быть моя кодировка

Question

Кажется, я не могу понять, почему onblur не работает в моем онлайн-классе. Я понимаю, что при использовании Chrome возникает проблема с функцией onblur, но я попробовал Firefox, и это тоже не сработало. Мои одноклассники успешно использовали onclick="this.focus()", но это тоже не помогло мне. Я скопировал сценарий точно так же, как инструктор в видео, за исключением того, что использовал свои собственные переменные, и безуспешно!

function checkzip() {
  var zip = document.getElementById("zipcode").value;
  var regex = /^[0-9]{5}$/;

  if (regex.test(zip)) {
    document.getElementById("zipmessage").innerHTML = "Valid";
  } else {
    document.getElementById("zipmessage").innerHTML = "Please enter a 5 digit numeric zip code";
  }
}

<tr>
  <td>Zip Code:</td>
  <td><input id="zipcode" name="zipcode" type="text" onclick="this.focus()" onblur="checkzip();" required/></td>
</tr>

Answer 1

Кажется, ваш код в порядке - я подозреваю, что вам не хватает элемента zipmessage.

function checkzip() {
    var zip = document.getElementById("zipcode").value;
    var regex = /^[0-9]{5}$/;
    
    if(regex.test(zip)) {
        document.getElementById("zipmessage").innerHTML = "Valid";
        }
    else {
        document.getElementById("zipmessage").innerHTML = "Please enter a 5 digit numeric zip code";
        }
}

    <div id="zipmessage"></div> 
    
    <input id="zipcode" name="zipcode" type="text" onclick="this.focus()" onblur="checkzip();" required/>

Answer 2

У вас есть:

document.getElementById("zipmessage")

Но у вас нет такого элемента. Если вы добавите этот элемент, он будет работать.

function checkzip() {
  var zip = document.getElementById("zipcode").value;
  var regex = /^[0-9]{5}$/;

  if (regex.test(zip)) {
    document.getElementById("zipmessage").innerHTML = "Valid";
  } else {
    document.getElementById("zipmessage").innerHTML = "Please enter a 5 digit numeric zip code";
  }
}

<table>
  <tr>
    <td>Zip Code:</td>
    <td>
      <input id="zipcode" name="zipcode" type="text" onclick="this.focus()" onblur="checkzip();" required/>
    </td>
  </tr>
</table>
<div id="zipmessage"></div>

Но, поскольку вы сказали, что изучаете это у «инструктора», позвольте мне сказать вам, что вы не учитесь, используя современные передовые практики. и некоторых из того, что вы делаете, следует избегать.

• Не настраивайте свои обработчики событий с атрибутами HTML . Установите их в JavaScript с помощью .addEventListener().
• Вы не показывали его, так что, возможно, он у вас есть, но элементы tr должны быть дочерними элементами элемента table.
• Не используйте .innerHTML, если строка, с которой вы работаете, не содержит HTML для анализа. Это влияет на производительность и безопасность. Вместо этого используйте .textContent.
• Не используйте самозавершающийся синтаксис X HTML , если вам не нужен XML действительный код.

Итак , вот более правильный способ сделать это:

// Just get a reference to the element, not a particular
// property of an element. That way, if you want to access
// a second property, you won't have to scan for the element
// reference a second time.

// Also, get references that you'll need over and over outside of your
// function so you don't keep getting the same reference over and over
// Do you event binding in JavaScript, not HTML:
var zip = document.getElementById("zipcode");
zip.addEventListener("blur", checkzip);

var message = document.getElementById("zipmessage");

function checkzip() {
  // Having this.focus() in an event handler that runs when you click
  // on an element is redundant. If you've clicked the element, it 
  // will get the focus.
  
  var regex = /^[0-9]{5}$/;
  if (regex.test(zip.value)) {
    message.textContent = "Valid";
  } else {
    message.textContent = "Please enter a 5 digit numeric zip code";
  }
}

<table>
  <tr>
    <td>Zip Code:</td>
    <td>
      <!-- Don't use self-terminating syntax. 
           Also type="text" is not necessary since text is the
           default type of input. -->
      <input id="zipcode" name="zipcode" required>
    </td>
  </tr>
</table>
<div id="zipmessage"></div>

К сожалению, существует так много руководств, уроков и учителей, которые на самом деле не знают HTML и JavaScript должным образом и не показывают, как получить код работать". Рабочий код - это не всегда «правильный» код или «хороший» код. Вы должны сообщить своему инструктору о неправильных вещах, которым они учат, что я показал здесь.