为什么属性为空且功能未定义答案

【问题标题】：why is property null and function undefined为什么属性为空且功能未定义
【发布时间】：2017-11-17 11:53:48
【问题描述】：

我有遵循这种格式的复选框：

<input type="checkbox" id="Ancient" name="tag" value="Ancient" checked="checked" 
onclick="calc();"> Ancient<br>

在function Calc() 的开头没有window.onload =，我点击每个复选框都会得到这个：

未捕获的类型错误：无法读取属性 'checked' of null 在计算时

window.onload = 我得到了同样的错误，但我没有点击一个复选框，它马上就在那里，并且指的是第一个实例是这样的：

if (document.getElementById('Ancient,Commemorative').checked){   
  $(".Ancient,Commemorative").show();
}else {
  $(".Ancient,Commemorative").hide();
}

当我像以前没有window.onload 那样选择其他复选框时，不会发生错误。

不知道是不是因为这个结果有两个标签，逗号有问题？

当包含 window.onload = 时，我也会为我点击的每个复选框得到这个：

未捕获的引用错误：未定义计算在 HTMLInputElement.onclick

这是我的代码：

<script>
window.onload =  function calc(){  
    <?php
    foreach ($coins as $coin){
    ?>

        if (document.getElementById('<?php echo $coin->tags ?>').checked){   
          $(".<?php echo $coin->tags ?>").show();
        }else {
          $(".<?php echo $coin->tags ?>").hide();
        }

    <?php   
    }
    ?>  
};
</script>

请有人解释一下我是如何处理这个问题的？

我添加 window.onload 最初认为 javascript 代码在 DOM 准备好之前执行。也许这是对的，因为我现在还没有得到所有结果，只有第一个，恰好有两个硬币标签。

【问题讨论】：

window.onload = function calc(){ - 不会创建名为 calc 的函数 - 这是一个命名函数表达式
document.getElementById('Ancient,Commemorative') 返回null，它是无效的 ID 选择器..
calc() 是一个通过点击事件执行的函数，对 - 所以，最后一个代码 sn-p，删除 windows.onload = 其余的应该保留，你应该是金色的（一旦你找出之前的 cmets 解决方案）
如果你有 jQuery，使用 jQuery
$(".<?php echo $coin->tags ?>").toggle($('#<?php echo $coin->tags ?>').is(":checked")); 假设 ID 唯一。我认为您在这里混合了类和 ID，但不知道，因为您没有发布 RENDERED HTML 而不是 PHP

标签： javascript checkbox pdo onclick checked

【解决方案1】：

使用类
既然有 jQuery，就用它

我的猜测没有看到你的 HTML

<input type="checkbox" id="Ancient" name="tag" value="Ancient" checked="checked" class="cointag"> Ancient<br>

$(function() { // on page load
  $(".cointag").on("click",function() {
     $("."+this.id).toggle(this.checked);
  });
});

或者假设你想展示一个组合：

正在进行的工作：https://jsfiddle.net/mplungjan/u0fnsj43/

function showCoins() {
  var clsses = $(".cointag:checked").map(function() {
    return this.id;
  }).get();
  $(".coins").hide();
  if (clsses.length > 0) {
    console.log("."+clsses.join(",."))
    $("." + clsses.join(",.")).show();
  }  

}

$(function() { // on page load
  $(".cointag").on("click", showCoins);
  showCoins(); // in case some are already checked at load
});

【讨论】：