<![CDATA[
<!DOCTYPE html>
<style>
#demo {
width: 500px;
height: 400px;
}
/* Lista konténerének stílusa */
#listContainer {
width: 500px; /* A konténer szélessége */
height: 400px; /* A konténer magassága */
overflow: auto; /* Görgető sáv bekapcsolása, ha a tartalom túlcsordul */
overflow-x: scroll;
border: 1px solid #ccc;
background: PAPAYAWHIP;
}
/* Lista stílusa */
#myList {
list-style-type: none;
padding: 0;
}
#myList li {
border: 1px solid #ddd;
padding: 10px;
margin: 5px;
border-radius: 5px; /* Sarkok kerekítése 5 pixel sugárral */
cursor: pointer;
background-color: LightCoral;
}
#myList li:hover {
background-color: LightSteelBlue ;
}
</style>
<body style="background-color:powderblue;">
<h1>Könyv/anime kereső</h1>
</p>
</p>
<label for="fname">Keresés</label><br>
<input type="text" id="fname" name="" value=""><br>
</p>
<select name="keresett dolgok" id="kereses" onchange="myFunction()">
<option value="0">Összes</option>
<option value="1">Befejezett</option>
<option value="2">Aktív</option>
<option value="3">Félbehagyott</option>
<option value="4">Felfüggesztett</option>
<option value="5">Dobott</option>
<option value="6">Egyéb</option>
<option value="7">Titok</option>
<option value="8">Tervezett</option>
<option value="9">FB1</option>
<option value="10">Várható II. Évad</option>
<option value="11">FB3</option>
<option value="12">FB4</option>
<option value="13">FB5</option>
<option value="14">FB6</option>
<option value="15">-------------</option>
<option value="16">Könyvek</option>
<option value="17">Hegedű mellett</option>
<option value="18">F1</option>
<option value="19">X-en</option>
<option value="20">Áll</option>
<option value="21">Ámf</option>
<option value="22">Husz</option>
<option value="23">Kisz</option>
<option value="24">Leg</option>
<option value="volvo">Ar</option>
</select>
</p>
<button id="myButton">Click me</button>
</p>
</p>
</p>
</p>
<div id="nagycontainer">
<div id="listContainer">
<ul id="myList">
<li>Elem1</li>
<li>Elem2</li>
</ul>
</div>
<textarea id="demo">TextArea</textarea>
</div>
<input type="text" id="megjText" name="" value="1"><br>
</p>
<input type="text" id="hosszText" name="" value="2"><br>
</p>
<input type="text" id="katText" name="" value="3"><br>
</p>
<script>
class Anime {
constructor(id, nev, nezem, tartalom, reszek, megjegyzes) {
this.id = id;
this.nev = nev;
this.nezem = nezem;
this.tartalom = tartalom;
this.reszek = reszek;
this.megjegyzes = megjegyzes;
}
}
var rendezes = document.getElementById("nagycontainer");
rendezes.style.display = "flex";
var global = 0;
//inic lista
const listContainer = document.getElementById("listContainer");
const addButton = document.getElementById("addElementButton");
// Lista elemekhez tartozó eseményfigyelő hozzáadása
listContainer.addEventListener("click", function(event) {
const target = event.target;
if (target.tagName === "LI") {
//alert(`Rá kattintottak az elemre: ${target.textContent}`);
const listItems = Array.from(target.parentElement.children);
const itemIndex = listItems.indexOf(target);
doSomethingWithIndex(itemIndex);
}
});
var inp = document.getElementById("fname");
inp.addEventListener("keypress", function(event) {
if (event.key == "Enter") {
myFunction();
}
});
var button = document.getElementById("myButton");
button.addEventListener("click", myFunction);
// Esetlegesen hozz létre egy külön érintési eseménykezelőt is
button.addEventListener("touchstart", myFunction);
let animeList = [];
function myFunction2() {
//lista kiürítése:
const list = document.getElementById("myList");
while (list.firstChild) {
list.removeChild(list.firstChild);
}
}
function myFunction() {
global = 0;
const list = document.getElementById("myList");
animeList = [];
while (list.firstChild) {
list.removeChild(list.firstChild);
}
var comboIndex = document.getElementById("kereses").value;
var xhttp = new XMLHttpRequest();
xhttp.open("GET", "animek.xml", false);
xhttp.send();
var xmlDoc = xhttp.responseXML;
// Kiválasztjuk az "Animek" elemet
var animek = xmlDoc.getElementsByTagName("Animek")[0];
// Kiválasztjuk az "anime" elemeket
var animeElements = animek.getElementsByTagName("anime");
var csacsacsa = "";
var keresett = document.getElementById("fname").value;
var talalat = false;
// Iterálunk az "anime" elemeken és kiírjuk az információkat
for (var i = 0; i < animeElements.length; i++) {
var animeID = animeElements[i].getElementsByTagName("animeID")[0].textContent;
var animeNev = animeElements[i].getElementsByTagName("animeNev")[0].textContent;
var nezem = animeElements[i].getElementsByTagName("nezem")[0].textContent;
var reszek = animeElements[i].getElementsByTagName("reszek")[0].textContent;
var megjegyzes = animeElements[i].getElementsByTagName("megjegyzes")[0].textContent;
var tartalom = animeElements[i].getElementsByTagName("tartalom")[0].textContent;
var eredmeny = animeNev.toUpperCase().includes(keresett.toUpperCase());
const elemAnime = new Anime(animeID, animeNev, nezem, reszek, megjegyzes, tartalom);
if (eredmeny == true) {
if (comboIndex == 0 || nezem == comboIndex - 1) {
csacsacsa = csacsacsa + "\n" + animeNev;
eredmeny = false;
talalat = true;
//hozzáad listához
const newElement = document.createElement("li");
newElement.textContent = animeNev;
list.appendChild(newElement);
animeList.push(elemAnime);
}
}
}
}
function doSomethingWithIndex(index) {
global = index;
const areaT = document.getElementById("demo");
areaT.value = animeList[index].megjegyzes + " " + animeList[index].reszek;
const megjT = document.getElementById("megjText");
const hosszT = document.getElementById("hosszText");
const katT = document.getElementById("katText");
megjT.value = animeList[index].tartalom;
hosszT.value = animeList[index].reszek;
katT.value = animeList[index].nezem;
//document.getElementById("megjText").value = "Új érték 1";
//document.getElementById("hosszText").value = "Új érték 2";
//document.getElementById("katText").value = "Új érték 3";
}
</script>
</body>
<br>Partneroldalak: <br>
<a href="https://domain.domainshop.hu/domain.html" alt="trhely domainregisztrci">Domain regisztrci tr s szerverszolgltatsok: domain domainnv trhely e-mail, imap, pop3</a><br>
<a href="https://webtar.hu" alt="trhely donainregisztrci">webtar.hu</a><br>
<a href="https://ingyenweb.hu" alt="ingyenweb">ingyenweb.hu</a><br>
<a href="https://videok.hu" alt="Videk">videok.hu</a><br>
<a href="https://xn--fotk-sqa.hu" alt="fotk">fotk.hu</a><br>
<a href="https://randi.hu" alt="Randi">randi.hu</a><br>
<a href="https://licit.hu" alt="Licit">licit.hu</a><br>
<a href="https://napivicc.hu" alt="vicc">napivicc.hu</a><br>
<a href="https://gyertyalang.hu" alt="gyertyagyjts">gyertyalang.hu</a><br>
<a href="https://xn--helyesrs-fza2j.hu" alt="helyesrs.hu">helyesrs.hu</a><br>
<a href="https://domain.webtar.hu/domain.html" alt="Domain regiszrci s trhely">Domain regisztrci</a><br>
]]>