I haven't done any development in a long time and I'm looking to start from scratch on a project turning my raspberry pi into a Spotify remote. I have a pi 4 using the latest raspberry pi OS. I have installed apache and got to my webpage. I see my button displayed but can't seem to see any logs when I press the button. I don't know if it's my chrome settings or my code. Any insight?
<!DOCTYPE html>
<html>
<head>
<title>Spotify Web Playback SDK Quick Start</title>
</head>
<body>
<h1>Spotify Web Playback SDK Quick Start</h1>
<button id="togglePlay">Toggle Play</button>
<script>
document.getElementById('togglePlay').addEventListener('click', console.log('togglePlay Pressed'));
</script>
</body>
</html>
I've changed chrome console settings to enable "Log XMLHttpRequests", "Show timestamps" and "Preserve log upon navigation" I am seeing the "togglePlay Pressed" in the log when the page loads up but not seeing the button presses in the chrome console when I actually press. I don't want the function to run just by loading the page either can someone help a beginner out?
content-scripts.js:1 INS: content-ads.js loaded: http://192.168.1.80/
12:42:29.561 Navigated to http://192.168.1.80/
12:42:29.572 content-scripts.js:1 TSS: content-tss.js loaded: http://192.168.1.80/
12:42:29.573 content-scripts.js:1 INS: content-blocked-items.js loaded: http://192.168.1.80/
12:42:29.579 (index):10 togglePlay Pressed
12:42:29.581 content-scripts.js:1 CONTENT_SHELL: Page allowed. Skipping shell injection blocks
12:42:29.581 content-scripts.js:1 GET TAB ID RESPONSE: {tabId: 558604399}
12:42:29.583 content-scripts.js:1 TSS: excluded result: {excluded: true}
12:42:29.584 content-scripts.js:1 TSS: Excluding content tss (trigger: send-mesage)
Correct way to write event listener -