javascript script no working adding classlist to an element

javascript script no working adding classlist to an element - javascript

i am trying to make a quiz app with javascript but it does not work i want when i click on one of the option if it is the first option i wanna set its class to correct and the others to in-correct but it does not work for me i do not know where is the problem or what i did wrong , ...
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="./../images/quizapp.png" type="image" >
<link rel="stylesheet" href="./../css/bootstrap.min.css">
<link rel="stylesheet" href="./../css/default.css">
<link rel="stylesheet" href="./../css/quizap.css">
<title>Document</title>
<header class="container p-4 text-center border">
<h1 class="h1 text-danger">Quiz Application With JavaScript</h1>
</header>
<div class="container landing p-5 mt-3 text-center">
<div class="description m-auto">
<h2 class="h2 border text-center p-3">Welcome To The Quiz App...</h2>
</div>
<div class="collection container" id="categorie">
<div class="row mt-5 container">
<div class="col-4 categories text-center" id="sports">
Sports
</div>
<div class="col-4 categories text-center" id="music">
Music
</div>
<div class="col-4 categories text-center" id="food" >
General
</div>
</div>
</div>
<div class="question" id="sports_question">
<div class="list_questions list-group" id="answers">
<li class="list-group-item">
<h3 class="h3">
<div id="firstQuestion" class="container q_container">
<div class="card my-card">
<div class="card-body ">
<h5 class="card-title">Who Is My Favorite FootBall Team?</h5>
<p class="card-text options">
<div class="option_one option" value="1">Wydad</div>
<div class="option_two option" value="0">Raja</div>
<div class="option_thre option" value="0">Mat</div>
<div class="option_frour option" value="0">Fus</div>
</p>
</div>
</div>
</div>
</h3>
</li>
<li class="list-group-item">
<h3 class="h3">
<div id="firstQuestion" class="container q_container">
<div class="card my-card">
<div class="card-body ">
<h5 class="card-title">Who Is My Favorite FootBall Team?</h5>
<p class="card-text options">
<div class="option_one option">Wydad</div>
<div class="option_two option">Raja</div>
<div class="option_thre option">Mat</div>
<div class="option_frour option">Fus</div>
</p>
</div>
</div>
</div>
</h3>
</li>
<li class="list-group-item">
<h3 class="h3">
<div id="firstQuestion" class="container q_container">
<div class="card my-card">
<div class="card-body ">
<h5 class="card-title">Who Is My Favorite FootBall Team?</h5>
<p class="card-text options">
<div class="option_one option">Wydad</div>
<div class="option_two option">Raja</div>
<div class="option_thre option">Mat</div>
<div class="option_frour option">Fus</div>
</p>
</div>
</div>
</div>
</h3>
</li>
<li class="list-group-item">
<h3 class="h3">
<div id="firstQuestion" class="container q_container">
<div class="card my-card">
<div class="card-body ">
<h5 class="card-title">Who Is My Favorite FootBall Team?</h5>
<p class="card-text options">
<div class="option_one option">Wydad</div>
<div class="option_two option">Raja</div>
<div class="option_thre option">Mat</div>
<div class="option_frour option">Fus</div>
</p>
</div>
</div>
</div>
</h3>
</li>
<li class="list-group-item">
<h3 class="h3">
<div id="firstQuestion" class="container q_container">
<div class="card my-card">
<div class="card-body ">
<h5 class="card-title">Who Is My Favorite FootBall Team?</h5>
<p class="card-text options">
<div class="option_one option">Wydad</div>
<div class="option_two option">Raja</div>
<div class="option_thre option">Mat</div>
<div class="option_frour option">Fus</div>
</p>
</div>
</div>
</div>
</h3>
</li>
</div>
</div>
</div>
<script src="./../script/popper.min.js"></script>
<script src="./../script/bootstrap.min.js"></script>
<script src="./../script/quizap.js"></script>
and this is the javascript code:
let categories = document.querySelectorAll('.categories');
let sports_question = document.getElementById('sports_question');
let collection = document.getElementById('categorie');
let options = document.querySelectorAll('.list_questions');
let elements = document.querySelectorAll('.question');
for (let i = 0; i < options.length; i++) {
options[i].addEventListener('click', function (e) {
const selectedOption = e.target;
console.log(selectedOption);
const correct = selectedOption.dataset.correct;
Array.from(options[i].children).forEach(option => {
SetStatus(option, option.dataset.correct);
console.log(option.dataset.correct + 'this is the option');
});
})
}
function SetStatus(option, correct) {
if (correct) {
option.classList.add('correct');
} else {
option.classList.add('in-correct');
}
}
for (let i = 0; i < categories.length; i++) {
categories[i].addEventListener('click', function () {
sports_question.classList.toggle('active');
collection.classList.toggle('hide');
})
}

querySelector all returns nodeList not array of elements.
use spread operator to convert them to array.
here's an example
let options = [...document.querySelectorAll('.list_questions')];

First
The div tag can NOT be inside p tag, because the paragraph will be broken at the point, where the div tag is entered.
So change p and div into ul and li
HTML
<ul class="card-text options">
<li class="option_one option" value="1">Wydad</li>
<li class="option_two option" value="0">Raja</li>
<li class="option_thre option" value="0">Mat</li>
<li class="option_frour option" value="0">Fus</li>
</ul>
JavaScript
const options = document.querySelectorAll(".option");
(function addEventListeners() {
options.forEach((option) => {
option.addEventListener("click", (event) => {
const { parentNode } = event.target;
setClasses(parentNode, option);
});
});
})();
function setClasses({ children }, selected) {
[...children].forEach((child) => {
if (child !== selected) {
child.classList.add("in-correct");
child.classList.remove("correct");
return;
}
child.classList.remove("in-correct");
child.classList.add("correct");
});
}

