JavaScript not working inside HTML Ajax loaded content

I am having an issue when trying to run JavaScript inside an Ajax loaded content on a webpage. I keep getting an error “Cannot set properties of null”. If I move the output of the script to the footer for example which is outside of the Ajax loaded content, the script works fine.

This is the piece of code where the ajax is loaded into on the main webpage:

<main>
    <article class="ext-content">

    </article>
    </main>

This is the JavaScript code to load the ajax content:

$('section li').click(function() {
    $.ajax({
      type: 'GET',
      url: 'includes/ext-content/'+$(this).data('content')+'.html',
      dataType: 'html',
      success: function(response) {
        $('.ext-content').html(response);
      }
    });
  });

This is part of the ajax loaded content where when a user selects the amount of items, they are shown the price of the item * the amount selected. The shopOutput is where the price will be shown on the webpage: (If I move the shopOutput outside of the Ajax content the script works fine.)

          <tr>
            <td colspan="3" class="shop-qty-select">
                <select onchange="addElements(this)">
                  <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>

This is the JavaScript which takes the amount selected and shows the user how much the total price will be:

let shopOutput = document.getElementById("shopOutput");

const priceFractal = 10;

function addElements(selectElement) {

  let valueNumbers = selectElement.value;

  shopOutput.innerHTML = ""; 

    let yourTotal = valueNumbers * priceFractal;
    shopOutput.textContent = yourTotal;
}

Any help is much appreciated.

Like I mentioned I know that this code works if I just move the output outside of the Ajax loaded content. But when it is inside the Ajax content, I get an error “Cannot set properties of null (setting ‘innerHTML’)”

Answer

This is running immediately when the page loads:

let shopOutput = document.getElementById("shopOutput");

Since that #shopOutput element doesn’t exist yet, the shopOutput variable will of course be null. And it will always continue to be null since it’s never re-assigned.

If it doesn’t need to be used until the function is invoked, set it in the function instead:

function addElements(selectElement) {
  let shopOutput = document.getElementById("shopOutput");
  // the rest of the function...
}

Advertisement

Answer