JavaScript报错：Cannot read properties of null (reading 'addEventListener')求助

问题描述 #

运行使用外部库的代码时，持续触发错误：TypeError: Cannot read properties of null (reading 'addEventListener')。代码中已定义pageLoadListener、copyPasteListener等空函数，但API调用一直失败，不确定是否是事件监听器的问题，期望成功发起API调用并接收响应。

用户提供的代码：

<script src="https://prod.rtymgt.com/static/js/review/sc_review_lib_secured_v1-2.min.js?v=1.0.1" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
    var pageLoadListener = function(time, error) {
       // returns
       //-------------------------------------
       // time  - unencoded page load time detected
       // error - if error(string) is returned  
       
    }      
    var copyPasteListener = function(pastedText, error) {
       // returns
       //-------------------------------------
       // pastedText  - unencoded pasted text 
       // error - if error(string) is returned          
    }
    var textEventListener = function(answerTime, error) {
       // returns
       //-------------------------------------
       // answerTime  - unencoded time detected when text is typed
       // error - if error(string) is returned   
    }           
    var submitEventListener = function(submitTime, error) {
       // returns
       //-------------------------------------
       // submitTime  - unencoded time detected on submit
       // error - if error(string) is returned   
    }        
    window.onload = function() {


      var objElement  = {
          textElementId              : '[text_element_id]'   
        , pastedTextElementId        : '[encoded_pasted_text_element_id]'
        , pageLoadTextTimeElementId  : 
                               '[encoded_page_load_time_text_element_id]' 
        , entryStartTextTimeElementId: 
                                   '[encoded_typed_time_text_element_id]'     
        , submitTextTimeElementId    : 
                                  '[encoded_submit_time_text_element_id]'    
        , submitButtonElementId      : '[submit_button_id]'                       
      };   
              
      try {
         new scReviewLib(
            'https://prod.rtymgt.com' 
                                   
          , '20655122-22e6-4af3-a66c-0adb885ae5f1' // client’s publishable key on environment
          ,  objElement         // Object Element defined above
          ,  pageLoadListener
          ,  copyPasteListener 
          ,  textEventListener
          ,  submitEventListener);
   
      } catch (e) { 
         document.write(e)
      }       
    }         
</script>

<script>
    let xhr = new XMLHttpRequest();
    xhr.open('GET', "https://prod.rtymgt.com/api/v4/respondents/review/20655122-22e6-4af3-a66c-0adb885ae5f1?q_id=TEST&text=#v_1170#", true);
    xhr.withCredentials = true;
    xhr.send();

    xhr.addEventListener("readystatechange", processRequest, false);

    function processRequest(e) {
        if (xhr.readyState == 4 && xhr.status == 200) {
        let response = JSON.parse(xhr.responseText);

        console.log(response);

        }
    }
</script>

错误原因分析 #

这个错误的核心是你传入scReviewLib的DOM元素ID在页面中不存在，库内部尝试给这些不存在的元素调用addEventListener，导致读取null的属性报错，和你定义的监听器函数无关（你已经正确定义了这些空函数，它们不是问题根源）。

修复步骤 #

• 替换占位符ID：
  代码中objElement里的所有值都是占位符（比如[text_element_id]、[submit_button_id]），必须替换成页面中实际存在的DOM元素ID。例如页面中有一个ID为user-input的文本框，就把textElementId的值改成'user-input'。
• 提前验证元素存在性：
  在初始化scReviewLib之前，先检查所有依赖元素是否存在，避免库报错：

  // 在window.onload内，objElement定义后添加
  const requiredIds = Object.values(objElement).map(id => id.replace(/^\[|\]$/g, ''));
  for (const id of requiredIds) {
    if (!document.getElementById(id)) {
      console.error(`找不到元素：${id}`);
      return; // 终止初始化，避免后续报错
    }
  }
  

• 调整API调用时机：
  当前API调用在页面未完全加载时就执行了，建议将其移入window.onload回调内，或者确保所需数据/元素准备完毕后再发起请求，避免异步问题。

补充说明 #

你定义的pageLoadListener等监听器函数是合法的，即使是空函数也不会触发这个错误——库只会在对应事件触发时调用这些函数，空函数仅会不执行逻辑，但不会引发报错。

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