Nästlat UL komma åt via e.target
Hej
Jag håller på att skapa en sida för att ta ut hundar enligt HTML koden nedan:
<!doctype>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dog breeds</title>
<!-- Boostrap & egen CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootst..." integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="dogs.css">
<!-- jQuery -->
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
</script>
<script src="dogs.js" defer></script>
</head>
<body>
<div id="mainConainer">
<header>
<h1>Hundraser</h1>
</header>
<main>
<section id="dogBreedsMenues">
<h2>Meny</h2><br><br>
<ul id="headDogBreedsContainer"></ul>
</section>
<section id="dogBreedsImgs">
<h2 id="presentDogBreed">Randombilder </h2>
<button type="button">Ladda - Random bild</button>
<img id="insurtDogBreedImgs" src="" alt="">
</section>
</main>
</div>
</body>
</html>
Sidan sköts av Javascript:
// Refresh knapp för random bilder
let dogBreedDefault;
let getBtnRefresh = document.querySelector('button');
getBtnRefresh.addEventListener('click', getRandomImgs);
getBtnRefresh.textContent = "Ny bild!";
// Gäler för hela projektet ---------------------------------------------------------
let getPlaceforImgs = document.querySelector('#insurtDogBreedImgs');
let getDogBreedsStrPlace = document.querySelector('#presentDogBreed');
let createdLiForUl;
let getBreedPlace = document.querySelector('#headDogBreedsContainer'); //Hur skicka in vartbael på ett mer riktigt sätt?
let getAllDogBreeds;
// Menyn skapas med både huvud och underraser ----------------------------------------
getAllBreed();
function getAllBreed() {
let requestBreed = new XMLHttpRequest();
requestBreed.addEventListener('load', renderDogBreedMenue);
let urlStr = 'https://dog.ceo/api/breeds/list/all';
requestBreed.open('GET', urlStr);
requestBreed.send();
}
function renderDogBreedMenue() {
let getParsedListOfAllBreed = JSON.parse(this.responseText);
getParsedListOfAllBreed = getParsedListOfAllBreed['message'];
//Checka om hurvida min meny finns eller inte
let checkIfAnyChildNode = document.querySelector('#headDogBreedsContainer').textContent;
for (let listAllBreed in getParsedListOfAllBreed) {
if (checkIfAnyChildNode === "") {
createdLiForUl = document.createElement('li');
createdLiForUl.setAttribute('class', 'dogBreedBox');
let createdPForLiInUl = document.createElement('p'); //Huvud hundrasaerna läggs i P element för att lätttare plockas ut
getAllDogBreeds = listAllBreed;
// Adderar blanksteg ( ' ' ) sist i regeln nedan för funktionen getRandomImgs och raden med ID = 3423
createdPForLiInUl.textContent = getAllDogBreeds.charAt(0).toUpperCase() + getAllDogBreeds.slice(1);
createdLiForUl.appendChild(createdPForLiInUl);
getBreedPlace.appendChild(createdLiForUl);
}
getSubBreeds = getParsedListOfAllBreed[listAllBreed];
let createdSubUlForLi = document.createElement('ul');
createdSubUlForLi.setAttribute('class', 'subBreed');
// Alla underraser skapas och läggs under respektive huvudras
for (let i = 0; i < getSubBreeds.length; i++) {
if (checkIfAnyChildNode === "") {
let insurtSubBreeds = getSubBreeds[i];
let createdSubLiForUl = document.createElement('li');
createdSubLiForUl.setAttribute('class', 'subBreedIteam');
// Adderar blanksteg ( ' ' ) sist i regeln nedan för funktionen getRandomImgs och raden med ID = 3423
createdSubLiForUl.textContent = insurtSubBreeds.charAt(0).toUpperCase() + insurtSubBreeds.slice(1);
createdSubUlForLi.appendChild(createdSubLiForUl);
createdLiForUl.appendChild(createdSubUlForLi);
}
}
}
getRandomImgs();
startLiListen();
}
function getRandomImgs () {
let requestImgs = new XMLHttpRequest();
requestImgs.addEventListener('load', insurtRandomImgs);
let urlStr = 'https://dog.ceo/api/breeds/image/random';
requestImgs.open('GET', urlStr);
requestImgs.send();
}
function insurtRandomImgs() {
console.log(getPlaceforImgs);
let getParsedRandomImgs = JSON.parse(this.responseText);
let getParsedImgsOfAllBreed = getParsedRandomImgs['message'];
getPlaceforImgs.setAttribute('src', getParsedImgsOfAllBreed);
}
function startLiListen() {
let getLiElement = document.querySelectorAll('.dogBreedBox p, .subBreedIteam');
for (let i = 0; i < getLiElement.length; i++) {
let getLiElementToListen = getLiElement[i];
getLiElementToListen.addEventListener('click', getDogBreedSpecificStrs);
}
}
function getDogBreedSpecificStrs(e){
let targetLi = e.target;
let getTargetStr = targetLi.textContent;
// Skapar ett namn uppe i adressfältet som jag sedan kan använda för namnspecifica ändamål
location.hash = getTargetStr;
let getTargetBreedStrAddressbar = location.hash;
getTargetBreedStrAddressbar = location.hash.substring(1); // Raderar # tecknet i strängen
let targetBreedStr = getTargetBreedStrAddressbar.toLowerCase();
let getTargetSubBreedsHeadStr = targetLi.parentElement.textContent;
console.log(getTargetSubBreedsHeadStr);
let getTargetStrsInSubBreedToLength = getTargetStrsInSubBreed.split(' ').length;
console.log(getTargetStrsInSubBreedToLength);
//let getChildNodesOfTargetLi = targetLi.childNodes.length; //OBS mellanslag räknas som en textnode
if (getTargetStrsInSubBreedToLength === 2 || getTargetStrsInSubBreedToLength === 4) {
getDogBreedsStrPlace.textContent = "Bilder på " + getTargetBreedStrAddressbar;
}
else if (getTargetStrsInSubBreedToLength > 2) {
let getHeadBreedOfTargetSubBreed = targetLi.parentElement.parentElement.childNodes[0].textContent;
getDogBreedsStrPlace.textContent = "Bilder på " + getHeadBreedOfTargetSubBreed + " --> " + getTargetBreedStrAddressbar;
}
getBtnRefresh.removeEventListener('click', getRandomImgs);
getTargetBreedStrs(targetBreedStr);
}
// Hämta random bilder baserat på vilken ras jag väljer
function getTargetBreedStrs(targetBreedStr){
let requestImgs = new XMLHttpRequest();
requestImgs.addEventListener('load', getDogBreedSpecificImgs);
let urlStr = 'https://dog.ceo/api/breed/' + targetBreedStr + '/images/random';
requestImgs.open('GET', urlStr);
requestImgs.send();
}
function getDogBreedSpecificImgs() {
//
let getParsedListOfAllBreed = JSON.parse(this.responseText);
let getParsedImgsOfAllBreed = getParsedListOfAllBreed['message'];
getPlaceforImgs.setAttribute('src', getParsedImgsOfAllBreed);
}
Om det är tillåtet att länka till Githubb kan fixa det ?
Problem:
Jag har ett klick event kopplat till mina alla li där min fråga gäller denna typ av li med nästlat ul m.m. Se nedan:
<li class="dogBreedBox">
<p>Bulldog</p>
<ul class="subBreed">
<li class="subBreedIteam">Boston</li>
<li class="subBreedIteam">French</li>
</ul>
</li>
Jag vill i JS kunna plocka ut rätt p element enligt li elementet jag klickar på. Förutsatt att li elementet ligger i ett nästlat li!
Lätt det begripligt?
Mvh Fredrik
Computer: Windows 10, 64-bit, Intel i9 - 10850K, Asus Rog MAXIMUS XII HERO (WI-FI), 32GB RAM, Asus RTX3070
Game control: Home Cockpit, Keyboard, Saitek Pro Flight X-56 Rhino H.O.T.A.S.