OnClickListener in Electron

Question

What am I doing wrong? If I select the same element from Console and add a click listener… it works… however, this code doesn't work

const Template = require('./Template')
const mustache = require('mustache')
const DOMHelper = require('./DOMHelper')

class SymbolDefiner extends Template {
  constructor (key, data) {
    super(key)
    this._data = data
  }

  render () {
    super.render(arguments)
    const parent = this._parent
    const props = this._props
    const eventListener = this._listener

    const addSymbol = DOMHelper.createElement('button.btn.btn-primary', parent)
    const btnText = document.createTextNode('Add Symbol')
    addSymbol.appendChild(btnText)

    console.log(addSymbol) // this log succeeds
    addSymbol.addEventListener('click', function () {
        console.log('xx')
    })
  }
}

module.exports = SymbolDefiner

The DOMHelper is just an easy function to add elements into the DOM by using very simple 'div#id.class-1.class-2' string. Here is the code for DOMHelper:

const obj = {}

obj.createElement = function (selector, parent, props) {
    const details = selector.split('#')
    let eleName, eleId, classList
    if (details.length > 1) {
        // id is present
        eleName = details[0]
        const attribs = details[1].split('.')
        eleId = attribs.shift()
        classList = attribs
    } else {
        const attribs = details[0].split('.')
        eleName = attribs.shift()
        classList = attribs
    }

    const element = document.createElement(eleName)
    element.setAttribute('id', eleId || '')
    for (var i in classList) {
        element.classList.add(classList[i])
    }

    if (props) {
        for (var key in props) {
            element.setAttribute(key, props[key])
        }
    }

    if (parent) {
        parent.appendChild(element)
    }

    return element
}

module.exports = obj

Answer 1

in the index.html page I added all the code to the script, this is based off of a blank electron quick getting start CLI from here

the only things I changed was I didn't separate out the DOMHelper, I just added it inline and I use obj.createElement() directly. It worked perfectly, so everything you have written is correct. The only possible thing might be checking every reference of the import require('./renderer.js') but most likely not since the file itself is blank for me.

so your code is all golden hopefully this helps where to look

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Hello World!</title>
</head>

<body>
  <h1>Hello World!</h1>
  <!-- All of the Node.js APIs are available in this renderer process. -->
  We are using Node.js <script>document.write(process.versions.node)</script>, Chromium
  <script>document.write(process.versions.chrome)</script>, and Electron
  <script>document.write(process.versions.electron)</script>.
  <div id="parentNode"></div>
</body>

<script>
  // You can also require other files to run in this process
  require('./renderer.js')
  var obj = {};
  obj.createElement = function(selector, parent, props) {
    const details = selector.split('#')
    let eleName, eleId, classList
    if (details.length > 1) {
      // id is present
      eleName = details[0]
      const attribs = details[1].split('.')
      eleId = attribs.shift()
      classList = attribs
    } else {
      const attribs = details[0].split('.')
      eleName = attribs.shift()
      classList = attribs
    }

    const element = document.createElement(eleName)
    element.setAttribute('id', eleId || '')
    for (var i in classList) {
      element.classList.add(classList[i])
    }

    if (props) {
      for (var key in props) {
        element.setAttribute(key, props[key])
      }
    }

    if (parent) {
      parent.appendChild(element)
    }

    return element
  }

  var parent = document.getElementById('parentNode');
  const addSymbol = obj.createElement('button.btn.btn-primary', parent)
  const btnText = document.createTextNode('Add Symbol')
  addSymbol.appendChild(btnText)

  console.log(addSymbol) // this log succeeds
  addSymbol.addEventListener('click', function() {
    console.log('xx')
  })
</script>

</html>

OnClickListener in Electron

Question

1 answers

solution1
0 2017-09-13 02:33:56

OnClickListener in Electron

Question

1 answers

solution1 0 2017-09-13 02:33:56

solution1
0 2017-09-13 02:33:56