Ajax加载内容中JavaScript报错：Cannot set properties of null

问题原因 #

错误的核心是：你在页面初始加载时就执行了let shopOutput = document.getElementById("shopOutput");，但shopOutput元素是通过Ajax动态加载到页面中的——此时DOM里还没有这个元素，所以shopOutput变量的值是null。当触发addElements函数时，自然无法对null设置innerHTML或textContent。

解决方案 #

以下是三种可行的解决方法，按推荐度排序：

方案1：在函数内部动态获取元素（最简单直接）

每次调用计算函数时，再去获取目标元素，确保元素已经存在于DOM中（触发函数时Ajax内容已加载完成）。

修改后的计算逻辑代码：

const priceFractal = 10;

function addElements(selectElement) {
  // 每次调用时获取元素，确保元素已存在
  const shopOutput = document.getElementById("shopOutput");
  if (!shopOutput) return; // 防御性检查，避免意外报错

  const valueNumbers = selectElement.value;
  shopOutput.innerHTML = ""; 
  const yourTotal = valueNumbers * priceFractal;
  shopOutput.textContent = yourTotal;
}

方案2：使用事件委托替代内联事件（更规范）

移除HTML中的内联onchange属性，改用jQuery事件委托，在Ajax内容加载完成后绑定事件，逻辑更封闭，避免全局变量和函数的问题。

首先修改Ajax加载的HTML内容，去掉内联事件：

<tr>
  <td colspan="3" class="shop-qty-select">
      <select>
        <option value="0">Select aantal:</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
      </select>
      <p id="shopOutput"></p>
  </td>
</tr>

然后修改Ajax和事件绑定代码：

$('section li').click(function() {
  $.ajax({
    type: 'GET',
    url: 'includes/ext-content/'+$(this).data('content')+'.html',
    dataType: 'html',
    success: function(response) {
      $('.ext-content').html(response);
      // 内容加载完成后，给动态生成的select绑定change事件
      $('.shop-qty-select select').on('change', function() {
        const priceFractal = 10;
        const valueNumbers = $(this).val();
        // 通过兄弟元素获取输出节点，避免全局ID依赖
        $(this).siblings('#shopOutput').text(valueNumbers * priceFractal);
      });
    }
  });
});

方案3：Ajax成功后初始化全局变量（兼容原有逻辑）

如果想保留原有全局变量和函数的结构，可以在Ajax内容加载完成后，再给shopOutput变量赋值：

let shopOutput;
const priceFractal = 10;

function addElements(selectElement) {
  if (!shopOutput) return;
  const valueNumbers = selectElement.value;
  shopOutput.innerHTML = ""; 
  const yourTotal = valueNumbers * priceFractal;
  shopOutput.textContent = yourTotal;
}

// 修改Ajax成功回调，初始化变量
$('section li').click(function() {
  $.ajax({
    type: 'GET',
    url: 'includes/ext-content/'+$(this).data('content')+'.html',
    dataType: 'html',
    success: function(response) {
      $('.ext-content').html(response);
      // 内容加载完成后获取元素
      shopOutput = document.getElementById("shopOutput");
    }
  });
});

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