Передача возвращаемого значения функции обработчику событий

#javascript #html

#javascript #HTML

Вопрос:

Я самообучаюсь Javascript и написал следующий код для понимания обработчиков событий.

 <html>
<head>
  <script language=Javascript>
    function sum(first, second) {
      // return first   second
      return 42
    }

    function update(label, value) {
      document.getElementById(label).innerHTML = value
    }

    function foo() {
      return 42
    }
  </script>
</head>
<body>
  <form name="f1">
    One: <input type=text name=firstNum value=""><br>
    Two: <input type=text name=secondNum value=""><br>
    Sum: <label type=text id="OutSum"></label><br>

    <input type=button value='Update' onClick='update("OutSum", sum(4, 5))'> // <----
  </form>
  

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

У меня возникли проблемы со строкой, отмеченной стрелкой // <---- выше. Если я вместо этого заменю его на приведенный ниже, тогда код будет работать.

 <input type=button value='Update' onClick='update("OutSum", foo())'>
  

Нужно ли мне использовать другой синтаксис, если метод принимает параметры?

PS: Я понимаю, что, вероятно, есть лучший способ / стиль для этого, но я использую это только для того, чтобы узнать, возможно ли такое объединение функций в цепочку, и если да, то как его использовать.

Комментарии:

1. Какие-либо ошибки в консоли?

2. Все ли строки расположены в том порядке, который вы нам показываете?

3. Я скопировал и вставил его, он работает и у меня.

4. Атрибут language для элементов script устарел в HTML 4 и удален (устарел) в HTML5.

Ответ №1:

В вашем коде нет проблем. пожалуйста, проверьте ссылку ниже.

Кодовое соединение

Если это не будет работать корректно, дайте мне знать более подробную информацию.