I’m trying to get the innerHTML of a clicked button to update my chart but it occasionally returns null value.
Below are my code:

var buttonGroups= svg.selectAll("g.button")
                        .data(methodSelection)
                        .enter()
                            .append("g")
                            .attr("class","button")
                            .attr('value', function(d) {return d;})
                            .attr("transform","translate(" + 360 + "," + 10 + ")")
                            .style("cursor","pointer")
buttonGroups.append("text")
                        .attr("class","buttonText")
                        .attr("font-family","sans-serif")
                        .attr("x",function(d,i) {
                            return x0 + (bWidth+bSpace)*i + bWidth/2;
                        })
                        .attr("y",y0+bHeight/2)
                        .attr("text-anchor","middle")
                        .attr("dominant-baseline","central")
                        .attr("fill","white")
                        .text(function(d) {return d;}) 

// ————————————————–

// On button change, update styling

// ————————————————–

d3.selectAll(".button")
    .on('click', function(event) {
        const selectedMethod = event.target.innerHTML;
        console.log(selectedMethod);
        var selectedLine = d3.select("#" +selectedMethod);

        methodSelection.forEach((method, index) => {
        if (index < 1) return;
        if (selectedMethod == "All") {
           ....
        else {
            if (method == selectedMethod) {
                ....
            }

        }
        
        })
        });

const selectedMethod = event.target.innerHTML; returns null sometimes and I can’t figure out why. Feels like I have been looking for the answers for ages.

Any help would be greatly appreciated!