What could be the reason for encountering the error message "Attempting to access an undefined HTML property"?

Question

What could be the reason for encountering the error message "Attempting to access an undefined HTML property"?

I've been working on a simple counter to practice closures in JavaScript, and I'm struggling with an error that I can't seem to solve. I thought assigning the variable elem to the id of canv would do the trick, but clearly something isn't right. Can anyone point out what's going wrong here?

This is my HTML:

<body>
  <div id="canv">

  </div>
</body>

This is my JavaScript:

function setup(delay) {
  var el = document.getElementById('canv');

  counterFn(el, delay);
}

function counterFn(el, delay) {
  var counter = 0;

  setInterval(getTime, delay);

  function getTime(el) {
    el.innerHTML(counter);
    counter++;
  }
}

setup(500);

It all seems quite basic, yet I can't pinpoint where I'm going astray.

Check out my JSFiddle for a clearer picture: https://jsfiddle.net/8sjaqdrh/2/

javascript closures

Answer 1

Answer №1

The issue that triggered the error is due to the fact that el is not defined within the scope of getTime.

In the parent scope of getTime, which is counterFn, el is defined because it was assigned a value when called in counterFn(el, delay) inside the setup function as

el = document.getElementById('canv')

.

However, within the scope of getTime, no value was provided for el. As a result, el becomes undefined.

Another issue in the code is the improper usage of innerHTML.

To fix this, simply remove the parameter from function getTime(el){... and make it function getTime(){....

Additionally, note that innerHTML is not a function and should not be called like innerHTML(counter).

Instead, assign a value directly to it using innerHTML = counter.

function setup(delay) {
  var el = document.getElementById('canv');

  counterFn(el, delay);
}

function counterFn(el, delay) {
  var counter = 0;

  setInterval(getTime, delay);

  // Corrected code:
  function getTime() {
    el.innerHTML = counter;
    counter++;
  }
  
  /* Your code
  function getTime(el){
    el.innerHTML(counter);
    counter++;
  }
  */
}

setup(500);

<div id="canv"></div>

Answer 2

The issue that triggered the error is due to the fact that el is not defined within the scope of getTime.

In the parent scope of getTime, which is counterFn, el is defined because it was assigned a value when called in counterFn(el, delay) inside the setup function as

el = document.getElementById('canv')

.

However, within the scope of getTime, no value was provided for el. As a result, el becomes undefined.

Another issue in the code is the improper usage of innerHTML.

To fix this, simply remove the parameter from function getTime(el){... and make it function getTime(){....

Additionally, note that innerHTML is not a function and should not be called like innerHTML(counter).

Instead, assign a value directly to it using innerHTML = counter.

function setup(delay) {
  var el = document.getElementById('canv');

  counterFn(el, delay);
}

function counterFn(el, delay) {
  var counter = 0;

  setInterval(getTime, delay);

  // Corrected code:
  function getTime() {
    el.innerHTML = counter;
    counter++;
  }
  
  /* Your code
  function getTime(el){
    el.innerHTML(counter);
    counter++;
  }
  */
}

setup(500);

<div id="canv"></div>

Answer 3

Answer №2

Ensuring that the canvas element exists in the DOM before trying to access it is crucial here. To prevent any errors, make sure to wrap your code within a window.onload event.

In the snippet below:

setInterval(getTime, delay);

You've defined getTime as expecting a parameter but failed to pass one. Instead, try:

setInterval(function(){ getTime(el); }, wait);

Lastly, change el.innerHTML(counter); to el.innerHTML = counter;.

Here's a functioning Fiddle for reference

Answer 4

Ensuring that the canvas element exists in the DOM before trying to access it is crucial here. To prevent any errors, make sure to wrap your code within a window.onload event.

In the snippet below:

setInterval(getTime, delay);

You've defined getTime as expecting a parameter but failed to pass one. Instead, try:

setInterval(function(){ getTime(el); }, wait);

Lastly, change el.innerHTML(counter); to el.innerHTML = counter;.

Here's a functioning Fiddle for reference

What could be the reason for encountering the error message "Attempting to access an undefined HTML property"?

Answer №1

Answer №2

Similar questions

Issue with displaying Bootstrap column accurately

Create a function that multiplies every element in an array by 2

Conceal the scroll bar while the page preloader is active

Guide on integrating web api on android with javascript, jquery, and jsonp

Crafting a robust and secure password using Yup and Formik while receiving personalized error notifications

Display React component when clicked

Is there a way to delete objects that are added dynamically to an array using a specific button linked to each object?

Performing calculations in each row of a dataframe using JavaScript

What do you believe to be superior: Vue UI design?

use ajax to post saved data to a WebAPI in php

What is the best way to connect this image and comments div using only CSS?

Encountering issues with posting data on a straightforward Node.js form using routes

Avoid Reselecting Dropdown Choices in PowerApps Model-Driven Apps

Looking for a node.js IDE on OS X that can display JSON objects similar to how they appear in the console of Chrome or Firefox?

When using jQuery Ajax, only pass the query string if it is defined and not empty

In JavaScript, not all elements are removed in a single iteration, even if the condition is consistently met

Creating a custom video to use as the favicon for my website

Establish a table containing rows derived from an object

Delay Time for Closing Sub Menus When Multiple Dropdowns are Opened

Material UI - Array of Chips