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’)"
2
Answers
This is running immediately when the page loads:
Since that
#shopOutput
element doesn’t exist yet, theshopOutput
variable will of course benull
. And it will always continue to benull
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:
Anything that deals with a reference to an element should be contained in a $.ready() so that the browser waits before attempting to get references to things that don’t exist yet.