Related

Get text content of all parent divs

I have dropdown list with some file names.
What I want to achieve is to find file name parents so when checkbox is checked I can get their respective values and build them into path of some sort. For example you are clicking
updates > second_folder_updates > CSD_update checkbox
on that CSD_update checbox click you can see updates/second_folder_updates/CSD_update being console logged, same goes for first update on click you will get updates/first_update in the console
my current solution it works in a way? but this returns a lot of duplicates and incorrect data
var elem = document.getElementById("AQW_update");
function getParents(elem) {
var parents = [];
while(elem.parentNode && elem.parentNode.nodeName.toLowerCase() != 'body') {
elem = elem.parentNode;
parents.push(elem.textContent);
}
return parents;
}
var abc = getParents(elem)
for(var i = 0; i < abc.length; ++i)
abc[i] = abc[i].replace(/(\r\n|\n|\r)/gm,"")
console.log(abc.toString())
$(document).ready(function () {
$('.clickFaq').click(function () {
$('.displayDir').toggle('1000');
$("i", this).toggleClass("icon-up-circled icon-down-circled");
var $data = $('.SWCheckBox:checked').val();
console.log($data)
});
$(".open").hide();
$('.dirTitle').click(function () {
$(this).next().slideToggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" crossorigin="anonymous">
<div class="container">
<div class="row no-gutters">
<div class="col-1">
<div class="fileListIcon iconFolder"></div>
</div>
<div class="col-9">
<div class="fileListText">
<div class="dirTitle">
updates
<i class=" .displayDir "></i>
</div>
<div class="faqQuestionsTextPreview open" style="display: none;">
<ul>
<div class="row no-gutters">
<div class="col-1">
<div class="fileListIcon iconFolder"></div>
</div>
<div class="col-9">
<div class="fileListText">
<div class="dirTitle">
first_update
<i class=" .displayDir "></i>
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div class="fileListChx ">
<input type="checkbox">
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-1">
<div class="fileListIcon iconFolder"></div>
</div>
<div class="col-9">
<div class="fileListText">
<div class="dirTitle">
second_folder_updates
<i class=" .displayDir "></i>
</div>
<div class="faqQuestionsTextPreview open" style="display: none;">
<ul>
<div class="row no-gutters">
<div class="col-1">
<div class="fileListIcon iconFolder"></div>
</div>
<div class="col-9">
<div class="fileListText">
<div class="dirTitle">
AQW_update
<i class=" .displayDir "></i>
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div class="fileListChx ">
<input type="checkbox" >
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-1">
<div class="fileListIcon iconFolder"></div>
</div>
<div class="col-9">
<div class="fileListText">
<div class="dirTitle">
CSD_update
<i class=" .displayDir "></i>
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div class="fileListChx ">
<input type="checkbox">
</div>
</div>
</div>
</ul>
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div class="fileListChx ">
<input type="checkbox">
</div>
</div>
</div>
</ul>
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div class="fileListChx ">
<input type="checkbox">
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js"
crossorigin="anonymous"></script>

How can I access the value of a specific button that has the same classes

I am developing a web app of where the user can search the song lyrics they want. I am using an API for it. Now I can generate 10 songs results, but the problem is when a user click on "get lyrics" button I can not access the value of that specific button's song title. How can I get the specific song title and album name by just clicking the get lyrics button? Here is my final result:
const apiUrl = "https://api.lyrics.ovh/suggest";
const search = document.getElementById("search-btn");
const result = document.getElementById("result");
const text = document.getElementById("text");
const getLyrics = document.getElementsByClassName("get-lyrics");
//search by songs or artist...
function searchSongs(term) {
fetch (`${apiUrl}/${term}`)
.then (response => response.json())
.then (data => {
const lyricsName = document.getElementsByClassName("lyrics-name");
for (let index = 0; index < lyricsName.length; index++) {
const element = lyricsName[index];
element.innerText = data.data[index].album.title;
}
const artist = document.getElementsByClassName("artist");
for (let index = 0; index < artist.length; index++) {
const element = artist[index];
element.innerText = data.data[index].artist.name;
}
document.getElementById("result").style.display = "block";
//console.log(data);
});
}
//event listener to search song or artist
search.addEventListener("click", e => {
//e.preventDefault();
const searchTerm = text.value;
if (!searchTerm) {
alert("please type a song a name");
} else {
searchSongs(searchTerm);
}
})
//event listener to get lyrics
for (let index = 0; index < getLyrics.length; index++) {
const element = getLyrics[index];
element.addEventListener("click", function(){
const title = `${index + 1}`;
})
}
<!doctype html>
<html lang="en">
<head>
<title>Hard Rock Solution - Song Lyric App</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- Custom css -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<nav class="navbar navbar-dark my-3">
<a class="navbar-brand" href="#">
<img src="images/logo.png" alt="Hard Rock Solution">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId" aria-expanded="false" aria-label="Toggle navigation">
<img src="images/toggler-icon.svg" alt="">
</button>
<div class="collapse navbar-collapse" id="collapsibleNavId">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdownId" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdownId">
<a class="dropdown-item" href="#">Action 1</a>
<a class="dropdown-item" href="#">Action 2</a>
</div>
</li>
</ul>
</div>
</nav>
<main class="content-area">
<div class="search-bar col-md-6 mx-auto">
<h1 class="text-center">Lyrics Search</h1>
<div class="search-box my-5">
<input id="text" type="text" class="form-control" placeholder="Enter your artist song name"> <span id="artist"></span> <span id="title"></span>
<button id="search-btn" class="btn btn-success search-btn">Search</button>
</div>
</div>
<!-- search results -->
<div id="result" class="search-result col-md-8 mx-auto py-4">
<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-9">
<h3 id="lyricsOne" class="lyrics-name">Purple Noon</h3>
<p id="artistOne" class="author lead">Album by <span class="artist">Washed Out</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button id="btnOne" class="get-lyrics btn btn-success">Get Lyrics</button>
</div>
</div>
<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-9">
<h3 id="lyricsTwo" class="lyrics-name">Purple Noon</h3>
<p id="artistTwo" class="author lead">Album by <span class="artist">Washed Out</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button id="btnTwo" class="get-lyrics btn btn-success">Get Lyrics</button>
</div>
</div>
<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-9">
<h3 id="lyricsThree" class="lyrics-name">Purple Noon</h3>
<p id="artistThree" class="author lead">Album by <span class="artist">Washed Out</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button id="btnThree" class="get-lyrics btn btn-success">Get Lyrics</button>
</div>
</div>
<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-9">
<h3 id="lyricsFour" class="lyrics-name">Purple Noon</h3>
<p id="artistFour" class="author lead">Album by <span class="artist">Washed Out</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button id="btnFour" class="get-lyrics btn btn-success">Get Lyrics</button>
</div>
</div>
<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-9">
<h3 id="lyricsFive" class="lyrics-name">Purple Noon</h3>
<p id="artistFive" class="author lead">Album by <span class="artist">Washed Out</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button id="btnFive" class="get-lyrics btn btn-success">Get Lyrics</button>
</div>
</div>
<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-9">
<h3 id="lyricsSix" class="lyrics-name">Purple Noon</h3>
<p id="artistSix" class="author lead">Album by <span class="artist">Washed Out</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button id="btnSix" class="get-lyrics btn btn-success">Get Lyrics</button>
</div>
</div>
<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-9">
<h3 id="lyricsSeven" class="lyrics-name">Purple Noon</h3>
<p id="artistSeven" class="author lead">Album by <span class="artist">Washed Out</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button id="btnSeven" class="get-lyrics btn btn-success">Get Lyrics</button>
</div>
</div>
<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-9">
<h3 id="lyricsEight" class="lyrics-name">Purple Noon</h3>
<p id="artistEight" class="author lead">Album by <span class="artist">Washed Out</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button id="btnEight" class="get-lyrics btn btn-success">Get Lyrics</button>
</div>
</div>
<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-9">
<h3 id="lyricsNine" class="lyrics-name">Purple Noon</h3>
<p id="artistNine" class="author lead">Album by <span class="artist">Washed Out</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button id="btnNine" class="get-lyrics btn btn-success">Get Lyrics</button>
</div>
</div>
<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-9">
<h3 id="lyricsTen" class="lyrics-name">Purple Noon</h3>
<p id="artistTen" class="author lead">Album by <span class="artist">Washed Out</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button id="btnTen" class="get-lyrics btn btn-success">Get Lyrics</button>
</div>
</div>
</div>
<!-- === search results === -->
<!-- Single Lyrics -->
<div id="lyrics" class="single-lyrics text-center">
<button class="btn go-back">‹</button>
<h2 class="text-success mb-4">Pentatonix - Na Na Na</h2>
<pre class="lyric text-white">
Wont go whistling like the wind blows,
Looking out my window,
Just to see the shine
Maybe you might call it crazy,
How Im acting lately,
Skipping through the sky
I see so clearly,
Why Im always feeling free.
So I sleep when my dreams,
Looking like reality
(Gonna feel it! Na na na...) x4
Gonna feel it!
I know where the greener grass grows
Youll just have to follow
To the other side
Lets go tiptoe on a tight rope,
Fallings only natural
Just spread your wings and fly
Youll see so clearly,
Why Im always feeling free.
So I sleep when our dreams
Looking like reality
(Gonna feel it! Na na na...) x4
Bring it down like
Ohh way oh
Yeah yeah yeah yeah yeah yeah
Break it down like
Ohh way oh
Yeah, yeah, yeah...
All around like
Ohh way oh
Yeah, yeah, yeah...
Sing it loud like!
Ohh way oh
Ah oo oo ooo
Gonna feel it! (Na na na...)
Make it sound like! (Na na na...)
All around like! (Na na na...)
Sing it loud like! (Na na na...)
Gonna feel like! (Na na na...)
</pre>
</div>
</main>
<!-- Optional JavaScript -->
<script src="app.js"></script>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- Custom Script Here -->
</body>
</html>

I just combined the 3 for loops into one.
const apiUrl = "https://api.lyrics.ovh/suggest";
const search = document.getElementById("search-btn");
const result = document.getElementById("result");
const text = document.getElementById("text");
const getLyrics = document.getElementsByClassName("get-lyrics");
//search by songs or artist...
function searchSongs(term) {
fetch (`${apiUrl}/${term}`)
.then (response => response.json())
.then (data => {
const lyricsName = document.getElementsByClassName("lyrics-name");
const getLyrics = document.getElementsByClassName("get-lyrics ");
const artist = document.getElementsByClassName("artist");
for (let index = 0; index < lyricsName.length; index++) {
lyricsName[index].innerText = data.data[index].album.title;
artist[index].innerText = data.data[index].artist.name;
//event listener to get lyrics
getLyrics[index].addEventListener("click", function(){
console.log("Song:"+data.data[index].album.title +" By:"+data.data[index].artist.name);
//getLyricsAPI(title, artist);
});
}
document.getElementById("result").style.display = "block";
//console.log(data);
});
}
//event listener to search song or artist
search.addEventListener("click", e => {
//e.preventDefault();
const searchTerm = text.value;
if (!searchTerm) {
alert("please type a song a name");
} else {
searchSongs(searchTerm);
}
})
<!doctype html>
<html lang="en">
<head>
<title>Hard Rock Solution - Song Lyric App</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- Custom css -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<nav class="navbar navbar-dark my-3">
<a class="navbar-brand" href="#">
<img src="images/logo.png" alt="Hard Rock Solution">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId" aria-expanded="false" aria-label="Toggle navigation">
<img src="images/toggler-icon.svg" alt="">
</button>
<div class="collapse navbar-collapse" id="collapsibleNavId">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdownId" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdownId">
<a class="dropdown-item" href="#">Action 1</a>
<a class="dropdown-item" href="#">Action 2</a>
</div>
</li>
</ul>
</div>
</nav>
<main class="content-area">
<div class="search-bar col-md-6 mx-auto">
<h1 class="text-center">Lyrics Search</h1>
<div class="search-box my-5">
<input id="text" type="text" class="form-control" placeholder="Enter your artist song name"> <span id="artist"></span> <span id="title"></span>
<button id="search-btn" class="btn btn-success search-btn">Search</button>
</div>
</div>
<!-- search results -->
<div id="result" class="search-result col-md-8 mx-auto py-4">
<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-9">
<h3 id="lyricsOne" class="lyrics-name">Purple Noon</h3>
<p id="artistOne" class="author lead">Album by <span class="artist">Washed Out</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button id="btnOne" class="get-lyrics btn btn-success">Get Lyrics</button>
</div>
</div>
<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-9">
<h3 id="lyricsTwo" class="lyrics-name">Purple Noon</h3>
<p id="artistTwo" class="author lead">Album by <span class="artist">Washed Out</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button id="btnTwo" class="get-lyrics btn btn-success">Get Lyrics</button>
</div>
</div>
<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-9">
<h3 id="lyricsThree" class="lyrics-name">Purple Noon</h3>
<p id="artistThree" class="author lead">Album by <span class="artist">Washed Out</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button id="btnThree" class="get-lyrics btn btn-success">Get Lyrics</button>
</div>
</div>
<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-9">
<h3 id="lyricsFour" class="lyrics-name">Purple Noon</h3>
<p id="artistFour" class="author lead">Album by <span class="artist">Washed Out</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button id="btnFour" class="get-lyrics btn btn-success">Get Lyrics</button>
</div>
</div>
<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-9">
<h3 id="lyricsFive" class="lyrics-name">Purple Noon</h3>
<p id="artistFive" class="author lead">Album by <span class="artist">Washed Out</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button id="btnFive" class="get-lyrics btn btn-success">Get Lyrics</button>
</div>
</div>
<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-9">
<h3 id="lyricsSix" class="lyrics-name">Purple Noon</h3>
<p id="artistSix" class="author lead">Album by <span class="artist">Washed Out</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button id="btnSix" class="get-lyrics btn btn-success">Get Lyrics</button>
</div>
</div>
<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-9">
<h3 id="lyricsSeven" class="lyrics-name">Purple Noon</h3>
<p id="artistSeven" class="author lead">Album by <span class="artist">Washed Out</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button id="btnSeven" class="get-lyrics btn btn-success">Get Lyrics</button>
</div>
</div>
<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-9">
<h3 id="lyricsEight" class="lyrics-name">Purple Noon</h3>
<p id="artistEight" class="author lead">Album by <span class="artist">Washed Out</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button id="btnEight" class="get-lyrics btn btn-success">Get Lyrics</button>
</div>
</div>
<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-9">
<h3 id="lyricsNine" class="lyrics-name">Purple Noon</h3>
<p id="artistNine" class="author lead">Album by <span class="artist">Washed Out</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button id="btnNine" class="get-lyrics btn btn-success">Get Lyrics</button>
</div>
</div>
<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-9">
<h3 id="lyricsTen" class="lyrics-name">Purple Noon</h3>
<p id="artistTen" class="author lead">Album by <span class="artist">Washed Out</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button id="btnTen" class="get-lyrics btn btn-success">Get Lyrics</button>
</div>
</div>
</div>
<!-- === search results === -->
<!-- Single Lyrics -->
<div id="lyrics" class="single-lyrics text-center">
<button class="btn go-back">‹</button>
<h2 class="text-success mb-4">Pentatonix - Na Na Na</h2>
<pre class="lyric text-white">
Wont go whistling like the wind blows,
Looking out my window,
Just to see the shine
Maybe you might call it crazy,
How Im acting lately,
Skipping through the sky
I see so clearly,
Why Im always feeling free.
So I sleep when my dreams,
Looking like reality
(Gonna feel it! Na na na...) x4
Gonna feel it!
I know where the greener grass grows
Youll just have to follow
To the other side
Lets go tiptoe on a tight rope,
Fallings only natural
Just spread your wings and fly
Youll see so clearly,
Why Im always feeling free.
So I sleep when our dreams
Looking like reality
(Gonna feel it! Na na na...) x4
Bring it down like
Ohh way oh
Yeah yeah yeah yeah yeah yeah
Break it down like
Ohh way oh
Yeah, yeah, yeah...
All around like
Ohh way oh
Yeah, yeah, yeah...
Sing it loud like!
Ohh way oh
Ah oo oo ooo
Gonna feel it! (Na na na...)
Make it sound like! (Na na na...)
All around like! (Na na na...)
Sing it loud like! (Na na na...)
Gonna feel like! (Na na na...)
</pre>
</div>
</main>
<!-- Optional JavaScript -->
<script src="app.js"></script>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- Custom Script Here -->
</body>
</html>

You can pass the event object into your event listener so you will get the which element is clicked. In event listener you can check element's id or what attribute you want to look. If you change the ids of buttons you will get the song information from the buttons.
for (let index = 0; index < getLyrics.length; index++) {
const element = getLyrics[index];
element.addEventListener("click", function(event){
console.log(event.target.getAttribute('id'))
const title = `${index + 1}`;
})
}

How to filter cards in Materialize CSS

I have a number of applications, so I am trying to write code in html. I want to filter the cards through materialized CSS, but I did not understand where the code I wrote did not work. Can you help me correct this?
Sorry if the article is not understood.
google translate :)
daha ne yazıyım yazdım işte yazacağımı kabul eder misin artık
function myFunction() {
var input, filter, cards, cardContainer, h5, title, i;
input = document.getElementById("myFilter");
filter = input.value.toUpperCase();
cardContainer = document.getElementById("myItems");
cards = cardContainer.getElementsByClassName("card");
for (i = 0; i < card.length; i++) {
title = cards[i].querySelector(".card-content h5.card-title");
if (title.innerText.toUpperCase().indexOf(filter) > -1) {
cards[i].style.display = "";
} else {
cards[i].style.display = "none";
}
}
}
<div class="container">
<div class="row">
<div class="col-sm-12 mb-3">
<input type="text" id="myFilter" class="form-control" onkeyup="myFunction()" placeholder="Search for names..">
</div>
</div>
<div class="row" id="myItems">
<div class="row">
<div class="col s6">
<div class="card">
<div class="card-image waves-block waves-light">
<img class="activator" src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/izncB6dCLV7LBQ5MsOPyMx9mUDa.jpg">
</div>
<div class="card-content">
<center>
<h5 class="card-title">How i Met Your Mother</h5>
</center>
</div>
</div>
</div>
<div class="col s6">
<div class="card">
<div class="card-image waves-block waves-light">
<img class="activator" src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/A9QDK4OWpv41W27kCv0LXe30k9S.jpg">
</div>
<div class="card-content">
<center>
<h5 class="card-title">Two and a Half Men</h5>
</center>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s6">
<div class="card">
<div class="card-image waves-block waves-light">
<img class="activator" src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/w7VV1jdtwzEC0c71AjUUA4T65Az.jpg">
</div>
<div class="card-content">
<center>
<h5 class="card-title">Seinfeld</h5>
</center>
</div>
</div>
</div>
<div class="col s6">
<div class="card">
<div class="card-image waves-block waves-light">
<img class="activator" src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/x40NhjIPoDoTbT0z2utFgIedtwh.jpg">
</div>
<div class="card-content">
<center>
<h5 class="card-title">Scrubs</h5>
</center>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s6">
<div class="card">
<div class="card-image waves-block waves-light">
<img class="activator" src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/ooBGRQBdbGzBxAVfExiO8r7kloA.jpg">
</div>
<div class="card-content">
<h5 class="card-title">Big Bang</h5>
</div>
</div>
</div>
<div class="col s6">
</div>
</div>
</di>
<style>
body {
background-color: #222731;
}
</style>

There is an error in your for-loop, you use wrote card.length instead of cards.length:
for (i = 0; i < cards.length; i++) {
title = cards[i].querySelector(".card-content h5.card-title");
if (title.innerText.toUpperCase().indexOf(filter) > -1) {
cards[i].style.display = "";
} else {
cards[i].style.display = "none";
}
}

I started to learn javascript. How can I add another scroll function?

This is HTML-code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Welcome</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div class="container-fluid">
<header>
<div id="menu" class="row no-gutter menu">
<div class="col-md-3 offset-md-1">
<img src="img/logo.png">
</div>
<div class="col-md-8">
<nav class="d-flex flex-row-reverse">
<ul class="p-2">
<li>
Improves
</li>
<li>
Projects
</li>
<li>
<a id="about" href="">About</a>
</li>
<li>
Home
</li>
</ul>
</nav>
</div>
</div>
<div class="row no-gutter">
<div class="hellopage">
<div class="col-md-10 offset-md-1 hello">
<font>
Hello.
</font>
<br>
<div class="mynameis">
My name is
<div class="name">
DENIS,
</div>
</div>
<div class="whoami">
I am a web-desihner, and front-end developer, and a person, who interested in IT.
</div>
<div class="quality">
Quality is a main parametr for me.
</div>
<div class="classcol-md-5 offset-md-4">
<button class="bnative1" id="button">
FOLLOW ME
</button>
</div>
</div>
</div>
</div>
</header>
<!-- Второй блок -->
<div class="container-fluid">
<div id="sb" class="row no-gutter sb">
<div class="col-md-6 offset-md-3 text-center whatcani">
What can I offer for you?
</div>
<div class="col-md-3 offset-md-1 pic1 ">
<img src="img/adopt.png">
<div class="txt1">
<div class="top1">Adaptive Web-Design</div>
<div>I always use adaptive</div>
<div>design.Usually,web-site</div>
<div>is an advertisment</div>
<div>for big set of companies.</div>
<div>It have to be focused on</div>
<div>client and must be</div>
<div>correctly displayed in all</div>
<div>devices</div>
</div>
</div>
<div class="col-md-3 offset-md-1 pic2">
<img src="img/hands.png">
<div class="txt2">
<div class="top2">Indivigual aproach</div>
<div>I always interact with</div>
<div>the customer and ready</div>
<div>to give some advice,</div>
<div>based on my experience</div>
<div>to make web-site better</div>
<div>and user-friendly</div>
</div>
</div>
<div class="col-md-3 offset-md-1 pic3">
<img src="img/calendar.png">
<div class="txt3">
<div class="top3">Completion on time</div>
<div>The project will be</div>
<div>compleated on time,</div>
<div>and a work plan will be</div>
<div>provided for the</div>
<div>customer</div>
</div>
</div>
<div class="col-md-8 offset-md-2 line">
<hr>
</div>
</div>
</div>
<!-- Третий блок -->
<div id="me" class="row no-gutter tb">
<div class="col-md-3 offset-md-4 text-center aboutme">
About me
</div>
<div class="col-md-10 offset-md-1 txtab">
<div>I started my career as a system administrator(2016). At work I</div>
<div>recieved a lot of skills, that helps me to deal every issue. Because</div>
<div>there are exist an issues, that you can't solve by using internet. For</div>
<div>example I worked with special software for MRI.</div>
</div>
<div class="col-md-4 offset-md-1 whiteone">
<img src="img/white.png">
</div>
<div class="col-md-6 nowi">
Now I am <span class="wd">WEB DESIGNER</span>
</div>
<div class="col-md-9 offset-md-1 person">
And a person, who ready to make <span class="cool">COOL</span> web-site for you.
</div>
<div class="col-md-4 offset-md-7 d-flex flex-row-reverse">
<img class="whitetwo" src="img/white.png">
</div>
</div>
<!-- Четвертый блок -->
<div class="row no-gutter fob">
<div class="col-md-5 offset-md-3 text-center inmy">
In my projects I use
</div>
<div class="col-md-4 offset-md-1 desone">
<img src="img/gapps.png">
<div class="tech1">
<div>I use graphical applications to</div>
<div>make a template for your website.</div>
<div>This is the first step. Here we can</div>
<div>coose a colors, that will be used</div>
<div>in web-site</div>
</div>
</div>
<div class="col-md-6 destwo">
<img src="img/site.png">
<div class="tech1">
<div>To make web-page, I use HTML,CSS, JS, Less. Here I</div>
<div>can make animation, that can make your website</div>
<div>alive.</div>
</div>
</div>
<div class="col-md-10 offset-md-1 technologies">
<div>I always <span class="devmy">DEVELOPE</span> myself, learn new technologies and</div>
</div>
<div class="col-md-4 offset-md-7 inmy"><span class="use">USE</span> it in my projects</div>
</div>
<!-- Футер -->
<div class="row no-gutter foot">
<div class="col-md-4 offset-md-1 social">
<img src="img/email.png">
den_lupanov#mail.ru
<div class="fb">
<img src="img/facebook.png">
https://www.facebook.com/den.necris
</div>
</div>
<div class="col-md-1 offset-md-5 gototop">
<img id="up" src="img/up.png">
</div>
</div>
</div>
</div>
</body>
</html>
'''
I have a code:
window.onload = function(){
// Изменение цвета при наведении на кнопку
var button = document.getElementById("button");
button.addEventListener("mouseenter", function(){
button.classList.remove("bnative1");
button.classList.add("buttonclass1");
});
button.addEventListener("mouseleave", function(){
button.classList.remove("buttonclass1");
button.classList.add("bnative1");
})
// Scroll to the first element(Works ok)
document.getElementById("button").addEventListener("click", scrollToElement);
function scrollToElement(e){
element = document.getElementById("sb");
element.scrollIntoView({behavior: 'smooth', block: "start",});
}
//Scroll to another element(ERROR)
document.getElementById("up").addEventListener("click", scrollToTop);
function scrollToTop(e){
top = document.getElementById("menu");
top.scrollIntoView({behavior: 'smooth', block: "start"});
}
}
'''
Finally, when I click on the second element for scrolling, in debugger I recieve an error:"Uncaught TypeError: top.scrollIntoView is not a function
at HTMLImageElement.scrollToTop (script.js:22)". It should works properly, but I don't understand why it doen not working

you just needed to define "top". add var and your code works!
window.onload = function(){
}
// Изменение цвета при наведении на кнопку
var button = document.getElementById("button");
button.addEventListener("mouseenter", function(){
button.classList.remove("bnative1");
button.classList.add("buttonclass1");
});
button.addEventListener("mouseleave", function(){
button.classList.remove("buttonclass1");
button.classList.add("bnative1");
})
// Scroll to the first element(Works ok)
document.getElementById("button").addEventListener("click", scrollToElement);
function scrollToElement(e){
element = document.getElementById("sb");
element.scrollIntoView({behavior: 'smooth', block: "start",});
}
//Scroll to another element(ERROR)
document.getElementById("up").addEventListener("click", scrollToTop);
function scrollToTop(e){
var top = document.getElementById("menu");
top.scrollIntoView({behavior: 'smooth', block: "start"});
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Welcome</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div class="container-fluid">
<header>
<div id="menu" class="row no-gutter menu">
<div class="col-md-3 offset-md-1">
<img src="img/logo.png">
</div>
<div class="col-md-8">
<nav class="d-flex flex-row-reverse">
<ul class="p-2">
<li>
Improves
</li>
<li>
Projects
</li>
<li>
<a id="about" href="">About</a>
</li>
<li>
Home
</li>
</ul>
</nav>
</div>
</div>
<div class="row no-gutter">
<div class="hellopage">
<div class="col-md-10 offset-md-1 hello">
<font>
Hello.
</font>
<br>
<div class="mynameis">
My name is
<div class="name">
DENIS,
</div>
</div>
<div class="whoami">
I am a web-desihner, and front-end developer, and a person, who interested in IT.
</div>
<div class="quality">
Quality is a main parametr for me.
</div>
<div class="classcol-md-5 offset-md-4">
<button class="bnative1" id="button">
FOLLOW ME
</button>
</div>
</div>
</div>
</div>
</header>
<!-- Второй блок -->
<div class="container-fluid">
<div id="sb" class="row no-gutter sb">
<div class="col-md-6 offset-md-3 text-center whatcani">
What can I offer for you?
</div>
<div class="col-md-3 offset-md-1 pic1 ">
<img src="img/adopt.png">
<div class="txt1">
<div class="top1">Adaptive Web-Design</div>
<div>I always use adaptive</div>
<div>design.Usually,web-site</div>
<div>is an advertisment</div>
<div>for big set of companies.</div>
<div>It have to be focused on</div>
<div>client and must be</div>
<div>correctly displayed in all</div>
<div>devices</div>
</div>
</div>
<div class="col-md-3 offset-md-1 pic2">
<img src="img/hands.png">
<div class="txt2">
<div class="top2">Indivigual aproach</div>
<div>I always interact with</div>
<div>the customer and ready</div>
<div>to give some advice,</div>
<div>based on my experience</div>
<div>to make web-site better</div>
<div>and user-friendly</div>
</div>
</div>
<div class="col-md-3 offset-md-1 pic3">
<img src="img/calendar.png">
<div class="txt3">
<div class="top3">Completion on time</div>
<div>The project will be</div>
<div>compleated on time,</div>
<div>and a work plan will be</div>
<div>provided for the</div>
<div>customer</div>
</div>
</div>
<div class="col-md-8 offset-md-2 line">
<hr>
</div>
</div>
</div>
<!-- Третий блок -->
<div id="me" class="row no-gutter tb">
<div class="col-md-3 offset-md-4 text-center aboutme">
About me
</div>
<div class="col-md-10 offset-md-1 txtab">
<div>I started my career as a system administrator(2016). At work I</div>
<div>recieved a lot of skills, that helps me to deal every issue. Because</div>
<div>there are exist an issues, that you can't solve by using internet. For</div>
<div>example I worked with special software for MRI.</div>
</div>
<div class="col-md-4 offset-md-1 whiteone">
<img src="img/white.png">
</div>
<div class="col-md-6 nowi">
Now I am <span class="wd">WEB DESIGNER</span>
</div>
<div class="col-md-9 offset-md-1 person">
And a person, who ready to make <span class="cool">COOL</span> web-site for you.
</div>
<div class="col-md-4 offset-md-7 d-flex flex-row-reverse">
<img class="whitetwo" src="img/white.png">
</div>
</div>
<!-- Четвертый блок -->
<div class="row no-gutter fob">
<div class="col-md-5 offset-md-3 text-center inmy">
In my projects I use
</div>
<div class="col-md-4 offset-md-1 desone">
<img src="img/gapps.png">
<div class="tech1">
<div>I use graphical applications to</div>
<div>make a template for your website.</div>
<div>This is the first step. Here we can</div>
<div>coose a colors, that will be used</div>
<div>in web-site</div>
</div>
</div>
<div class="col-md-6 destwo">
<img src="img/site.png">
<div class="tech1">
<div>To make web-page, I use HTML,CSS, JS, Less. Here I</div>
<div>can make animation, that can make your website</div>
<div>alive.</div>
</div>
</div>
<div class="col-md-10 offset-md-1 technologies">
<div>I always <span class="devmy">DEVELOPE</span> myself, learn new technologies and</div>
</div>
<div class="col-md-4 offset-md-7 inmy"><span class="use">USE</span> it in my projects</div>
</div>
<!-- Футер -->
<div class="row no-gutter foot">
<div class="col-md-4 offset-md-1 social">
<img src="img/email.png">
den_lupanov#mail.ru
<div class="fb">
<img src="img/facebook.png">
https://www.facebook.com/den.necris
</div>
</div>
<div class="col-md-1 offset-md-5 gototop">
<img id="up" src="img/up.png">
</div>
</div>
</div>

Other than using it like that it might be better to make it one function and use it in the HTML.
The following code should work like a charm:
function scrollSmoothTo(elementId) {
var element = document.getElementById(elementId);
element.scrollIntoView({ block: 'start', behavior: 'smooth' });
}
And, in HTML use it like that:
<a class="btn-outline-light" onclick="scrollSmoothTo('work')">See our work</a>

How to select data from DIV's with something like $this?

given the following code snippet:
<div class="container-fluid" id="networdapp">
<div class="row" >
<div v-for="result in results" class="col-sm-6" >
<div class="card m-3 h-240 bg-light">
<div class="card-header text-center"> {{ result.title }} </div>
<div class="card-body" style="height:200px" >
<p class="card-text" v-html="result.prevDesc"></p>
</div>
<div class="card-footer bg-transparent border-info">
Details
</div>
</div>
</div>
</div>
</div>
How can I read data from a random div/unknown position in for div? I can't use PHP.
This <div ... id="networdapp"> is created depending on the results from a database. How can I get the data {{result.title}} from a random div when I click the "Details" button from it?
I tried to get it using JQuery but I ended up by selecting all data from all DIVs. Then I was thinking if I can do that with $this and I tried but still can't do it.
EDIT: There is the generated html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Website Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">WebSite for testing</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarWw1" aria-controls="navbarWw1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarWw1">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="map">Map</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about">About</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" id="myInput" type="search" onkeyup="myFunction()" placeholder="Find your next memories!">
</form>
</div>
</nav>
<div class="container-fluid" id="networdapp" style="display:none;">
<div class="row" >
<div v-for="result in results" class="col-sm-6" >
<div class="card m-3 h-240 bg-light" >
<div class="card-header text-center" > {{ result.title }} </div>
<div class="card-body" style="height:200px" >
<p class="card-text" v-html="result.prevDesc"></p>
</div>
<div class="card-footer bg-transparent border-info">
<a href="/details" class="btn btn-info" >Details</a>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
function myFunction() {
var input , filter , OK = false ;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
if(filter.length > 0 ) {
document.getElementById("networdapp").style.display = "";
$( ".col-sm-6" ).each(function( index ) {
if ($(this).text().toUpperCase().indexOf(filter) > -1){
this.style.display="";
}else{
this.style.display="none";
//document.getElementById("networdapp").style.display = "none";
}
});
}
else{
document.getElementById("networdapp").style.display = "none";
}
}
</script>
<script type="text/javascript">
const vm = new Vue({
el: '#networdapp',
data: {
results:[]
},
mounted() {
axios.get('/getJson')
.then(response => {
this.results = response.data;
})
.catch( e => {
console.log(e);
});
}
});
</script>
</html>

The div has the class card-header, so...
$('.card-header').text()
//or
document.getElementsByClassName('card-header')[0].innerText
//or
document.querySelector('.card-header').innerText
//or
document.querySelectorAll('.card-header')[0].innerText
However, you want to get the one related to the button clicked. So that could look something like...
//create a delegate event handler on the container for all the buttons
$('#networdapp').on('click', '.btn.btn-info', function (e) {
//prevent the link so the runnable snippet stops jumping back to the top
e.preventDefault();
//find the parent div with the card class that is the parent to both
//the link and the title
var $card = $(this).closest('.card');
//find the nested card header in the card clicked
var $cardHeader = $card.find('.card-header');
//console log the text
console.log($cardHeader.text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid" id="networdapp">
<div class="row">
<div v-for="result in results" class="col-sm-6" >
<div class="card m-3 h-240 bg-light">
<div class="card-header text-center"> title 1 </div>
<div class="card-body" style="height:200px" >
<p class="card-text" v-html="result.prevDesc"></p>
</div>
<div class="card-footer bg-transparent border-info">
Details
</div>
</div>
</div>
</div>
<div class="row">
<div v-for="result in results" class="col-sm-6" >
<div class="card m-3 h-240 bg-light">
<div class="card-header text-center"> title 2 </div>
<div class="card-body" style="height:200px" >
<p class="card-text" v-html="result.prevDesc"></p>
</div>
<div class="card-footer bg-transparent border-info">
Details
</div>
</div>
</div>
</div>
<div class="row">
<div v-for="result in results" class="col-sm-6" >
<div class="card m-3 h-240 bg-light">
<div class="card-header text-center"> title 3 </div>
<div class="card-body" style="height:200px" >
<p class="card-text" v-html="result.prevDesc"></p>
</div>
<div class="card-footer bg-transparent border-info">
Details
</div>
</div>
</div>
</div>
</div>

Using jQuery:
$("#networdapp .card-header.text-center").html()
So:
$(".btn.btn-info").click(function(){
console.log( $("#networdapp .card-header.text-center").html() );
})
Or:
$(".btn.btn-info").click(function(){
console.log( $(this).closest("#networdapp").find(".card-header.text-center").html() );
})

You can select div then use the context to select the button r other elements within.
$(".card").each(function(){
var that = this; // <--- the current div
var header = $(that).find(".card-header");
var detailBtn = $(that).find(".btn-info");
// set event handlers here
// Example:
detailBtn.click(function(){
alert(header.text());
});
});
Here is a working Example

Using jquery
$(this).parents("#networdapp").find(".card-header.text-center").text();
To remove unneccesay spaces you can use trim
$.trim($(this).parents("#networdapp").find(".card-header.text-center").text());

Develop Reference

JavaScript is the programming language of the Web.

javascript script no working adding classlist to an element - javascript

querySelector all returns nodeList not array of elements. use spread operator to convert them to array. here's an example let options = [...document.querySelectorAll('.list_questions')];

Related

Get text content of all parent divs

How can I access the value of a specific button that has the same classes

How to filter cards in Materialize CSS

I started to learn javascript. How can I add another scroll function?

How to select data from DIV's with something like $this?

Categories

Resources