浏览器控制台错误

Browser Console Error

本文关键字：错误 控制台 浏览器      更新时间：2023-09-26

关于下面的答案，我在浏览器控制台中遇到以下错误

根据浏览器控制台，错误在此行上

未捕获的类型错误：无法设置 nullcal.php：26 的属性"onclick"（匿名函数）

当单击除 1 月、4 月、11 月以外的日期时，窗体不会打开。

像 26 上的代码来自控制台浏览器是 

document.getElementById('trigger0').onclick = function()     
{showForm()};document.getElementById('trigger1').onclick = function()    
{showForm()};document.getElementById('trigger2').onclick = function() 
{showForm()};document.getElementById('trigger3').onclick = function() 
{showForm()};document.getElementById('trigger4').onclick = function() 
{showForm()};document.getElementById('trigger5').onclick = function() 
{showForm()};document.getElementById('trigger6').onclick = function() 
{showForm()};document.getElementById('trigger7').onclick = function()    
{showForm()};document.getElementById('trigger8').onclick = function() 
{showForm()};document.getElementById('trigger9').onclick = function() 
{showForm()};document.getElementById('trigger10').onclick = function() 
{showForm()};document.getElementById('trigger11').onclick = function() 
{showForm()};document.getElementById('trigger12').onclick = function() 
{showForm()};document.getElementById('trigger13').onclick = function() 
{showForm()};document.getElementById('trigger14').onclick = function() 
{showForm()};document.getElementById('trigger15').onclick = function() 
{showForm()};document.getElementById('trigger16').onclick = function() 
{showForm()};document.getElementById('trigger17').onclick = function() 
{showForm()};document.getElementById('trigger18').onclick = function() 
{showForm()};document.getElementById('trigger19').onclick = function() 
{showForm()};document.getElementById('trigger20').onclick = function() 
{showForm()};document.getElementById('trigger21').onclick = function() 
{showForm()};document.getElementById('trigger22').onclick = function() 
{showForm()};document.getElementById('trigger23').onclick = function() 
{showForm()};document.getElementById('trigger24').onclick = function() 
{showForm()};document.getElementById('trigger25').onclick = function() 
{showForm()};document.getElementById('trigger26').onclick = function() 
{showForm()};document.getElementById('trigger27').onclick = function() 
{showForm()};document.getElementById('trigger28').onclick = function() 
{showForm()};document.getElementById('trigger29').onclick = function() 
{showForm()};document.getElementById('trigger30').onclick = function() 
{showForm()};document.getElementById('trigger31').onclick = function()   
{showForm()};document.getElementById('trigger32').onclick = function()  
{showForm()};document.getElementById('trigger33').onclick = function()    
{showForm()};document.getElementById('trigger34').onclick = function()     
{showForm()};   function showForm(){

它所涉及的代码是： 

$timestamp = mktime(0,0,0,$cMonth,1,$cYear);
$maxday = date("t",$timestamp);
$thismonth = getdate ($timestamp);
$startday = $thismonth['wday'];
$today = getdate();
for ($i=0; $i<($maxday+$startday); $i++) {
if(($i % 7) == 0 ) echo "<tr> ";
if($i < $startday) echo "<td></td> ";
  else echo "<td align='center' valign='middle' height='20px'><a href='#'    
 id='trigger" . $i . "'>". ($i - $startday + 1) . "</a></td>";  
  $jsEvent[] = "document.getElementById('trigger" . $i . "').onclick =     
 function() {showForm()};";
  if(($i % 7) == 6 ) echo "</tr> ";
  }
  ?>

JavaScript代码 

 <script type="text/javascript">
 <?php foreach($jsEvent as $event){
        echo $event;
     } ?>
 function showForm(){
     document.getElementById('timeslots').style.display="block";
 };
 </script>

你可以使用javascript来实现这一点。您可以使用 onClick=" 来触发隐藏/显示表单的 js 函数。

<script type="text/javascript">
   <?php foreach($jsEvent as $event){
            echo $event;
         } ?>
   function showForm(){
         document.getElementById('timeslots').style.display="block";
    };
</script>

然后更改 

<table width='400' border='2' cellpadding='2' cellspacing='2' id='timeslots'
  style="visibility:invisible"'>

自

<table width='400' border='2' cellpadding='2' cellspacing='2' id='timeslots'
  style="display:none;"'>

还要更改此设置： 

<td align='center' valign='middle' height='20px'><a href='#'>". ($i - $startday + 1) . "</a></td>

对此：

<td align='center' valign='middle' height='20px'><a href='#' id='trigger" . $i . "'>". ($i - $startday + 1) . "</a></td>

请记住，"editform"只是一个建议的ID，需要与您正在使用的触发器/日期的ID匹配。

我已经尝试并搜索了高低，但我无法想出另一个解决方案，用下面的代码替换你的 for 循环（for 和其中的所有内容）

for ($i=0; $i<($maxday+$startday); $i++) {
if(($i % 7) == 0 ){
 echo "<tr> ";
}
if($i < $startday){
 echo "<td></td> ";
} else{
 $jsEvent[] = "document.getElementById('trigger" . $i . "').onclick =     
 function() {showForm()};" . PHP_EOL;     
 echo "<td align='center' valign='middle' height='20px'><a href='#'    
 id='trigger" . $i . "'>". ($i - $startday + 1) . "</a></td>"; 
}

  if(($i % 7) == 6 ){
      echo "</tr> ";
 }
  }
JS函数

可以更高级，例如检查或隐藏其他打开的表单，这只是一个简单的JS函数，按ID显示单个表单

更新根据:)评论中的信息更新了我的答案，现在您只需要更改第一个文档的 ID。GetelemtentByID 以匹配要触发函数的"链接/文本"的 ID。

我没有

阅读您的代码，我认为php代码机制适用于创建日历，您需要的是将您的表单放在具有style属性的<div></div>中，并在其中存储一些CSS，使您的部门不可见，这是display:none;或visibility:hidden。 您也可以在class属性中设置这些设置，并将样式放在外部css中。 像这样：

<div style="display:none;" id="calendar"><?php #your php code here ?></div>

然后，您需要在要使div可见的对象上放置一个简单的 Java 脚本，如下所示：

<a onclick="document.getElementById('calendar').style.display='block'"> click me to show calendar </a>
相关文章：