0

I have the following method where the main intention is to create a div with a class and use those to create a 'container' for a chart. I've commented where necessary to show what the lines are for.

    createChartContainer(chartRef) {

        // bring up the grid object
        for (var chartDataInTable of this.tableData) {

            // if this grid does not have 0 charts
            if(chartDataInTable.summary_charts.length != 0) {
                // create div
                var createDiv = document.createElement('div');

                // generate a string I can use as the class name for the newly created div shown above
                var randomStringAsClassNames = Math.random().toString(36).substring(7);

                // assign the random string as the className for the newly created div
                createDiv.className = 'div_' + randomStringAsClassNames;
                // chartClassName is defined as a string in data: () => ....
                this.chartClassName = createDiv.className;

                // non-negotiable as this shows the details of the created chart
                var eChart = chartRef.chartElement;

                // select the div that we've just created
                var eParent = document.querySelector("." + this.chartClassName + "");

                eParent.appendChild(eChart);
            }
        }
    },

The problem is that console.log(eParent) returns null and we have the following error: Uncaught TypeError: Cannot read property 'appendChild' of null

If it helps, I'm working with ag-grid to create the chart

So in summary, why is eParent.appendChild(eChart) not working? It's because of document.querySelector("." + this.chartClassName + ""), but it should be correct in terms of how it's laid out?

One_for_all
  • 299
  • 1
  • 13
  • Because it's not in the document – CertainPerformance Oct 19 '20 at 23:25
  • How can I put a newly generated element with a class name on the document? – One_for_all Oct 19 '20 at 23:29
  • Figure out where you want to insert it into the document, then do so, eg `appendChild` – CertainPerformance Oct 19 '20 at 23:30
  • To be more specific, I mean the class name is dynamic so I can't just add it in the script tag like so:
    . How should I add it onto the document when both the div and the class name is first generated in the method?
     – One_for_all Oct 19 '20 at 23:39
  • Just keep track of the class name and pass that into `querySelector`? But this is all very strange, you already have a reference to the element, so use that instead - the `createDiv` variable name – CertainPerformance Oct 19 '20 at 23:41
  • By 'keep track of' do you mean the following: createDiv.className = 'div_' + randomStringAsClassNames; ---- AND --- var eParent = document.querySelector('.' + createDiv.className + ''); I've also tried it and it returns null – One_for_all Oct 19 '20 at 23:45
  • Again, you need to put the element into the document if you want to be able to select it with `querySelector` – CertainPerformance Oct 19 '20 at 23:45
  • There's going to be a lot of charts that need to be created so the createChartContainer needs to be able to create multiple different containers each with a different class name. Since it's dynamically written how would I go about putting the element in the document if it hasn't been created yet? For example this
    does not work     – One_for_all Oct 19 '20 at 23:51

0 Answers0