Ways to retrieve the text of the <Label> element without relying on the "id" attribute

I have a challenge in extracting text enclosed within the `Label` tag. My knowledge of Javascript and JQuery is limited, so I require guidance on accomplishing this task. Currently, I am attempting to use code that I found on a stackoverflow post titled get-values-from-label-using-jquery

<label year="2010" month="6" id="currentMonth"> June &nbsp;2010</label>

var label = $('#currentMonth');
var month = label.attr('month');
var year = label.attr('year');
var text = label.text();

The issue I am facing with this code is that it ceases to function when I remove the ID element. I seek advice on how to make it work without relying on the ID attribute.

javascript

Answer №1

To effectively target the element, consider using classes instead of Id 

var label = $('.currentMonth');
var month = label.attr('month');
var year = label.attr('year');
var text = label.text();

console.log(month,year,text)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<label year="2010" month="6" class="currentMonth"> June &nbsp;2010</label>

Answer №2

Here is an example showcasing the usage of pure JavaScript:

HTML:

<label year="2010" month="6" class="currentMonth"> June &nbsp;2010</label>

JavaScript:

let label = document.getElementsByClassName('currentMonth')[0];
let month = label.getAttribute('month');
let year = label.getAttribute('year');
let text = label.textContent;

console.log(month,year,text)

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

Accessing stored web pages / Browser as an interactive interface

I have a couple of questions I need help with. The first one is about how to open a saved HTML file in a browser without an internet connection. Next, I'm looking for advice on using the browser as a user interface for a desktop image viewing program ...

javascripthtmljsonbrowser

Insert a div element into the JavaScript file

I have a JavaScript code snippet that needs to be inserted after the "Artwork" section. Here is the code: <div class="image-upload"> <label for="files"> <img src="ohtupload.jpg"> </label> </di ...

javascripthtml

The error message "MongoDB - MongoError: connect ECONNREFUSED" indicates a

I am encountering an error every time I attempt to connect to mongoDB. Despite looking through various similar questions, I have yet to find a solution for my specific issue. Here is the exact error message: connection error: { MongoError: connect ECONNR ...

javascriptnode.jsmongodbexpressdatabase

What steps should I take to design and implement this basic search form?

Essentially, I have a three-page setup: - One page containing all possible search results such as: 'search result 1' 'search result 2' 'search result 3' - Another page with a search form and enter button. - And finally, a res ...

phpjavascriptjqueryhtml

Utilizing AngularJS: Executing directives manually

As a newcomer to AngularJS, I am facing a challenge that requires creating a 3-step workflow: The initial step involves calling a web service that provides a list of strings like ["apple", "banana", "orange"]. Upon receiving this response, I must encap ...

javascriptangularjs

The functionality of async.series and async.each is not behaving as anticipated

I am currently working on developing a web scraping tool using nodeJS to extract image URLs from a website's HTML, store them in a cache, and then identify the largest image based on file size. However, I'm facing an issue where the function de ...

javascriptnode.jsasynchronousnode-async

Vue 3 + Vite: The router path was not found

I'm currently working on a project using Vue 3 and Vite, where I need to verify if the user is logged in with AWS Cognito before accessing the main page. Here's an example of my router.js: import { createRouter, createWebHistory } from &apo ...

javascriptnode.jsvuejs3amazon-cognitovite

The window fails to retain the scroll position when overflow is enabled

Whenever I click on a specific div, I use jQuery to dynamically apply overflow: hidden to the html and body. $(".mydiv").on("click", function() { $("html, body").css("overflow", "hidden"); }); However, this action causes the window to scroll to the to ...

javascriptjqueryhtmlcss

Is it possible to achieve a seamless interaction by employing two buttons that trigger onclick events to alternately

I have a specific goal in mind: I want to create two buttons (left and right) with interactive cursors. The left button should initially have a cursor of "not-allowed" on hover, indicating that it cannot be clicked at the beginning. When the right button ...

javascripthtmlbuttononclickevent-listener

Tips for concealing dynamically generated div elements within a VueJS v-for loop

Is there a way to hide dynamically generated div elements in VueJS? In my chatbot application, messages are passed through a prop called messages. These message arrays create multiple Divs on the screen displaying information. One particular Div is used to ...

javascriptvue.js

Typescript check for type with Jest

Assume there is an interface defined as follows: export interface CMSData { id: number; url: string; htmlTag: string; importJSComponent: string; componentData: ComponentAttribute[]; } There is a method that returns an array of this obj ...

javascripttypescriptunit-testingjestjs

Disabling a Field in Angular While Preserving its Value

Hey there, late night folks! I have a quick question about Angular. I'm working with a form that includes a specific field where I set the value using patchValue, but I also need to disable this field. The issue is that after disabling it, the value i ...

javascriptangulartypescript

With jQuery's .text() method, it is possible to modify the first span's Bootstrap class, but not the

As someone who is new to javascript, html, and jquery, I have been trying to change the text of 2 span elements in the same div using jquery's .text() command. Despite going through various solutions provided by different questions, none seem to work ...

javascriptjqueryhtmlcsstwitter-bootstrap

The Controller of Conversations

In the HTML code, there is a dialog element with an identification of divMyDialog1. This dialog is connected to a JavaScript class called MyDialog1. Each dialog has its own unique id and associated class name. MyDialog1 = function(divStr){ this.divStr ...

javascriptclassdialog

Exploring the World of Subclassing Arrays in JavaScript: Uncovering the TypeError of Array.prototype.toString's

Can JavaScript Arrays be subclassed and inherited from? I am interested in creating my own custom Array object that not only has all the features of a regular Array but also contains additional properties. My intention is to use myobj instanceof CustomArr ...

javascriptinheritance

A guide on calling a function from a different component in vuejs2

I am facing a situation where I need to trigger an event whenever my sidebar opens. This event should be called every time the sidebar is opened. For example, when I click on an element, it triggers the opening of my sidebar which then calls a function th ...

javascriptvue.jsvuejs2vue-directives

Ways to switch up the titles on UploadThing

Recently, I started working with the UploadThing library and encountered a situation where I needed to personalize some names within the code. Here is what I have so far: Below is the snippet of code that I am currently using: "use client"; imp ...

javascriptreactjstypescriptnext.js

Explore the various timer functionalities available in Angular.js

I am working on a project that requires displaying two timers on a webpage, each with different start times. The first timer should only show for 5 seconds, and then after 10 seconds, the second timer should be displayed. I am new to Angular and have writ ...

javascriptangularjstimer

reveal.js: Upon a fresh installation, an error has been encountered: ReferenceError - 'navigator'

Currently, I am attempting to integrate reveal.js into my React.js/Next.js website using the instructions provided at However, upon implementation, I encountered the following error: Server Error ReferenceError: navigator is not defined This error occurr ...

javascriptreactjsnext.jsreveal.js

Is it necessary for me to replicate this function? - jQuery

I have developed a function that creates a transparent information overlay on a current div for a mobile web app. Context: I am using jQTouch, which means I have separate divs instead of loading individual pages anew. $(document).ready(function() { ...

javascriptjqueryhtmlcssjqtouch