- Magga: PLEX: multimédia az egész lakásban
- Luck Dragon: Asszociációs játék. :)
- f(x)=exp(x): A laposföld elmebaj: Vissza a jövőbe!
- sziku69: Fűzzük össze a szavakat :)
- sziku69: Szólánc.
- ubyegon2: Airfryer XL XXL forrólevegős sütő gyakorlati tanácsok, ötletek, receptek
- Argos: Szeretem az ecetfát
- No Voice in the Galaxy
- Parci: Milyen mosógépet vegyek?
- D1Rect: Nagy "hülyétkapokazapróktól" topik
-
LOGOUT
JavaScript != Java (A JavaScript nem összekeverendő a Javával, két különböző programozási nyelvről van szó!)
Új hozzászólás Aktív témák
-
martonx
veterán
Nem kétlem, hogy valamicske időt belefektettél a kódok innen-onnan összegubrincsolásába. Viszont szerintem te is látod, hogy ez nem egy olyan egyszerű dolog, mint megtanulni fát vágni. A kérdésekkel semmi baj nincs, amint azok egy fórum keretein belül pár mondattal, pár sornyi példa kóddal megválaszolhatóak.
Esetedben viszont nem ez a helyzet. X órát elszórakoztál netről innen onnan leszedett cuccokkal, és most ezeket mutogatva várod, hogy valaki csinálja meg (mert azok a kódok simán kukázhatóak, nem 1-2 sorral van bennük baj, hanem koncepcionálisan), magyarázza el, tanítson meg téged. Ez így nem fog menni.
Mindenesetre ha utána nézel a Fetch API-nak, async, await-nek, Promise-nak, akkor meg fogod tudni oldani amit szeretnél.
-
btz
addikt
Illetve azt sem vártam el senkitől sem itt, sem máshol, hogy hűde sürgösen helyettem rakjon össze egész weboldalakat, így ezt az atomerőműves példát sem tudom behelyettesíteni az én esetemre.
Nekem bőven az is elég ha támpontot ad valaki egy egy problémára, (ahogy például te is tetted a fenti DOM Content Loadedes példával, ami sajnos nem hozott eredményt ugyan, illetve már a kérdés feltevése előtt is próbálkoztam vele, mégis hasznos megközelítése a segítségnyújtásnak). Nem várom el senkitől hogy helyettem dolgozzon,helyettem írja meg a kódot. Szóval úgy gondolom rosszul látod a dolgot. -
martonx
veterán
Nyilván, csak amit látok, hogy még az időt se fekteted bele. Majd amikor jól felkészült összeszedett, működő jsfiddle, codepen, bánomisén milyen példákkal jössz, akkor lesz értelme az akár hülyének is tűnő kérdésekkel foglalkozni. Gyanítom mire megcsinálnál egy ilyen működő példát, közben utána olvasnál kényszerűségből ennek annak, hirtelen tárgytalan lenne a kérdésed is. Mert ez így csak időpocsékolás, hogy hirtelen kell neked valami, de olyan hirtelen, hogy értelmesen még kérdezni sincs időd. Ráadásul olyan ez mintha egy atomfizika topikban elkezdenéd kérdezgetni, hogy na és akkor hallottam, azokról az atomokról, erőművet szeretnék építeni, írjátok már le pár sorban gyorsan, hogy mit és hogy, 5 percem van rá, lehetőleg ne kelljen semmin módosítanom, csak átemelem a leírást, és máris termelje az áramot.
Az meg, hogy ki mit csinál főállásában, és kinek mire van ideje, abszolút nem tartozik ide. Ha nincs időd ezzel foglalkozni, akkor ne foglalkozz
-
martonx
veterán
Szerintem egy fórumnak nem feladata (nem is lehet ilyen formában) nulláról megtanítani valakit programozni, aki ráadásul szemlátomást megoldást akar, nem tanulni. Hiszem, hogy a kérdéseid helyett, ha elvégeznél egy udemy javascript kurzust, vagy vennél egy minimális fáradtságot, és végigcsinálnál pár netes tutorialt, máris magadtól meglelnéd a válaszokat.
Vagy ha ennyire nem akarsz foglalkozni a témával, akkor fizessetek valakinek aki megcsinálja nektek amit szeretnétek.
-
btz
addikt
Amúgy ha akarok több .html fájlt is beszúrni akkor mindegyik elé kell egy callback konstans?
<script>
const callback = () => {
....
};
includeHTML("content.html", "content", callback);
const callback2 = () => {
....
};
includeHTML("content2.html", "content2", callback2);
</script> -
disy68
aktív tag
Továbbra is az a gond, hogy nem a korábban ajánlott irányba mész. Az include html-es függvényednek adjad át callback-ként, amit akarsz csinálni miután betöltött az ajax kérés. Ez teljesen mindegy, hogy egy eseménykezelő megadása vagy valami extra html hozzáadása valamihez. codesandbox
-
btz
addikt
[HTML beágyazott kód QuerySelector működés]
Közben felmerült a kérdés, hogy ha a content.html output2 elemébe nem klikk eseménykor, hanem betöltéskor, akarok berakni valamit, akkor azt hogyan tehetem meg. Sajnos csak ilyen csúnya megoldás jutott eszembe:
setTimeout(function() {
var output2var = document.getElementById("output2");
output2var.innerHTML = "OUTPUT2 IS WORKING";
}, 1000);Azaz setTimeoutal megvárom a teljes betöltést. Elég gány.
-
dqdb
nagyúr
Ha az
[A, B]intervallumot szeretnéd véletlen sorrendben felsorolni (mert amit leírtál, az nem véletlenszám-generálás, hanem véletlensorrend-generálás), akkor készíts egy tömböt[A, A+1, A+2, …, B-1, B]elemekkel, egyA-tólB-ig vagyA-tól(A+B+1)/2-ig menő ciklussal cserélj ki két elemet, ahol a két sorrendet véletlenszám-generátorral határozod meg. A generálás pedig mehet a tömbbőlshift()metódussal, amíg van benne valami.Másik lehetőség, hogy gyűjtöd egy listába az eddig kisorsolt számokat. Ha a lista hossza megegyezik a
B-A+1értékkel, akkor nem tudsz visszaadni semmit sem, mert elfogytak a lehetőségek. Ha rövidebb a lista, akkor addig generálsz véletlen számot, amíg az nem lesz benne a listában. A visszaadott számot hozzáfűzöd a listához. A módszer hátránya a másikkal szemben, hogy induláskor igaz, hogyO(1)időt igényelO(n)helyett, de a generálás már legjobb esetben isO(n×log n)leszO(1)helyett. -
disy68
aktív tag
A te példádban az a legfőbb gond, hogy az ajax hívás aszinkron (XMLHttpRequest) és amikor hivatkoznál a testclick id-jú elemre, az még nincs benne a dom-ban. Az után tudsz csak rá hivatkozni, hogy az ajax kérés lefutott.
Erre az egyik lehetőség egy callback lehet, ami akkor lesz meghívva, amikor a content már bekerült a dom-ba.
Hogy legyen más is mint a korábbi minta, a lekérést átírtam fetch api-ra, meg kiszedtem a fölösleget, hogy átláthatóbb legyen: link
-
cattus
addikt
Teljesen még nem tiszta, hogyan is képes látni ez a content.html-ben lévő button ID-t
Két dolog miatt. Egyrészt, mert az egész
document-re raktad rá az event listener-t, tehát az minden egyes, az oldalon történtclickeseményre (attől függetlenül, hogy mire kattintottál) le fog futni. (Ezt alapvetően én nem nagyon ajánlanám, jobb az, ha az egyes event listener-eknek csak akkor futnak le, ha szükséges)
A másik dolog pedig a JavaScript event capure mechanizmusa, amivel aclickesemény végigfolyik a DOM elemein. -
btz
addikt
Közben másik fórumon sikerült megoldani a problémát.
Ez az eredeti nem működő kód CODESANDBOX
Az ebben lévő addEventListener nem tudta elérni a #testclick ID-jű elemet.
<script>
let output = document.querySelector("#output");
let testclick = document.querySelector("#testclick");
testclick.addEventListener("click", testclickevent());
function testclickevent() {
output.innerHTML = "TEST CLICK IS WORKING";
}
</script>Ebben az alábbi kód szerepel
<script>
document.addEventListener("click", function(e) {
var elem = e.target;
if (elem && elem.id == "testclick") {
output.innerHTML = "THIS SOLUTION IS WORKING";
}
});
</script>
Teljesen még nem tiszta, hogyan is képes látni ez a content.html-ben lévő button ID-t, de működik. Gombnyomásra kiírja, hogy "THIS SOLUTION IS WORKING"
-
-
cattus
addikt
Engedelmeddel írnék néhány feedbacket a kódhoz:
HTML:
A `big` HTML tag obsolete, nem javasolt a használata
<input type="button" /> helyett inkább használjunk <button>-t.
Nem szerencsés, ha a `name` attribútom ugyanaz több input elemnél is, mivel esetleges szerveroldali feldolgozásnál ez azonosítja az egyes elemeket.JS:
var helyett ajánlott let vagy const használata
Személyes preferencia, de szerintem nem mindegy, hogy JS-ből milyen módon kérdezed le a DOM elemeket. Pl. te class alapján teszed, én ezt akkor tenném, ha pl. a class-t akarom módosítani. Ebben az esetben inkábbdocument.querySelectorAll('input[type="checkbox"]')-ot használnék (így pl. már eleve ki van szűrve minden input, ami nem checkbox).A for ciklus helyett megcsináltam array műveletekkel: fiddle
+1: érdemes jól formázottan tartani a kódot, sokat segít az olvashatóságon (a JSFiddle tudja automatikusan a jobb felül lévő Tidy gombbal).
-
martonx
veterán
"Datasetet? Úgy tudom azt én nem is használtam az első verziós kódban. Vagy de?"
Hát éppen ez az, hogy nem használtad, de nagyon kellett volnaES6-7-2020-nak nézz utána, mert ez a jelen, az ES5 a rég múlt, ami a jquery-vel együtt elmúlt.
Elhiszem, hogy nem te találtad ki a myfunction nevet, de ha ez egy open popup-ot csinál, akkor illene e szerint elnevezni, ahogy fura módon a close popup egész értelmes név volt. -
martonx
veterán
Jim-Y is összeszedett párat, amin alapból kiakadtam, hogy jsfiddle-nek a html részébe erőltetted bele a javascriptet
Aztán a js-ben dataset-et nem használtad jól. Meg klasszikus es5 js volt, ami így 2020-ban, nem borzalmas, csak nem jó látni. Béna metódus elnevezés (MyFunction WTF?), meg igaziból kb. minden sornál meg lehetett volna állni, és kifejteni, hogy mi miért nem jó úgy ahogy van.
Ettől függetlenül persze működött, és tudjuk: "A működő kód, jó kód". -
Jim-Y
veterán
Nem borzalmas, mert megcsinalja amit kell, viszont sok anti-pattern van benne, mondjuk, ugy, hogy nem tul elegans a kodod es igy biztos elbuknal egy ilyen minosegu koddal egy allasinterjun.
https://codesandbox.io/s/modest-brown-be2zn?file=/index.html
Kis magyarazat a readme fileban -> https://codesandbox.io/s/modest-brown-be2zn?file=/readme.md
-
martonx
veterán
Nagyon dícséretes! És miért utálod a jsfiddle-t? Amúgy meg ott van a codepen.io mint alternatíva, ha az jobban bejön
Én totál leszarom, hogy mit használsz, de lássuk be rengeteg eset van, amikor működő, más által is módosítható kódot kell mutatni a segítség kéréshez, márpedig erre nem tudok jobb alternatívát ezeknél.
A kódod egyébként borzalmas, de legalább működik, és jquery mentes.
JQuery-t 2020-ban használni emberiség ellenes bűntett -
disy68
aktív tag
Az indított interval azonosítóját tárolod a változóban, legyen elérhető onnan, ahonnan használni szeretnéd, ez már jó. Viszont amikor újra hívod a startot, akkor a korábbi interval még futni fog, ameddig le nem lövöd. Magyarul azzal kell kezdeni, hogy hívsz egy clearInterval-t akorábbi interval azonosítójával mielőtt újat indítasz. A gomb elrejtés/mutatás teljesen jó irány az egész mellé. Mintafiddle (szétszedtem a html/js-t, egyéb kulcsszavak: arrow function/lambda function, const/let, addEventListener)
-
btz
addikt
Nos. Végre megy. Kitöröltem a számomra felesleges sallangokat. Létrehoztam egy copy funkciót és egy Copy Buttont:
<html>
<body>
<div id="mainContent">
MAIN CONTENT<br />
</div>
<br />
<button id="btnCopy">COPY</button>
<script type="text/javascript" >
// Create a fake textarea
const textAreaEle = document.createElement('textarea');
var text = "tesztszöveg 3333";
// Set the value
textAreaEle.value = text;
// Append the textarea to body
document.getElementById("mainContent").appendChild(textAreaEle);
btnCopy.onclick = function () {
textAreaEle.select();
textAreaEle.focus();
document.execCommand('copy');
};
</script>
</body>
<html>Aztán az eredeti saját kódomat így módosítottam:
</head>
<body>
<b>AZ EMBED kód előnézete:</b><br />
<iframe src="https://parentdomain.com/embed/id" id="iframe" name="iframe" scrolling="no" frameborder="0" style="width: 100%; height: 600px;"></iframe>
<br /><br />
<div id="myDiv">0</div>
<script type="text/javascript" >
function receiveMessage(event) {
var ifrheig = (event.data.v1) + 'px';
document.getElementById("iframe").style.height = ifrheig;
var v1data = (event.data.v1);
var textNode = document.createTextNode(v1data);
document.body.appendChild(textNode);
var toCopy = '<iframe src="https://parentdomain.com/embed/id" id="iframe" name="iframe" scrolling="no" frameborder="0" style="width: 100%; height: ' + v1data + 'px;"></iframe>';
var innertomydiv = '<b>Embed kódja:</b><textarea rows="5" style="width: 100%;" type="text" id="code" name="code">' + toCopy + '</textarea><button id="btnCopy"><b>COPY</b></button>';
document.getElementById("myDiv").innerHTML = innertomydiv;
btnCopy.onclick = function () {
document.getElementById("code").select();
document.getElementById("code").focus();
document.execCommand('copy');
};
}
window.addEventListener("message", receiveMessage, false);
</script>
</body></html>Így a böngészőben megjelenik az Embed előnézete, alatta egy Textarea mezőben az Iframe kód (Jobb mint az input mező) a magassági értékkel, egy működő Copy gomb, ami vágólapra másolja a Iframe embed kódot, végül teszt gyanánt a magassági érték, de ez a publikus kódban már nem lesz benne.
-
nevemfel
senior tag
Az első példádat simán betettem a html oldalba, script tagok közé, és a firefox erre ezt írta:
A document.execCommand('cut'/'copy') megtagadva, mert az nem egy rövid ideig futó, felhasználó által generált esemény kezelőjéből lett hívva.
Ezután beraktam az egészet egy eseménykezelőbe, így már működik:
-
sztanozs
veterán
document.write(BA);
Ez felülírja az egész dokumentumot. Keress egy HTML objektumot (pl egy DIV-et) vagy illessz be valahova az oldalba, és add át az innerHTML értékének a kapott adatot (legjobb, egyébként ha fogadó oldalon dobsz rá egyescape-ethtml konvertert*, hogy véletlenül se lehessen szkriptet beinjektálni az oldalba).*
function encodeHTML(e){return e.replace(/[.]/g,function(e){return"&#"+e.charCodeAt(0)+";"})} -
btz
addikt
Így már sikerül továbítani a variablet, de az egész oldalt felülírja
Ez van az IFRAME-lendő oldalban.
var MYGLOBAL = 'MYGLOBAL okkéé';parent.postMessage({v1: MYGLOBAL}, "*");Ez pedig abban, amiben az Iframe is
<iframe src="https://weboldal.ahol.var.MYGLOBAL.ad.egy.erteket/" id="iframe" scrolling="no" frameborder="0" style="width: 100%;"></iframe><script type="text/javascript" >addEventListener("message", receiveMessage, false);function receiveMessage(event) {var BA = (event.data.v1);document.write(BA);}</script>Eredmény hogy fehér lapon meglkapom, hogy "MYGLOBAL okkéé" de ez eltünteti magát az Iframet.
-
btz
addikt
Az ötös verzióban visszaraktam a if (document.cookie.indexOf('tesztkuki') == -1 ) értéket és így most úgy néz ki, hogy tökéletes és a funkciójának megfelelően működik
Nem tudom pontosan, hogy az document.cookie.includes miért nem volt jó ehhez, ha ez is azt figyeli, hogy létezik e, majd utána olvasok, ha időm engedi.
Köszönöm a segítséget -
btz
addikt
A kódnak ebben a változatában kicseréltem a
$("#cookiebutton").click(function() {
$("#cookie-check").load(" #cookie-check > *");
});funkciót
$("#cookiebutton").click(function() {
if (document.cookie.indexOf('tesztkuki') == -1 ) {
document.getElementById('cookie-check').innerHTML = "<div id='cookie-want'>Press the button, if you want a cookie<br /><button id='cookiebutton' onclick='wantCookie()'>I want a cookie</button><br /></div> <br />The cookie now DOES NOT exist !";
} else {
document.getElementById('cookie-check').innerHTML = "<div id='cookie-give-back'>Press the button, if you want give back the cookie<br /><button id='cookiebutton' onclick='givebackCookie()'>I give back the cookie</button><br /></div> <br /><br />The cookie now exist !<hr />";
}
});funkcióra.
Így most az első klikk hatására visszaírja a divet a megfelelő tartalommal, de még egy kattintást már nem enged, másodjára nem változik a div a gombnyomásra. -
cattus
addikt
Az első hibát ott véted, hogy a givebackCookie függvényben nem nullázod a cookie értékét, így az if-ednek mindig ugyanaz az ága fog lefutni.
A div újratöltését kezelő kódot meg inkább nem kísérlem meg megérteni és debugolni, meg amúgy is jQuery-t már nem illik 2019-ben használni.
Működő kód:
function wantCookie() {
document.cookie = "tesztkuki=Létezik";
loadDiv();
}
function givebackCookie() {
document.cookie = "tesztkuki=; expires=Thu, 18 Dec 2013 12:00:00 UTC";
loadDiv();
}
window.addEventListener("load", loadDiv);
function loadDiv() {
if (document.cookie.includes('tesztkuki')) {
document.getElementById('cookie-check').innerHTML = "<div id='cookie-want'>Press the button, if you want a cookie<br /><button id='cookiebutton' onclick='wantCookie()'>I want a cookie</button><br /></div> <br />The cookie now DOES NOT exist !";
} else {
document.getElementById('cookie-check').innerHTML = "<div id='cookie-give-back'>Press the button, if you want give back the cookie<br /><button id='cookiebutton' onclick='givebackCookie()'>I give back the cookie</button><br /></div> <br /><br />The cookie now exist !<hr />";
}
}Itt minden cookie változtatás után újratölti a div tartalmát. A
window.addEventListener("load", loadDiv);pedig azért felel, hogy az oldal betöltésekor is fel legyen töltve a div.indexOf helyett használj includes-ot, ha csak annyit akarsz megtudni, hogy tartalmazza-e az adott dolgot.
Továbbá ahogy most a div tartalmát kitöltöd, az nem túl elegáns / karbantartható / error-safe. Használj createElement-et és appendChild-ot.
A fenti kódodat megfixáltam, de erősen ajánlom a fentiek figyelembevételét. Sok későbbi szenvedést tudsz megspórolni.
+1: Ha nem kötelező cookie-t használni, akkor ajánlom inkább a localStore-et.
-
cattus
addikt
Annyit azért hozzáfűznék ehhez a kódódhoz, hogy bár működik, de még bőven van benne hibás működés. Pl. az alábbi sor:
var content = this.parentNode.style.display = 'none';Itt bár a div-et eltűnteni, de a content értéke
true(ami athis.parentNode.style.display = 'none';kifejezés eredménye) lesz, nem pedig maga a tartalom. Ezért az utána lévő display állítás sem fog lefutni. Ha megnézed a console-t látod, hogy hibát dob. Javaslom nézz utána, hogy hogy működnek ezek az alap dolgok (értékadás, visszatérési értékek, callback és hasolnók.Plusz a w3schools-os editor helyett szerintem inkább használj jsfiddle-t az ilyen kis kódokhoz, itt van külön HTML, CSS és JS rész, jóval átláthatóbb az egész, plusz van benne automatikus kódformázás is.
-
cattus
addikt
Persze, hogy nem tünteti el a gombot, ugyanis nem nyúlsz hozzá a kódodban. A második esetben azért nem történik semmi, mert a
var content = this.nextElementSibling;a gomb utáni, vele egy szinten lévő elemeket választja ki, és ha a gombot a paragrafus után rakod, akkor nem lesz ennek megfelelő DOM elemed. Szerintem itt a jó megoldás az lenne, ha a gombot és a szöveget összefoglaló elemet rejtenéd el. Erre egyszerű megoldás, ha az eventlistener callback-jébe ezt írod:this.parentNode.style.display = 'none';
Én totál leszarom, hogy mit használsz, de lássuk be rengeteg eset van, amikor működő, más által is módosítható kódot kell mutatni a segítség kéréshez, márpedig erre nem tudok jobb alternatívát ezeknél.
Új hozzászólás Aktív témák
Hirdetés
- Magga: PLEX: multimédia az egész lakásban
- Futás, futópályák
- A fociról könnyedén, egy baráti társaságban
- Gigabyte alaplap topik
- Hegesztés topic
- DVBViewer
- Kazy Computers - Fehérvár - Megbízható?
- Autós topik látogatók beszélgetős, offolós topikja
- Max
- One otthoni szolgáltatások (TV, internet, telefon)
- További aktív témák...
- ÁRGARANCIA!Épített KomPhone Ryzen 5 4500 16/32/64GB RAM RX 6600 8GB GAMER PC termékbeszámítással
- LG 65BX - 65" OLED - 4K 120Hz 1ms - NVIDIA G-Sync - FreeSync Premium - HDMI 2.1 - PS5 és Xbox Ready!
- Bomba ár! Lenovo X1 Yoga 2nd - i7-7G I 8GB I 256SSD I 14" WQHD I HDMI I W11 I CAM I Garancia!
- AKCIÓ! Apple MacBook PRO 15" 2018 i9 32GB 500GB 560X 4GB notebook garanciával hibátlan működéssel
- Telefon felvásárlás!! Honor 90 Lite/Honor 90/Honor Magic5 Lite/Honor Magic6 Lite/Honor Magic5 Pro
Állásajánlatok
Cég: CAMERA-PRO Hungary Kft
Város: Budapest
Cég: PC Trade Systems Kft.
Város: Szeged