To retrieve the value of 'I Love' from the class track-songs within the cousin element of 'p', I am looking to start from the point where 'show lyrics' (using arrow) is clicked, which is triggered by the 'a' element. While there are examples in jQuery for this task, I am specifically required to accomplish it using vanilla JavaScript for my homework.
Image
https://i.sstatic.net/GMGN5.png
Is there a way to achieve this without relying on jQuery?
When the show lyrics link <a> is clicked, you can access the text content of the corresponding track using the Element.closest() method with addEventListener() as shown below:
const text = this.closest('popular-item.column').querySelector('.track-songs').textContent;
Check out the demo:
document.querySelectorAll("a").forEach(function(el){
el.addEventListener("click", function(){
const text = this.closest('popular-item.column').querySelector('.track-songs').textContent;
console.clear()
console.log( text )
});
});<popular-item class="column">
<div class="card-content">
<p class="track-songs">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="card-footer">
<a href="#">Show Lyrics</a>
</div>
</popular-item>
<popular-item class="column">
<div class="card-content">
<p class="track-songs">Contrary to popular belief, Lorem Ipsum is not simply random text.</p>
</div>
<div class="card-footer">
<a href="#">Show Lyrics</a>
</div>
</popular-item>I am in the process of incorporating pagination into my project using ng-bootstrap pagination. In my HTML, I am combining an ngFor loop with the slice pipe to filter elements for display. <tr *ngFor="let bankAccount of bankingAccounts | slice: (p ...
Struggling with a challenge for two days now, I have attempted to implement a panel-box using bootstrap and AngularJS. Within the confines of a controller, my code looks like this: <div id="menu2a"> <div class="panel list-group"> <div ...
I'm facing a scenario where I need to increase the parent value based on actions taken in the children components. Parent Component: getInitialState :function(){ return {counter:0} }, render(){ <CallChild value={this.state.counter}/> ...
When working on my Angular project, I frequently encounter the need to compare JSONs in my Karma/Jasmine tests. It would be incredibly useful to have a console output showing what has been added and removed when comparing two structures. For example, ident ...
I am in the process of developing modules that will load data once and create an interface for accessing that data. I am interested in implementing asynchronous loading of the data, especially since my application already utilizes promises. Is it considere ...
I am working on an AJAX function that retrieves new HTML content and updates the form data in response.html. However, there is a specific attribute that needs to be modified before the replacement can occur. Despite my best efforts, I have been struggling ...
I have created a search field with autocomplete functionality. By using an observable that monitors changes in the text field, I am able to trigger actions based on user input. this.term.valueChanges .debounceTime(300) .distinctUntilChange ...
Is there a way to customize the message "This field is required" in the Jquery form validation plugin to display as "このフィールドは必須です"? Changing the color of the message can be achieved using the code snippet below: <style type="tex ...
I've been searching everywhere and unfortunately, I can't seem to figure out why the data is not being sent to my controller when posting via ajax. Here's the jQuery code snippet: var newDate = {}; newDate['start' ...
Background of the Issue: I am in the process of creating a one-page website using Twitter Bootstrap 3 within an ASP.NET MVC project. The Challenge: My current challenge involves implementing 'smooth scrolling' functionality that scrolls to the ...
Currently, I am working on a chat application built in VueJS and encountering an issue when attempting to display messages along with their respective timestamps. The challenge arises from the need to iterate through an object that contains two arrays: one ...
Currently, I am in the process of creating a small clothing store application using React as a way to expand my skills. One feature I have implemented is a filter by price section. However, I am looking for a solution to handle cases where no items fall wi ...
Listening for Events function Solitaire() { this.table.addEventListener("click", this.handleClick.bind(this)); this.table.addEventListener("dblclick", this.handleDoubleClick.bind(this)); } Event Handling Solitaire.prototype.handleDoubleClick = f ...
Can someone help me figure out why my method checkboxToggle() is not working when I click on the checkbox? Here is the code snippet: ` Methods:{ toggleTemplate(){ let template = `<label class="switch" > <input type= ...
Having just started with Firebase, I have been following all the guidelines for web Firebase auth. I have successfully managed to login, log out, and update all data except for the phone number. Despite receiving a success message in the console, my phone ...
I am working with JSON data that includes a list of retailers, some of which have subretailers that go multiple levels deep. My goal is to use Vue to generate markup that will show the parent retailer along with any nested subretailers underneath it, simi ...
A custom node module that utilizes async waterfall is working properly when run independently, but the AJAX callback does not receive the return value. //Node module var boilerplateFn = function(params){ async.waterfall([ function(callback){ ...
When I post a date to elasticsearch, I typically use Date.now() var unixtime = Date.now(); The output usually looks something like this: 1373508091156 To convert it, I then use the following code: var date = new Date(unixtime*1000); After conversion, ...
Before, I attempted to utilize an Annotation.StampAnnotation to make a personalized annotation while using an SVG as the foundation image. Unfortunately, I discovered that the StampAnnotation does not allow the user to alter or set the color. Thus, I have ...
I have a single menu bar. I recently discovered an interesting way to make the entire menu bar area clickable using jQuery. Design code snippet: <%@ Control Language="C#" AutoEventWireup="true" CodeFile="MenuControl.ascx.cs" Inherits="MenuControl"%> ...