Uncaught TypeError: Cannot read properties of null (reading 'toLowerCase')

I got an error in JavaScript when I open my website in Chrome or MSEdge. Error is Uncaught TypeError: Cannot read properties of null (reading ‘toLowerCase’). When I open in Internet Explorer 11, it’s working perfectly. But in Chrome, when i click on tabs in Navbar, it got JS errors. May I know how can I fix that? I will insert both html and JavaScript.

if (currentColor == ''
        || currentColor.toLowerCase() == theDefaultColor.toLowerCase()) {
        if (theAction == 'over' && thePointerColor != '') {
            newColor              = thePointerColor;
        }
        else if (theAction == 'click' && theMarkColor != '') {
            newColor              = theMarkColor;
        }
    }
echo "<html>";
echo "<head><title>" . $toolsname . "</title>";
echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"\web/jquery/css/custom-theme/jquery-ui-1.8.6.custom.css\"/>";
echo "<script src=\"\web/jquery/js/jquery-1.4.4.min.js\" type=\"text/javascript\"></script>";
echo "<script src=\"\web/jquery/js/jquery-ui-1.8.6.custom.min.js\" type=\"text/javascript\"></script>";
echo "<script src=\"\web/jquery/js/pointer_edge.js\" type=\"text/javascript\"></script>";
echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"web/jquery/css/global.css\">";

echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"_local.css\"/>";
echo "<script src=\"_tabadd.js\" type=\"text/javascript\"></script>";
echo "<script src=\"_tabedit.js\" type=\"text/javascript\"></script>";
echo "<script src=\"_tabhist.js\" type=\"text/javascript\"></script>";
echo "<script src=\"_tabProbSearch.js\" type=\"text/javascript\"></script>";
echo "<script src=\"probEquipProgram/_tabProbEquip.js\" type=\"text/javascript\"></script>";
echo "<script src=\"_common.js\" type=\"text/javascript\"></script>";
echo "</head>";
echo "<body>";
echo "<form name=\"equipment\" method=\"post\" target=\"_self\">";
	echo "<div class=\"divprojname\">" . $toolsname . "</div>";
	//<p align=center style=\"margin-top: -20px;\"><font color=red size=3px><b>**Please Add New Equipment to ePCR**</b></font></p>
	echo "<div class=\"divcontainer\">";
		echo "<div id=tabs style=\"width=100%;\">";
			echo "<ul>";
				echo "<li><a href=\"#tabs-1\">Edit Equipment</a></li>";
				echo "<li><a href=\"#tabs-2\">Add Equipment</a></li>";
				echo "<li><a href=\"#tabs-3\">Queue for Approval</a></li>";
				echo "<li><a href=\"#tabs-4\">History</a></li>";
				echo "<li><a href=\"#tabs-5\">Equip Config</a></li>";
        		echo "<li><a href=\"#tabs-6\">Prober Search Tool</a></li>";         
        		echo "<li><a href=\"#tabs-7\">Prober Equipment Program</a></li>";    
			echo "</ul>";
			echo "</div>";
			echo "</div>";
			echo "</form>";
			echo "</body>";
			echo "</html>";

Hi,
may I ask why you wrote each line of html inside the php code? If you separate php and html, maybe one possible cause of errors already disappears, because the code becomes better readable and you don’t have to escape characters like slashes.

Your problem might be caused by the wrong order of loading: The html could be loaded after your Javascript, then you get errors because the elements you’re applying the Javascript to cannot be found.
Try to add a defer property to your script tag like

<script src="_common.js" type="text/javascript" defer></script>

still causing the same problem. for HTML codes, previous person did it. I have no idea why he was written in php. Is there a way to fix?

So this isn’t your code?
Usually, you can write your html as normal html code and just wrap it in php tags.
Since we don’t see the initialization of the variables currentColor and thePointerColor I can’t say why they aren’t undefined. But you wrote that it works in certain browsers, that’s why I thought it might be a loading issue.