event listener javascript functions

[VRosi]

What would you like or expect to see?

Ability to update elements of screen depending on the users action like for exemple "click on a button >>> change some text on screen.

What is currently happening?

Currently, we can't update content depending on the user's action, which is too bad, considering the possibilities of javascripts methods.

Please describe the steps needed to reproduce this phenomenon

Try adding the call of a javascript function declared in the script with the "onclick" attribute for exemple. Or use the addEventListener method...

Finally, please tell us which browser you're using (and the version thereof)

I am using Mozilla 74.0

Thank you

[ZeroPie]

hi Vrosi! your question is a bit older so you probably already moved on or figured something out. You could leverage the plugin system by doing something like this.

import CustomJs from './CustomJS.js'
...
export const participantInfo = {
  content: `<form class='form'>
      <label> Name </label>
      <input type="text" name="participant-id" id="participant-id">
      <button type="submit" id="start">Starten</button> 
    </form>`,
  plugins: [
    new CustomJs(() => {
      const startButton = document.getElementById('start')
      const nameInput = document.getElementById('participant-id')
      nameInput.addEventListener('input', setValue)
      startButton.addEventListener('click', enterFullScreen)
      startButton.addEventListener('click', submitData)
    })
  ]
...

export default class CustomJs {
  constructor (callback) {
    this.callback = callback
  }

  handle (context, event) {
    if (event === 'show') {
      this.callback()
    }
  }
}