The words Under construction in black text on a yellow background with diagonal black stipes surrounding it
I'm in the process of moving my site. It's still a work in progress. Please excuse the mess and broken links.

Send An Argument To A Function Inside A Class Via An Event Listener In Vanilla JavaScript

TODO: Pull subtitle into page object

The Problem, I Thought, But No, This Work

This is working without .call(). I thought this was where I was having the problem in other code. I'm going back to figure out where the problem was from.

This Also Works But Seems Unnecessary

This is using `.call()``, but that seems unnecessary, I'm leaving it here until I figured out what happened in the other

code that this seemed to fix.

Debugging Stuff

I'm moving stuff around right now. All this below is helping me figure out where to put stuff

        -- title

Send An Argument To A Function Inside A Class Via An Event Listener In Vanilla JavaScript

This works as far as I can tell,  but I'm new to this approach. 
Let me know if there are gotchas I should be watching out for

(check the console for the output)

-- h2

The Problem, I Thought, But No, This Work

This is working without .call(). I thought
this was where I was having the problem in
other code. I'm going back to figure out
where the problem was from. 

-- html
-- type: showbelow


<input id="problemWidgetInput" type="text"/ >


-- script
-- type: show

class ProblemWidget {
  constructor() {}

  init() {
    problemWidgetInput.addEventListener("input", () => {
      this.level1(problemWidgetInput.value)
    })
  }

  level1(value) {
    console.log(`- Problem Widget Level 1:`)
    console.log(value)
    this.level2(value)
  }

  level2(value) {
    console.log(`- Problem Widget Level 2:`)
    console.log(value)
  }

}


document.addEventListener("DOMContentLoaded", () => {
  const pw = new ProblemWidget()
  pw.init()
})


-- h2

This Also Works But Seems Unnecessary


This is using `.call()``, but that seems 
unnecessary, I'm leaving it here until 
I figured out what happened in the other

code that this seemed to fix. 

-- html
-- type: showbelow

<input id="workingWidgetInput" type="text"/ >

-- script
-- type: show

class Widget {
  constructor() {}

  init() {
    workingWidgetInput.addEventListener("input", () => {
      this.level1.call(this, workingWidgetInput.value)
    })
  }

  level1(value) {
    console.log(`level1: ${value}`)
    this.level2(value)
  }

  level2(value) {
    console.log(`level2: ${value}`)
  }
}

document.addEventListener("DOMContentLoaded", () => {
  const w = new Widget()
  w.init()
})

-- ref
-- url: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this
-- title: this - MDN JavaScript Documentation

-- ref
-- url: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call
-- title: Function.prototype.call() - MDN JavaScript Documentation

-- categories
-- JavaScript 

-- metadata
-- date: 2023-12-30 22:57:27
-- id: 2ai9647o
-- site: aws
-- type: post
-- status: draft