本地运行Codepen CSS 3D旋转立方体代码报Cannot read 'value' of null错误

错误原因 #

报错Uncaught TypeError: Cannot read property 'value' of null的触发根因是JavaScript代码执行早于DOM元素渲染：

• 若JS代码放在了<head>标签内、或者放在HTML结构（立方体、单选按钮代码）的前面，执行代码时页面还没有生成class为radio-group的容器和内部的单选按钮，要么radioGroup变量本身为null，要么找不到带checked属性的单选按钮，读取value属性时就会抛出错误。
• 也可额外检查HTML中单选按钮的checked属性是否正常添加、class名radio-group有没有拼写错误，需和JS选择器保持一致。

修复方案 #

两种可行修复方式任选其一即可：

方案1：调整JS代码放置位置 #

把现有JavaScript代码完整移动到HTML内容的末尾，也就是</body>闭合标签的前面，等所有DOM元素都渲染完成后再执行JS，即可正常获取到元素。

方案2：添加DOM加载完成监听 #

无需调整JS位置，给现有JS包裹一层DOMContentLoaded事件监听，同时添加判空保护避免极端情况报错，修改后的代码如下：

document.addEventListener('DOMContentLoaded', function() {
  var cube = document.querySelector('.cube');
  var radioGroup = document.querySelector('.radio-group');
  var currentClass = '';

  function changeSide() {
    var checkedRadio = radioGroup.querySelector(':checked');
    // 判空保护，无选中单选按钮时直接终止执行避免报错
    if (!checkedRadio) return
    var showClass = 'show-' + checkedRadio.value;
    if ( currentClass ) {
      cube.classList.remove( currentClass );
    }
    cube.classList.add( showClass );
    currentClass = showClass;
  }
  // 设置初始展示面
  changeSide();
  radioGroup.addEventListener( 'change', changeSide );
})

内容的提问来源于stack exchange，提问作者KiD Cajes