Почему моя функция JavaScript приводит к rangeError?

1

Довольно неожиданно. Я прочитал кучу ответов с людьми, имеющими аналогичную проблему. Я пробовал все предлагаемые решения (используя e.stopPropagation, используя e.stopImmediatePropagation, используя id вместо тега...), но ничего не получилось. Я развернул одну страницу html через firebase. Я написал сценарий непосредственно в html. Вот мой код:

function onclick(e) {
  /*e.stopPropagation() and e.preventDefault() --YIELDD SAME RESULT*/
  e.stopImmediatePropagation()
  console.log("hello")
}
<h3>Please update your information below</h3>
<form id="login-form" class="reset-form">
  <label>Email:</label>
  <input name="email" type="email" placeholder="@">
  <label>New Password:</label>
  <input name="password" type="password">
  <label>Confirm Password:</label>
  <input name="second-password" type="password">
  <button id="submit-button" type="button" onclick="onclick()">Update</button>
</form>
</div>
</body>

Желаемое поведение: при нажатии кнопка с идентификатором регистрирует сообщение в консоли devtools.

ps Я уверен, что есть основная ошибка, которую я делаю, но я не могу найти ее. Пожалуйста помоги!

  • 1
    Я не вижу кода JQuery ....
Теги:

4 ответа

1
Лучший ответ

onclick - это имя общего свойства DOM. Когда функция с этим именем существует в глобальной области (как это делает ваш), она по существу становится свойством window объекта и может перезаписывать глобальную. Вызовите свою функцию обратного вызова что-то еще или переместите ее из глобальной области, и она будет работать.

Кроме того, e.stopImmediatePropagation() скорее всего не требуется для вашего случая использования.

Наконец, ничего не может произойти после </body> кроме </html>. Элементы <script> разрешены в head и body, но не где-то еще.

<h3>Please update your information below</h3>
<form id="login-form" class="reset-form">
  <label>Email:</label>
  <input name="email" type="email" placeholder="@">
  <label>New Password:</label>
  <input name="password" type="password">
  <label>Confirm Password:</label>
  <input name="second-password" type="password">
  <button id="submit-button" type="button" onclick="onclick1()">Update</button>
</form>

<script>
  function onclick1(e) {
    console.log("hello")
  }
</script>

Теперь, поскольку вы просто изучаете все это, дайте убедиться, что вы сошли с правой ноги. Существует soooo очень плохой HTML и JavaScript, всплывающие вокруг, и вредные привычки все еще используются сегодня, потому что большинство людей не знают ничего лучшего, поэтому они просто копируют/вставляют код другого пользователя, который, кажется, работает.

Не используйте в первую очередь встроенные обработчики событий HTML (onclick, onmouseover и т.д.). Отделите свой JavaScript от своего HTML и следуйте современным, основанным на стандартах кодексу. Существует много причин не использовать встроенные обработчики событий HTML. Вместо этого используйте метод .addEventListener().

Далее, элемент <label> является семантическим элементом, который работает одним из двух способов:

  1. Он имеет for атрибута, который имеет значение, которое совпадает с полем формы, что это метка "для":

<label for="txtFirstName">First Name:</label>
<input id="txtFirstName">
  1. Он содержит элемент поля формы, который является меткой для:

<label>First Name: <input id="txtFirstName"></label>

В любом случае вы сообщаете клиенту, что существует связь между label и полем формы, для которой она предназначена. Это позволяет пользователю щелкнуть или прикоснуться к метке и активировать поле формы. Это также очень полезно для тех, кто полагается на вспомогательные технологии (например, программы чтения с экрана) для использования Интернета.

Таким образом, все это вместе, ваш код переработал бы так (я добавил немного CSS, чтобы сделать страницу немного более чистой, чтобы смотреть, но ничего из этого не требуется):

label { display:block; width:200px; margin-bottom:.5em; }
button { margin-top: 1em; font-size:1.2em; padding:5px; }
<h3>Please update your information below</h3>
<form id="login-form" class="reset-form">
  <label>Email: <input name="email" type="email" placeholder="@"></label>
  <label>New Password: <input name="password" type="password"></label>
  <label>Confirm Password: <input name="second-password" type="password"></label>
  <button id="submit-button" type="button">Update</button>
</form>

<script>
  // get a reference to the DOM element you want to work with
  let btn = document.getElementById("submit-button");
  
  // configure the event handler in JavaScript, not in HTML
  btn.addEventListener("click", logToConsole);
 
  // give your functions meaningful names
  function logToConsole(e) {
    console.log("hello")
  }
</script>
  • 1
    Большое спасибо, Скотт, я использовал ярлык не полностью / неправильно все время. Что касается моих Js, я обычно разделяю это, но я фактически не знал, что это была плохая привычка не делать этого. Это очень полезно!
0

Я думаю, что лучше всего изменить, какое событие останавливается, что похоже на форму. Непонятно, почему вы получаете проблему с диапазоном, но это должно сработать.

<!DOCTYPE html>
<html>
<body>

<form id="login-form" class="reset-form" >
<label>Email:</label>
<input name="email" type="email" placeholder="@">
<label>New Password:</label>
<input name="password" type="password">
<label>Confirm Password:</label>
<input name="second-password" type="password">
<input type="submit">Update</button>
</form>

<script>

document.getElementById("login-form").addEventListener("submit", function(event){
    event.preventDefault();
    alert('boogy');
});

</script>

</body>
</html>
0

<button id="submit-button" type="button" onclick="onclick()">Update</button> вызывает бесконечный цикл. Вы переопределяете метод onclick который в основном заставляет ваш код сказать: "Когда меня кликнут, нажмите меня" до бесконечности.

Измените имя function onclick() на что-нибудь еще, например function hello() и она будет работать.

Здесь вы можете играть с кодепином. https://codepen.io/anon/pen/mzajGd

  • 0
    Пожалуйста, не размещайте код на сторонних сайтах, так как эти ссылки могут со временем исчезнуть, и тогда ваш ответ может потерять свое значение. Просто включите любой код прямо в ваш ответ. Если это код, который может быть выполнен, сделайте его «фрагментом кода».
  • 0
    Мой ответ самодостаточен без ссылки. Ссылка просто бонус. Я люблю внешние ссылки, как и многие другие, - с этим я не согласен.
Показать ещё 7 комментариев
-3

Привет, Стив и добро пожаловать в переполнение стека.

Сначала разместите свою кнопку, есть несколько способов сделать это:

<button class="ui-btn" id="cmdHello">Push Me</button>
<a href="#" class="ui-btn" id="cmdHello2">Yet another Button</a>

Теперь отреагируйте на это Нажмите событие:

<script type="application/javascript">
    $(document).bind("pageinit", function() {
        $(document).on("click", "#cmdHello", function(evt) {
            console.log("Hello World");
        });
    });
</script>

Это должно делать свое дело.

  • 1
    Этот ответ на самом деле не решает проблему. OP уже подключает прослушиватель событий. Проблема заключается в объеме этого слушателя и имени слушателя. Ваш ответ показывает, как настроить делегирование события, но не соответствует сути вопроса.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню