CODEWITHSUNDEEP
javascriptjqueryhtml
BadCoder
BadCoder

Reputation: 141

textContent returns undefined

I have a table in which I want to extract the text of the active item. I do this with the following code:

    var addedWorkout = $("#custDropDownMenuA").find(".dropdown-item.active");
    console.log(addedWorkout);
    addedWorkout = addedWorkout.textContent;
    console.log(addedWorkout);

The problem is that I keep getting undefined. I checked the console and it indeed finds the element I want without fail.

enter image description here

I am relatively new to Javascript, but after over an hour of Googling I could not find the issue and I don't understand why. I know that I can get the text element if I hardcore it using the following line:

document.querySelector("#selectiona1").textContent

but not with:

$("#selectiona1").textContent

What is the difference between these 2? I read that textContent is part of the DOM, to my understanding it relates to objects and according to my console i think it is an object. I made some crazy attempts like putting the object I got into the querySelector, but nothing works.

Upvotes: 0

Views: 2479

Answers (2)

Poul Bak
Poul Bak

Reputation: 10930

Your var 'addedWorkout' is a Jquery object, not a html element.

To show the text use:

addedWorkout.text();

Alternatively, you can change the 'addedWorkout' to a html element by adding the index [0], like this:

addedWorkout[0].textContent;

Upvotes: 1

CertainPerformance
CertainPerformance

Reputation: 371049

With this line:

var addedWorkout = $("#custDropDownMenuA").find(".dropdown-item.active");

you're using jQuery to select the .dropdown-item.active inside #custDropDownMenuA, and when you select with jQuery, you get a jQuery object in response. So, addedWorkout is a jQuery object, and jQuery objects generally do not have the same properties/methods as standard HTMLElements. (querySelector is the vanilla Javascript method to retrieve an element)

Either select the [0]th item in the jQuery collection to get to the first matching element:

var addedWorkout = $("#custDropDownMenuA").find(".dropdown-item.active")[0];

Or use the jQuery method to get the text of the first matching element, which is .text():

var addedWorkoutText = addedWorkout.text();

(note the use of a new variable - you will likely find it easier to read and debug code when you create new variables rather than reassigning old ones, when possible)

Upvotes: 1

Related Questions