diff --git a/vanilla/counter/package.json b/vanilla/counter/package.json
index 78193a7..21be6d9 100644
--- a/vanilla/counter/package.json
+++ b/vanilla/counter/package.json
@@ -23,6 +23,7 @@
   "devDependencies": {
     "@babel/cli": "7.17.6",
     "@babel/core": "7.22.1",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-proposal-object-rest-spread": "^7.12.1",
     "@babel/plugin-transform-runtime": "7.22.4",
     "@babel/preset-env": "7.22.4",
diff --git a/vanilla/counter/src/index.js b/vanilla/counter/src/index.js
index 72afe22..58be327 100644
--- a/vanilla/counter/src/index.js
+++ b/vanilla/counter/src/index.js
@@ -25,13 +25,15 @@
 import {
   connectExtensionHost,
   LookerExtensionSDK40,
-} from '@looker/extension-sdk'
+} from '@looker/extension-sdk';
 
-;(async () => {
+(async () => {
   const extensionSdk = await connectExtensionHost()
   const sdk40 = LookerExtensionSDK40.createClient(extensionSdk)
   const result = await sdk40.me()
   const name = result.ok ? result.value.display_name : 'Unknown'
+
+  // Write the HTML content
   document.write(`
   <style>
     body {
@@ -59,10 +61,32 @@ import {
     <h1>Looker Counter Extension</h1>
     <h2>Welcome ${name}</h2>
     <h3>This number will increase by one upon every click:</h3>
-    <div class="butt" onclick="event.target.innerHTML = +event.target.innerHTML + (event.shiftKey ? -1 : 1); event.preventDefault
-    ()">0</div>
+    <div class="butt" id="counterButton">0</div>
     <h3>I hope you had fun with this Looker extension.</h3>
     <img width="200" src="https://docs.looker.com/assets/site_images/looker-logo.svg" />
   </div>
-`)
+`);
+
+// Set up the click handler directly (without waiting for DOMContentLoaded)
+const counterButton = document.getElementById('counterButton');
+
+if (!counterButton) {
+  console.error('Counter button not found!')
+  return
+} else {
+  console.log('Counter button found:', counterButton)
+}
+
+counterButton.addEventListener('click', (event) => {
+  console.log('Button clicked!')
+  console.log('Current counter value:', counterButton.innerHTML)
+
+  // Update the counter value
+  counterButton.innerHTML = +counterButton.innerHTML + (event.shiftKey ? -1 : 1)
+  
+  console.log('Updated counter value:', counterButton.innerHTML)
+  event.preventDefault()
+});
+
+
 })()