Causing Cannot read properties of undefined-CodePudding

Currently I got error Uncaught TypeError: Cannot read properties of undefined (reading 'split') when I click and it doesn't show the new window. This error only causing when I started to use our website in Microsoft Edge. Before that we were using in IE11. But currently, IE11 is shutting down so tryna start to use in Edge and causing that error. May I know how to fi it? In previously, it works well in IE11 and causing no error.

var newWindow;
function openBreakdown(x){
    // alert('kpi breakdown is not yet complete.');

    var data = x.split('|');
    var mnth = data[0]; //corresponding month, january starts at 7 onwards...
    var typx = data[1]; //type of report downtime %, mttr, mtbi, longdown etc...
    var rprt = data[2]; //type of report duration (y, q, m, w)...
    
    // alert(typx);
    if(typx == 'tldw'){
        newWindow = window.open("kpi_breakdown.php?month=" mnth "&type=" typx "&rprt=" rprt, "_blank", "location=no, toolbar=no, scrollbars=yes, resizable=yes, top=80, left=310, width=450, height=800");
    } else {
        newWindow = window.open("kpi_breakdown.php?month=" mnth "&type=" typx "&rprt=" rprt, "_blank", "location=no, toolbar=no, scrollbars=yes, resizable=yes, top=80, left=310, width=900, height=800");
    }

}

Above codes are JavaScript codes. Error is causing in x.split("|") line.

if(($y >= 32 || $y >= $endLast) && $x < $endRowColorCoding){

                        //echo "<td>";
                        //onClick='openBreakdown(this.value);'
                        echo "<td class='bdata$sub' id='trgt$t' value='$year$mnth|$varname[$x]|$rprt' onClick='openBreakdown(this.value);' title='$year$mnth|$varname[$x]|$rprt'>";

echo "<td class='data$sub' id='trgt$t' onClick='openBreakdown(this.dataset.value);' data-value='$year$mnth|$varname[$x]|$rprt' title='$year$mnth|$varname[$x]|$rprt'>";
                        echo $val[$y][$x];                          
                        $csv .= $val[$y][$x].",";
                        // if($y == 0 || $y == 4  || $y == 5 || $y == 9 || $y == 21 || $reportDuration[$y] == 'qtd' || $reportDuration[$y] == 'mtd'){ $csv .= ","; }
                        if($y == 0 || $y == 4  || $y == 5 || $y == 9 || $y == 10 || $y == 14 || $y == 15 || $y == 31 || $y == 19 || $y == 45 || $reportDuration[$y] == 'qtd' || $reportDuration[$y] == 'mtd'){ $csv .= ","; }
                    echo "</td>";

CodePudding user response：

The HTMLTableCellElement does not have a value property so this.value in your onClick attribute will be undefined.

If you need arbitrary values attached to your elements, I would recommend using data attributes.

For example, replace the value attribute with data-value and access the data using this.dataset.value.

echo "<td
    class='data$sub'
    id='trgt$t'
    onclick='openBreakdown(this.dataset.value);' 
    data-value='$year$mnth|$varname[$x]|$rprt' 
    title='$year$mnth|$varname[$x]|$rprt'
>";

CodePudding user response：

The value property is for inputs fields only, the <td> tag doesn't have you can send to the function the event object and the function get the text content of the td from the event object. Like this

var newWindow;
function openBreakdown(event){
    let x = event.target.textContent

    // alert('kpi breakdown is not yet complete.');

    var data = x.split('|');
    var mnth = data[0]; //corresponding month, january starts at 7 onwards...
    var typx = data[1]; //type of report downtime %, mttr, mtbi, longdown etc...
    var rprt = data[2]; //type of report duration (y, q, m, w)...
    
    // alert(typx);
    if(typx == 'tldw'){
        newWindow = window.open("kpi_breakdown.php?month=" mnth "&type=" typx "&rprt=" rprt, "_blank", "location=no, toolbar=no, scrollbars=yes, resizable=yes, top=80, left=310, width=450, height=800");
    } else {
        newWindow = window.open("kpi_breakdown.php?month=" mnth "&type=" typx "&rprt=" rprt, "_blank", "location=no, toolbar=no, scrollbars=yes, resizable=yes, top=80, left=310, width=900, height=800");
    }

}

You should write event in html when send the event object.

echo "<td
    class='data$sub'
    id='trgt$t'
    onclick='openBreakdown(event);' 
    title='$year$mnth|$varname[$x]|$rprt'
>";

Try this it should work