Uncaught Error: DOM element provided is null or undefined in plotly JS

Question

This is my Code:

frequencywindow.webContents.executeJavaScript(`graphDiv = document.getElementById("myDiv");`)
var traceA = {
  x: [1, 2, 3, 4, 16, 17, 26],
  y: [1, 40, 9, 60, 4, 20, 10],
  type: 'scatter'
};
var data = [traceA];
var layout = {
  title:'A Line Chart in Plotly'
};
Plotly.plot( graphDiv, data, layout );

I am using plotly in my electron application. I am getting an error like "Uncaught Error: DOM element provided is null or undefined". I am new to plotly. Can somebody help me?

Do you have an element with the id of `myDiv`? Is your JavaScript waiting for html to be loaded before running? — Craicerjack, Jul 09 '20 at 09:26
I have myDiv in my html. But my javascript is not waiting for html to be loaded — Surendar, Jul 09 '20 at 09:42
Then your element probably hasnt loaded when the JavaScript runs so your JS cant find it and it ends up being null. — Craicerjack, Jul 09 '20 at 10:21
can you please suggest me how to check if the page is loaded entirely or not? — Surendar, Jul 09 '20 at 11:35

score 6 · Answer 1 · answered Aug 19 '20 at 08:38

6

Solution:

Place the Javascript code (or reference to it) at the end of the HTML body.

Explanation:

Uncaught Error: DOM element provided is null or undefined means that the HTML element with id='myDiv' is not present on the HTML page at the time when the Javascript code is being executed.

By placing the Javascript code at the end of the HTML body, you let the whole HTML page load before calling the code, and thus, the code can "see" the HTML element with id='myDiv'.

answered Aug 19 '20 at 08:38

Jakub Holan

303
1
8

2

+1. It's simple, well explained, answers like these that are the gold of SO. An easy and permanent lesson learned for all who come here. – kkelly18 Jan 03 '21 at 16:36

Uncaught Error: DOM element provided is null or undefined in plotly JS

1 Answers1