Onclick не работает с EJS и Node

Я создаю небольшое приложение Express с использованием EJS и пытаюсь заставить функцию onclick передать значение выбранной опции. У меня с этим возникают 2 проблемы, как показано ниже. Любая помощь приветствуется!

EJS для справки:

<select class = "dropdown" onclick = "<%= console.info(this) %>">
    <option disabled selected value> -- Select Environment -- </option>
    <% environments.forEach(env => { %>
        <option value = "<%= env %>"><%= env %></option>
    <% }) %>
</select>

1) console.info() происходит при загрузке страницы, но на самом деле никогда не запускается снова, поскольку я продолжаю нажимать между опциями.

2) Вся документация говорит, что this.value должен возвращать выбранное значение, но this возвращает то, что кажется объектом Node, а не <select>.

{ console: [Getter],
  DTRACE_NET_SERVER_CONNECTION: [Function],
  DTRACE_NET_STREAM_END: [Function],
  DTRACE_HTTP_SERVER_REQUEST: [Function],
  DTRACE_HTTP_SERVER_RESPONSE: [Function],
  DTRACE_HTTP_CLIENT_REQUEST: [Function],
  DTRACE_HTTP_CLIENT_RESPONSE: [Function],
  COUNTER_NET_SERVER_CONNECTION: [Function],
  COUNTER_NET_SERVER_CONNECTION_CLOSE: [Function],
  COUNTER_HTTP_SERVER_REQUEST: [Function],
  COUNTER_HTTP_SERVER_RESPONSE: [Function],
  COUNTER_HTTP_CLIENT_REQUEST: [Function],
  COUNTER_HTTP_CLIENT_RESPONSE: [Function],
  global: [Circular],
  process:
   process {
     title: '  - nodemon  app.js',
     version: 'v8.9.3',
     moduleLoadList:
      [ <stuff> ],
     versions: { http_parser: '2.7.0',
  node: '8.9.3',
  v8: '6.1.534.48',
  uv: '1.15.0',
  zlib: '1.2.11',
  ares: '1.10.1-DEV',
  modules: '57',
  nghttp2: '1.25.0',
  openssl: '1.0.2n',
  icu: '59.1',
  unicode: '9.0',
  cldr: '31.0.1',
  tz: '2017b' },
     arch: 'x64',
     platform: 'win32',
     release:
      { <stuff> },
     env:
      { <stuff> },
     pid: 8532,
     features:
      { <stuff> },
     _needImmediateCallback: true,
     execPath: 'C:\\Program Files\\nodejs\\node.exe',
     debugPort: 9229,
     _startProfilerIdleNotifier: [Function: _startProfilerIdleNotifier],
     _stopProfilerIdleNotifier: [Function: _stopProfilerIdleNotifier],
     _getActiveRequests: [Function: _getActiveRequests],
     _getActiveHandles: [Function: _getActiveHandles],
     reallyExit: [Function: reallyExit],
     abort: [Function: abort],
     chdir: [Function: chdir],
     cwd: [Function: cwd],
     umask: [Function: umask],
     _kill: [Function: _kill],
     _debugProcess: [Function: _debugProcess],
     _debugPause: [Function: _debugPause],
     _debugEnd: [Function: _debugEnd],
     hrtime: [Function: hrtime],
     cpuUsage: [Function: cpuUsage],
     dlopen: [Function: dlopen],
     uptime: [Function: uptime],
     memoryUsage: [Function: memoryUsage],
     binding: [Function: binding],
     _linkedBinding: [Function: _linkedBinding],
     _setupDomainUse: [Function: _setupDomainUse],
     _events:
      { warning: [Function],
        newListener: [Function],
        removeListener: [Function],
        SIGWINCH: [Array] },
     _rawDebug: [Function],
     _eventsCount: 4,
     domain: null,
     _maxListeners: undefined,
     _fatalException: [Function],
     _exiting: false,
     assert: [Function],
     config: { target_defaults: [Object], variables: [Object] },
     emitWarning: [Function],
     nextTick: [Function: nextTick],
     _tickCallback: [Function: _tickCallback],
     _tickDomainCallback: [Function: _tickDomainCallback],
     stdout: [Getter],
     stderr: [Getter],
     stdin: [Getter],
     openStdin: [Function],
     exit: [Function],
     kill: [Function],
     argv0: 'node',
     mainModule:
      Module {
        id: '.',
        exports: [Object],
        parent: null,
        filename: <stuff>,
        loaded: true,
        children: [Array],
        paths: [Array] },
     _immediateCallback: [Function: processImmediate] },
  Buffer:
   { [Function: Buffer]
     poolSize: 8192,
     from: [Function],
     alloc: [Function],
     allocUnsafe: [Function],
     allocUnsafeSlow: [Function],
     isBuffer: [Function: isBuffer],
     compare: [Function: compare],
     isEncoding: [Function],
     concat: [Function],
     byteLength: [Function: byteLength],
     [Symbol(node.isEncoding)]: [Function] },
  clearImmediate: [Function],
  clearInterval: [Function],
  clearTimeout: [Function],
  setImmediate: { [Function: setImmediate] [Symbol(util.promisify.custom)]: [Function] },
  setInterval: [Function],
  setTimeout: { [Function: setTimeout] [Symbol(util.promisify.custom)]: [Function] } }
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
1 756
1

Ответы 1

<%= console.info(this) %>

Это выполняет console.info(this)сразу, на сервере и распечатывает значение в источник страницы.

Если вы посмотрите на визуализированный HTML, вы увидите onclick = "undefined", потому что это то, что возвращает console.info.

Вы хотите отобразить необработанный текст console.info(this) на странице, чтобы браузер видел его как (клиентский) код Javascript.

Спасибо! Я пробовал это раньше, и console.info() не работал (мой узел --inspect по какой-то причине не проверяет узел), но я переключил его на предупреждение, и он отображает правильное значение! Спасибо!

Ken 29.08.2018 02:12

Это работает в браузере; вам нужно посмотреть в консоль браузера.

SLaks 29.08.2018 17:41

Другие вопросы по теме