'onclick' not working with EJS and Node

I'm making a small Express app using EJS and I'm trying to get an onclick function to pass the value of a selected option. I'm having 2 problems with this, shown below. Any help is greatly appreciated!

onclick

EJS for reference:

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


1) The console.log() happens on page load, but never actually triggers again as I keep clicking between the options.

console.log()

2) All the documentation says that this.value should return the selected value, but this returns what seems to be the Node object, not anything to do with the <select>.

this.value

this

<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]


1 Answer
1

<%= console.log(this) %>


This executes console.log(this) immediately, on the server, and prints the value to the page source.

console.log(this)

If you look at the rendered HTML, you'll see onclick="undefined", because that's what console.log returns.

onclick="undefined"

console.log

You want to render the raw text console.log(this) to the page so that the browser sees it as (client-side) Javascript code.

console.log(this)

console.log()

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.