Thank you for this response. I’m sorry to have been unclear. I’m creating a new Atom Package, and I want to open a panel that the user will click/drag objects around in; for this reason, I need to serve and display html and js code that will be sitting on the user’s machine locally.
I’m able to display information to an
HTMLElement easily, as you suggest, but I’m having trouble turning this panel into anything mouse-interactive – even the most basic responsive code examples I can find don’t work when I add them as the inner html of a panel element.
For example, something as basic as a button that displays the time works fine in a browser, but not as
this.element.innerHTML in my view class’s constructor.
Based on the flight manual’s tutorial, this is the sort of thing I’m departing from, in the view’s constructor:
// Create root element
this.element = document.createElement('div');
<p>Click the button to display the time.</p>
<button onclick="getElementById('demo').innerHTML=Date()">What is the time?</button>
…which displays a clickable button but does not respond by displaying the date/time when clicked – perhaps because I just need to detect a click event and refresh the panel view somehow?
Anyway, I hope this clarifies what I was hoping to ask about – I need the basic example above to behave in my package’s panel as it does when rendered in any web browser: clicking the button should change the HTML and refresh the display.
I can only come up with tortuous solutions so far, like serving my package’s html with the live-server package and then opening up a web view to the served local host, but trying this out quickly got me into a state where Atom would no longer display my project.