What causes a function to be returned as null when it is appended or assigned as textContent?

Question

What causes a function to be returned as null when it is appended or assigned as textContent?

There's something I've been trying to figure out and I'm curious to get an answer on why it behaves this way.

const print_html = (param) => {
  let container = document.querySelector('Container');
  console.log(test_function(param)); // Why does this log the string?
  container.textConent = test_function(param) // ... But the function is null here?
}

const test_function = (name) => {
  return `My name is ${name}`;
};

print_html('Jermaine')

While the console log line prints the correct string to the console as expected, it's puzzling why the following line fails to set the textContent of the container to the string.

javascript function

Answer 1

Answer №1

Make sure to include the textContent and correct your query selector to .container

const display_info = (param) => {
  let container = document.querySelector('.container');
  console.log(test_func(param)); // Why is the string logged?
  container.textContent = test_func(param) // ... But the function is null here?
}

const test_func = (name) => {
  return `Hello, my name is ${name}`;
};

display_info('Jermaine')

<div class="container"></div>

Edit

As Icepickle pointed out, the query selector Container can be correct if the HTML markup used is

<Container></Container>

Answer 2

Make sure to include the textContent and correct your query selector to .container

const display_info = (param) => {
  let container = document.querySelector('.container');
  console.log(test_func(param)); // Why is the string logged?
  container.textContent = test_func(param) // ... But the function is null here?
}

const test_func = (name) => {
  return `Hello, my name is ${name}`;
};

display_info('Jermaine')

<div class="container"></div>

Edit

As Icepickle pointed out, the query selector Container can be correct if the HTML markup used is

<Container></Container>

What causes a function to be returned as null when it is appended or assigned as textContent?

Answer №1

Similar questions

Verify whether the labels are blank, remain as they are, or transfer the data to the database

Why is applying CSS on an li element using .css() in JQuery not functioning?

Utilizing Next.js on Vercel with Sentry and opting out of source maps in the production environment

Creating dependent dropdowns using Laravel Inertia Vue: A step-by-step guide

Adjusting the StrokeWidth in pixels/em units on fabricjs

Guide on how to return a JSON result as a Dictionary instead of an Array using Express.js

Is there a way for multiple <select> elements to have identical options in React?

Bootstrap - creating seamless navigation between accordion sections on a single webpage

What is the proper method for activating the lights in a traffic light sequence?

VueJS Error: Unable to access the 'className' property of an undefined variable

Solving layout issues / Techniques for determining element heights

PHP Incrementing a Number without Defined Limit

Validating date parameter in Wiremock request - How to ensure dynamic date matching during testing?

capturing the HTML title and storing it in a JavaScript variable

HTML elements not displaying in Ajax form

Jquery problem: dealing with empty spaces

The jQuery function .val()/.text() is unable to retrieve information from a particular section of HTML

The response from Axios in NodeJs is displaying incorrect encoding

Searching recursively for keys with empty values in an array using Javascript

Prevent rendering a file in node.js using ejs if it cannot be found