I keep encountering the issue where I receive the message "Unable to access property 'innerText' of an undefined element" when running the Array forEach function. This problem seems to be happening within the HTMLInputElement section of the code

I am facing an issue where the error occurs because "cardTxt" is not recognized as a string. I verified this using typeof syntax, but I'm unable to understand why it can't be a string. This code snippet includes the use of bootstrap for styling. Any suggestions on how to resolve this would be greatly appreciated, as I am currently stuck.

let search = document.getElementById('searchTxt');
search.addEventListener("input", function(){

    let inputVal = search.value.toLowerCase();

    let noteCards = document.getElementsByClassName('noteCard');
    Array.from(noteCards).forEach(function(element){
        let cardTxt = element.getElementsByTagName("p")[0].innerText;
        if(cardTxt.includes(inputVal)){
            element.style.display = "block";
        }
        else{
            element.style.display = "none";
        }

    })
javascriptarraysjsontypeerror

Answer №1

It seems the issue arises from attempting to access index 0 of an empty array because the element passed in does not contain any p tags. To troubleshoot, you can use the following code snippet:

console.log(element.getElementsByTagName("p"));

Check if the output is empty to confirm this hypothesis.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Merge two JSON objects together by matching their keys and maintaining the original values

After having two separate JSON objects representing data, I found myself in the position of needing to merge them into one combined result. The initial objects were as follows: passObject = { 'Topic One' : 4, 'Topic Two' : 10, &apos ...

javascriptnpmlodash

Exceeded server capacity while attempting to extract pricing information from a search bar

Thanks to some guidance from the Stackoverflow community, I successfully developed a scraper that retrieves a list of part numbers along with their respective prices. Here is an example format of the data retrieved: part1 price1 part2 price2 ... .. ...

pythonjsonpandasweb-scrapingrequest

Is there a way to conceal a slice of a pie chart in HighCharts without excluding it from the legend display?

I've been searching everywhere for a solution to this issue, but I just can't seem to pinpoint where I'm going wrong. My goal is to initiate a pie chart using HighCharts with specific slices hidden as if they were "clicked" off in the legen ...

javascriptjquerypluginschartshighcharts

Tips for displaying the message "{"POWER":"ON"}" within the else if statement (this.responseText == ({"POWER":"ON"})) {

Hey everyone, I'm trying to adjust the color of a button on my webpage based on the response I receive from this.responseText. I understand the JSON response, but for some reason, I can't seem to incorporate it into my code. If anyone could lend ...

javascripthtmljson

Using jsPlumb to Access an Element After a "Mouseup" Event has Completed

$(document).on('mouseup', '.agent-wrapper', function(info){ console.log(info); // Everything is working fine console.log(this); }); .agent-wrapper represents an element-wrapper for all jsPlumb objects. $(document).on(' ...

javascriptjqueryjsplumb

Instructions for connecting a button and an input field

How can I connect a button to an input field? My goal is to make it so that when the button is clicked, the content of the text field is added to an array (displayed below) const userTags = []; function addTags(event) { userTags.push(event.target.__ wha ...

javascripthtmlcssformsform-submit

What is the best way to transfer information to a different NextJS page?

I want to implement a search input field. The idea is to allow the user to type something into the search bar and then send that input to another page where an API request will be made with the search content. Essentially, when the user types "something" ...

javascripthtmlnext.js

What is the best way to save the result of an API request as an object or convert an array into JSON format?

My app is attempting to make an API call and display the retrieved data in a modal. The issue lies in storing the API response as an array, which prevents me from accessing its sub-elements effectively. My query is: Is there a way to either: Save an obje ...

node.jsjsonreactjsreact-native

A Guide to Accessing Numbered Properties within an Object

I am working with a large Object that has over 700 properties, all numbered. How can I efficiently iterate through each of these numbered properties? { '0': { emails: { categorized: [Object], all: [Object], primary: &a ...

javascriptnode.jsexpress

Experimenting with a Jest test on an express middleware

I'm currently faced with a challenge in testing my controller (express middleware) using Jest. To better illustrate the issue, I will share the code snippet below: import request from 'utils/request'; import logger from 'config/logger& ...

javascriptnode.jsexpresstestingjestjs

What could be causing the version error when running 'pip install json'?

When attempting to install 'pip install json' in my command prompt, I encountered an error - ERROR: Could not find a version that satisfies the requirement json (from versions: none) ERROR: No matching distribution found for json. What steps shou ...

pythonjson

Unlocking JSON with various structures using Swift

I am dealing with json data that follows a consistent structure from a nosql database (PK, SK, attributes). The content of the attributes section varies depending on the value of SK. For instance: [ { "PK": "POLL#1544693DF0E88EC-3225- ...

jsonswiftdecodecodable

What is the best way to keep vue-meta up to date when the route or URL

The issue I am facing is that the meta data on my website does not update when the route changes. Even though the route has a watch function that updates the view correctly, the metaInfo() method from vue-meta fails to keep up with the changes. Below is an ...

javascriptvue.jsvuejs2vue-routervue-meta

Retrieving data from Firebase using JavaScript to extract object details

I've been trying to understand this issue by looking at similar questions, but I'm still stuck. This is the response I get from Firebase: '{"users":[null,{"-JFhOFSUwhk3Vt2-KmD1": {"color":"White","model":"650i","year":"2014","make":"BMW"} ...

javascriptangularjsfirebase

The ng-controller directive is not functioning accurately

I attempted to execute the following basic HTML: <!DOCTYPE html> <html ng-app="tempApp"> <head> <script src="js_libs/angular/angular.min.js"></script> <script src="js_libs/angular/bootstrap.js"></script&g ...

javascripthtmlangularjs

Tips on preventing the use of backslashes in JSON output from PHP

I'm encountering an issue with the code provided below. The console log is showing: "returningList{"view":0,"new":1,"random":1} result: "{\"view\":0,\"new\":1,\"random\":1}"" It seems that the JSON data is getting back ...

phpjqueryajaxjson

What is the method for determining the size of a WeakMap?

I am working with a WeakMap that looks like the following: let newObj = new WeakMap(); let key1={"a":1}; let key2={"b":2}; let key3={"c":3}; newObj.set(key1,"value1"); newObj.set(key2,"value2"); newObj.set( ...

javascript

The TypeScript compiler generates a blank JavaScript file within the WebStorm IDE

My introduction to TypeScript was an interesting experience. I decided to convert a simple JavaScript application, consisting of two files, into TypeScript. The first file, accounts.ts, contains the main code, while the second one, fiat.ts, is a support f ...

javascripttypescriptwebstorm

Using jQuery to insert PHP code into a <div> element

In our capstone project, I'm looking to implement a dropdown calendar feature. I initially attempted to use ajax within a dropdown Bootstrap 4, but encountered issues with collapsing. As an alternative, I am considering utilizing the include method. A ...

javascriptphpjqueryhtml

Retrieve an object using a variable

Essentially, my question is how to extract a value from a variable and input it into a sequence. Being Dutch, I struggle to articulate this query correctly. var channelname = msg.channel.name; "description": `${config.ticketlist.channelname.ticketmessage} ...

javascriptjsonnode.jsdiscorddiscord.js