- Samsung Galaxy S25 - végre van kicsi!
- Google Pixel topik
- Samsung Galaxy S24+ - a személyi asszisztens
- Samsung Galaxy S23 Ultra - non plus ultra
- Xiaomi 17 - még mindig tart
- iPhone topik
- Samsung Galaxy Z Fold7 - ezt vártuk, de…
- Bemutatkozott az Oppo kamerás csúcsmodellje
- Samsung Galaxy S26 Ultra - fontossági sorrend
- Szívós, szép és kitartó az új OnePlus óra
-
Fórumok
Mobilarena - mobil fórumok
Okostelefonok Mobiltelefonok Okosórák Autó+mobil Üzlet és Szolgáltatások Mobilalkalmazások Tartozékok, egyebek Mobilarena blogokPROHARDVER! - hardver fórumok
Notebookok TV & Audió Digitális fényképezés Alaplapok, chipsetek, memóriák Processzorok, tuning Hűtés, házak, tápok, modding Videokártyák Monitorok Adattárolás Multimédia, életmód, 3D nyomtatás Nyomtatók, szkennerek Tabletek, E-bookok PC, mini PC, barebone, szerver Beviteli eszközök Egyéb hardverek PROHARDVER! BlogokIT café - infotech fórumok
Infotech Hálózat, szolgáltatók OS, alkalmazások SzoftverfejlesztésGAMEPOD - játék fórumok
PC játékok Konzol játékok MobiljátékokLOGOUT - lépj ki, lépj be!
LOGOUT reakciók Monologoszféra FototrendFÁRADT GŐZ - közösségi tér szinte bármiről
Tudomány, oktatás Sport, életmód, utazás, egészség Kultúra, művészet, média Gazdaság, jog Technika, hobbi, otthon Társadalom, közélet Egyéb Lokál PROHARDVER! interaktív
-
Frissítve: 2014-02-25 10:20 Téma összefoglaló
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 értem teljesen a mondandód lényegét. Jól működő kódokkal minek jönnék a fórumra? Egy fórumra általában nem működő, nem jól működő kóddal, vagy valamilyen problémával szoktak jönni az emberek. Olyan példával jöttem ide, ami szemlélteti a problémám jellegét, így könnyebben meg tudom rá kapni a választ. Ez meg is történt. Siker. Keresgéltem is a probléma miatt nem keveset, többek között az általad javasolt [DOMContentLoaded] - el is próbálkoztam sikertelenül. Szóval nem látod jól, hogy 0 időt fektetek bele. Nem sok időm van rá ez tény, de szánok a dologra időt azért.
Nem érzem úgy hogy itt akarom megtanulni a programozás alapjait, de én úgy látom, hogy rengeteget tanulok egy egy probléma megoldásából. Ha lesz rá keret és idő, akkor majd elvégzek valamilyen tanfolyamot, mert amúgy érdekel a dolog, mégha néha úgy is jön le, hogy csak kényszerűségből foglalkozom ezzel.
Azzal pedig nem értek egyet, hogy én itt bárkivel atomerőművet szeretnék építetni. Ha így lenne akkor nem példakódot készítettem volna a problémámról, hanem kiírtam volna, hogy "légyszives rakjátok már össze az egész oldalamat A-Z-ig Kösz" Nem emlékszem, hogy ilyennel jöttem volna itt bármikor is.
Ha mindenki értene mindenhez, akkor nem lenne szükség a fórunokra, mert mindenkinek meg lenne oldva a problémája. Maximum arról lehetne diskurálni, hogy a mai nap is milyen könnyen ment, nem volt probléma egy szál se.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
Nem értem teljesen a mondandód lényegét. Jól működő kódokkal minek jönnék a fórumra? Egy fórumra általában nem működő, nem jól működő kóddal, vagy valamilyen problémával szoktak jönni az emberek. Olyan példával jöttem ide, ami szemlélteti a problémám jellegét, így könnyebben meg tudom rá kapni a választ. Ez meg is történt. Siker. Keresgéltem is a probléma miatt nem keveset, többek között az általad javasolt [DOMContentLoaded] - el is próbálkoztam sikertelenül. Szóval nem látod jól, hogy 0 időt fektetek bele. Nem sok időm van rá ez tény, de szánok a dologra időt azért.
Nem érzem úgy hogy itt akarom megtanulni a programozás alapjait, de én úgy látom, hogy rengeteget tanulok egy egy probléma megoldásából. Ha lesz rá keret és idő, akkor majd elvégzek valamilyen tanfolyamot, mert amúgy érdekel a dolog, mégha néha úgy is jön le, hogy csak kényszerűségből foglalkozom ezzel.
Azzal pedig nem értek egyet, hogy én itt bárkivel atomerőművet szeretnék építetni. Ha így lenne akkor nem példakódot készítettem volna a problémámról, hanem kiírtam volna, hogy "légyszives rakjátok már össze az egész oldalamat A-Z-ig Kösz" Nem emlékszem, hogy ilyennel jöttem volna itt bármikor is.
Ha mindenki értene mindenhez, akkor nem lenne szükség a fórunokra, mert mindenkinek meg lenne oldva a problémája. Maximum arról lehetne diskurálni, hogy a mai nap is milyen könnyen ment, nem volt probléma egy szál se.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
Szerintem pedig belefér a fórum keretei közé egy egy probléma JavaScriptel való megoldása. A programozás is azért van, hogy problémát oldjon meg, nem önmagában azért, hogy az unalmas perceinket ezzel töltsük ki.
Én úgy érzem, hogy hogy lehet így is megtanulni a dolgot, problémák megoldása közben. Hidd el, hogy az elmúlt pár hónapban mióta komolyabban foglalkozom programozással, nagyon sokminden megértettem megtanultam, nem csak a kosz ragadt rám.
A fenti példából is sokat tanultam és utána is olvastam pár dolognak. Nem ezzel foglalkozom napi 8 órában, nem ez a fő profilom, így idő hiányában lassabban haladok, mint ha egy tanfolyamon napi 8 órában, vagy a teljes munkaidőmben ezzel tudnék foglalkozni
Sajnos a jelenlegi gazdasági helyzetben nem fér bele százezrek kiadása tanfolyamokra, szakértőkre. Abból kell gazdálkodni ami van.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
Igazából nem az én kódomhoz lesz ez és nem is ez az eredeti éles kód. Amit ide kiraktam kódot az csak tesztelés céljából van. Akiknek kell a megoldás, azok szakvámban a w3school.com scriptjét használják, ezért úgy voltam vele, hogy ahol csak lehet, "nem bántom az alapkódot" elvet követem. Közben jött pár megoldás, amivel megkaptam amire vágytam, nem kellett pluszban átírni a w3scool scriptet, mindenki happy volt, amíg fel nem merült az igény, hogy az oldal betöltésekor is ez az amaz jelenjen meg az includeolt oldalrészen is, eközben ez a megoldás ki is ment a fejemből, de most forkoltam a kódod, így biztos helyen van
Sajnos nem lesz megúszva a w3 kód átalakítás 
Köszi a segítséget
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
[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.
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
-
martonx
veterán
[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.
Ez kell neked: https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event
A SetTimeOut-os megoldás bénácska, és megbízhatatlan. Nem erre való.
-
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"[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
Üdv!
Random számokat szeretnék kiíratni X darabot, de azt szeretném, hogy az X darabon belül ne legyen kétszer ugyan az a szám kiírva. Mondjuk ha az 5 egyszer már volt, akkor az ne legyen mégegyszer abban a körben. Ha mondjuk a random csak 0-9 ig terjedő számok közül választhat, de X 15-el egyenlő, azaz 15 darab kellene, akkor is csak 10 szám legyen random sorban (a nullával együtt ugye), azaz a fontosabb prioritás az legyen, hogy ne ismétlődjön egy körben a random szám, mintsem az X értéke.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. -
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" -
disy68
aktív tag
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"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
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"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
Üdv
Ezzel a w3-as módszerrel van beillesztve html a html-be. Ez működik is remekül, kivéve, hogy addEventListener-el szeretnék a content.html fájlban egy click vagy change eventre funkciót, az nem reagál. Ha a content.html fájlt önmagában (direktben) megnyitom, akkor működik, reagál a kattintásra és az select mező cseréjére is.
Példakódot délután majd rakok fel.
Szerintetek mi lehet a gond? Találkoztatok e már hasonló problémával?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
Neked egy string kell, aminek az értéke
450px, nem pedig'450px'. A backtick-es kifejezésből automatikusan string lesz, nem kell hozzá az extra idézőjel. -
dqdb
nagyúr
var height = 200;
var height250 = 200+250;
var x = `'${height250}px'`;
var x = '450px';
document.getElementById('demo').style.paddingTop = x;Ha az alsó var x-et használom, beállítja demo element paddingtop-ját 450px-re , ha kikommentelem az alsó var x = ''450px'-et, akkor nem. Pedig a felső var x értéke ugyan az kell, hogy legyen.
Vagy
`, vagy', de nem egyszerre a kettő. -
Doink
aktív tag
Van X db képem. A példában most legyen 1538, és ezt Y darabszámban szeretném megjeleníteni. A példában legyen ez 200.
var allpicture = 1583;
var pictureperpage = 200;
var actualpage = 1;Készítettem egy változót ami kiszámolja, hogy hány lapon fér el X kép:
var totalpage = Math.ceil(allpicture / pictureperpage);Mi az első és utolsó kép száma az N. lapon.
if (actualpage == 1) { var firstpiconpage = 1; } else {
var firstpiconpage = ((actualpage - 1) * pictureperpage) + (actualpage - 1); }
if (actualpage == 1) { var lastpiconpage = firstpiconpage + (pictureperpage-1); } else {
var lastpiconpage = firstpiconpage + pictureperpage;
}
if (firstpiconpage > allpicture) { var firstpiconpage = allpicture; }
if (lastpiconpage > allpicture) { var lastpiconpage = allpicture; }Kérdésem a szokásos. Van e valamilyen forumla, amivel egyszerűbb lehet a kód?
JSFiddle DEMOvar firstpiconpage = (actualpage - 1) * pictureperpage + 1;
var lastpiconpage = (actualpage - 1) * pictureperpage + pictureperpage;Az if-ek nem kellenek.
-
martonx
veterán
Van X db képem. A példában most legyen 1538, és ezt Y darabszámban szeretném megjeleníteni. A példában legyen ez 200.
var allpicture = 1583;
var pictureperpage = 200;
var actualpage = 1;Készítettem egy változót ami kiszámolja, hogy hány lapon fér el X kép:
var totalpage = Math.ceil(allpicture / pictureperpage);Mi az első és utolsó kép száma az N. lapon.
if (actualpage == 1) { var firstpiconpage = 1; } else {
var firstpiconpage = ((actualpage - 1) * pictureperpage) + (actualpage - 1); }
if (actualpage == 1) { var lastpiconpage = firstpiconpage + (pictureperpage-1); } else {
var lastpiconpage = firstpiconpage + pictureperpage;
}
if (firstpiconpage > allpicture) { var firstpiconpage = allpicture; }
if (lastpiconpage > allpicture) { var lastpiconpage = allpicture; }Kérdésem a szokásos. Van e valamilyen forumla, amivel egyszerűbb lehet a kód?
JSFiddle DEMOTulbonyolitod, de mobilról nem fogok tudni többet segíteni. Abból indulj ki, hogy hanyadik lapot akarod megjeleniteni, illetve egy lapon hány képet akarsz megjeleniteni. Mindegyik képet berakod egy tömbbe, és pont azokat veszed ki, amik kellenek.
-
cattus
addikt
Igen ezzel csökken az a terület, ami undefinedet ad, de magára az ikonos részre kattintva továbbra is undefined. De ha például nem is kell majd valahol szöveg, csak az ikon a gombon?
De úgy néz ki, hogy a régi tradicionális módszer esetén nem lenne gond.
Igen, ugye az a probléma, hogy az event handler-ben a bubble-capture miatt a target az az ikon lesz. Egy potenciális fix, ha kicseréled a
const editbutton = e.target;sort erre:const editbutton = e.currentTarget; -
cattus
addikt
Sziasztok!
Ismét egy Javascript probléma. (Ezzel mindig csak probléma van, de az is lehet hogy csak velem
)Jim-Y által ajánlott querySelectoros kódból szeretnék Camera Name/Path editort.
A gombokon FontAwesome edit ikont használnék. A probléma az vele, hogyha rákattintok, akkor csak magára a gombra kattintva jelenik meg a popupban az adat, ha az ikon részre kattintok, akkor undefined-et kapok.
Az első gombnál megcsináltam, hogy a "data-...." infókat beletettem a buttonon kívül az <i> tagbe is, így:<button class="buttonact yellowbtn editbuttons" data-camNum="A" data-camId="1" data-camName="CAMERA1" data-camPath="/CM/PATH1/">
<i data-camNum="A" data-camId="1" data-camName="CAMERA1" data-camPath="/CM/PATH1/" class="fa fa-pencil-square-o" style="font-size:20px">CAM1</i>
</button>
De ezzel duplikálni kell a sorokat.(B)JSFiddle DEMO(/B)
A gomb szövegét a
</i>után rakjad. -
cattus
addikt
Biztos erre is van szebb kód, ami nem anti-pattern és 2020-ban is megállja a helyét:
Kiválasztott checkbox elemek kiíratása. A példakódban Alert-be és Console.log-ba
A kiválasztott elemeket vessző, majd szóköz választja el a megjelenített ablakban, de az utolsó elemnél is megjelenik ez a vessző és szóköz, ami nem kell. Ezt úgy oldottam meg, hogy a kapott elemlista stringből levágok két karaktert, ami a vessző és a szóköz.function printChecked(){
var items=document.getElementsByName('acs');
var selectedItems="";
for(var i=0; i<items.length; i++){
if(items[i].type=='checkbox' && items[i].checked==true)
selectedItems+=items[i].value+", ";
}
var str = selectedItems.substring(0, selectedItems.length - 2);
alert(str);
console.log(str);
}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
"jsfiddle-nek a html részébe erőltetted bele a javascriptet
"Merő lustaság, ahogy az inline style és a <br /><br /> is. Sorry

"Aztán a js-ben dataset-et nem használtad jól."
Datasetet? Úgy tudom azt én nem is használtam az első verziós kódban. Vagy de?
" klasszikus es5 ...Béna metódus elnevezés (MyFunction WTF?) "
Hallottam már valamit ES6-ról de lövésem sincs amúgy mi az, ennek utána kéne olvasnom.
Tutorialokat olvasgatva férceltem össze a kódot. És amikor ilyeneket csinálok, akkor meghagyom az eredeti elnevezéseket, amíg mással nem ütközik. Amúgy sok netes tutorialban a myFunction() elnevezést használnak a példakódban. Nem én találtam ki.
"minden sornál meg lehetett volna állni, és kifejteni, hogy mi miért nem jó"
Természetesen minden új infót szívesen veszek (mi miért nem jó, hogy lehetne jobb), mert abból tudok tanulni és fejlődni. Nem végzek semmilyen webfejlesztői sulit, a netről szedem össze a tudást, ami néha nem biztos hogy a jó irányba visz, épp ezért vagyok ezen a fórumon is, mert itt vannak a témában tapasztaltabb fórumozók.
"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 volna
ES6-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
Például a nagy kék felugró boilerplate bar miatt (Talán csak a GDPR felugrók az idegesítőbbek nála), a becsukhatatlan menük miatt (Egy kódokkal foglalkozó oldalon ilyen?) stb... Volt egyszer olyan nyűgje is hogy teljesen kifagyasztotta a gépet mikor a forkra kattintottam egy kódnál (De legalább ez már jó). Mobileszközön egy az egyben használhatatlan.
A codepent viszont jobban szeretem, de igazából a böngésző ablakot preferálom. Kódot mutogatni viszont végül is mindegy, hogy melyiket használja az ember."A kódod egyébként borzalmas"
Pontosan mi az ami borzalom rajta? Formailag oké, ezt most csak így összedobtam, de van esetleg más borzalom is benne?
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
Például a nagy kék felugró boilerplate bar miatt (Talán csak a GDPR felugrók az idegesítőbbek nála), a becsukhatatlan menük miatt (Egy kódokkal foglalkozó oldalon ilyen?) stb... Volt egyszer olyan nyűgje is hogy teljesen kifagyasztotta a gépet mikor a forkra kattintottam egy kódnál (De legalább ez már jó). Mobileszközön egy az egyben használhatatlan.
A codepent viszont jobban szeretem, de igazából a böngésző ablakot preferálom. Kódot mutogatni viszont végül is mindegy, hogy melyiket használja az ember."A kódod egyébként borzalmas"
Pontosan mi az ami borzalom rajta? Formailag oké, ezt most csak így összedobtam, de van esetleg más borzalom is benne?
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
-
martonx
veterán
Üdv!
Van egy <a> link,aminek van két data értéke bookID és bookName. Erre rákattintva egy felugró ablak megjelenik az adott értékekkel. JQuery-s megoldásom van, de érdekelne, hogy simple Javascriptel meg lehet e oldani? Mindenhol ahol keresgéltem, csak Jquery-s megoldások vannak.
Már hogy a fenébe ne lehetne? https://www.w3schools.com/howto/howto_css_modals.asp
-
disy68
aktív tag
Úgy érted, hogy funkción kívül? De akkor meg nem lesz start funkcióm.
Egy másik példa:
Ha nem funkcióban van a változó, akkor megy:
https://www.w3schools.com/code/tryit.asp?filename=GENNHPYKDWURÍgy viszont már nem:
https://www.w3schools.com/code/tryit.asp?filename=GENNKLS0GE1LAz 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)
-
dqdb
nagyúr
Üdv!
Van egy modal.js-em. Nem akar stoppolódni!...
function startCallback() {
var startCB = window.setInterval(myCallback, 500, -1);
}
function stopCallback() {
console.log('TRY TO STOP');
window.clearInterval(startCB);
console.log('STOPPED');
}
function myCallback(a)
{
plusSlides(a);
}
...Start onclickre el kezdi cserélni a képeket a slider, de stopra ezt a hibát kapom:
modal.js:44 Uncaught ReferenceError: startCB is not defined
at stopCallback (modal.js:44)
at HTMLAnchorElement.onclickA
startCB-t lokális változóként definiálod. -
btz
addikt
Ezt próbálgattam már. Nálam nem működik (szokás szerint)
Először így próbáltam:
<script type="text/javascript" >
// Create a fake textarea
const textAreaEle = document.createElement('textarea');
// Reset styles
textAreaEle.style.border = '0';
textAreaEle.style.padding = '0';
textAreaEle.style.margin = '0';
// Set the absolute position
// User won't see the element
textAreaEle.style.position = 'absolute';
textAreaEle.style.left = '-9999px';
textAreaEle.style.top = `0px`;
// Set the value
textAreaEle.value = text;
// Append the textarea to body
document.body.appendChild(textAreaEle);
// Focus and select the text
textAreaEle.focus();
textAreaEle.select();
// Execute the "copy" command
try {
document.execCommand('copy');
} catch (err) {
// Unable to copy
} finally {
// Remove the textarea
document.body.removeChild(textAreaEle);
}
</script>Ekkor a textAreaEle.value = text; érték nem volt definiálva így készítettem neki egy változót. var text = "tesztszöveg";
<script type="text/javascript" >
// Create a fake textarea
const textAreaEle = document.createElement('textarea');
// Reset styles
textAreaEle.style.border = '0';
textAreaEle.style.padding = '0';
textAreaEle.style.margin = '0';
// Set the absolute position
// User won't see the element
textAreaEle.style.position = 'absolute';
textAreaEle.style.left = '-9999px';
textAreaEle.style.top = `0px`;
var text = "tesztszöveg";
// Set the value
textAreaEle.value = text;
// Append the textarea to body
document.body.appendChild(textAreaEle);
// Focus and select the text
textAreaEle.focus();
textAreaEle.select();
// Execute the "copy" command
try {
document.execCommand('copy');
} catch (err) {
// Unable to copy
} finally {
// Remove the textarea
document.body.removeChild(textAreaEle);
}
</script>Hiba: Uncaught TypeError: Cannot read property 'appendChild' of null.
Beraktam bodyba a scriptet, utána semmit nem csinált, viszont a hiba megszűnt.
Aztán a document.body részt cseréltem document.getElementById("mainContent").appendChild(textAreaEle);-re. Így már megjelenik a textarea, benne a tesztszöveg felirattal. (A kódból kitöröltem azt a részt ami elrejti a textarea-t).<html>
<body>
<div id="mainContent">
MAIN CONTENT<br />
</div>
<script type="text/javascript" >
// Create a fake textarea
const textAreaEle = document.createElement('textarea');
var text = "tesztszöveg";
// Set the value
textAreaEle.value = text;
// Append the textarea to body
document.getElementById("mainContent").appendChild(textAreaEle);
// Focus and select the text
textAreaEle.focus();
textAreaEle.select();
// Execute the "copy" command
try {
document.execCommand('copy');
} catch (err) {
// Unable to copy
} finally {
// Remove the textarea
//document.body.removeChild(textAreaEle);
}
</script>
</body>
<html>Viszont nem másol semmit a vágólapra.
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
Ezt próbálgattam már. Nálam nem működik (szokás szerint)
Először így próbáltam:
<script type="text/javascript" >
// Create a fake textarea
const textAreaEle = document.createElement('textarea');
// Reset styles
textAreaEle.style.border = '0';
textAreaEle.style.padding = '0';
textAreaEle.style.margin = '0';
// Set the absolute position
// User won't see the element
textAreaEle.style.position = 'absolute';
textAreaEle.style.left = '-9999px';
textAreaEle.style.top = `0px`;
// Set the value
textAreaEle.value = text;
// Append the textarea to body
document.body.appendChild(textAreaEle);
// Focus and select the text
textAreaEle.focus();
textAreaEle.select();
// Execute the "copy" command
try {
document.execCommand('copy');
} catch (err) {
// Unable to copy
} finally {
// Remove the textarea
document.body.removeChild(textAreaEle);
}
</script>Ekkor a textAreaEle.value = text; érték nem volt definiálva így készítettem neki egy változót. var text = "tesztszöveg";
<script type="text/javascript" >
// Create a fake textarea
const textAreaEle = document.createElement('textarea');
// Reset styles
textAreaEle.style.border = '0';
textAreaEle.style.padding = '0';
textAreaEle.style.margin = '0';
// Set the absolute position
// User won't see the element
textAreaEle.style.position = 'absolute';
textAreaEle.style.left = '-9999px';
textAreaEle.style.top = `0px`;
var text = "tesztszöveg";
// Set the value
textAreaEle.value = text;
// Append the textarea to body
document.body.appendChild(textAreaEle);
// Focus and select the text
textAreaEle.focus();
textAreaEle.select();
// Execute the "copy" command
try {
document.execCommand('copy');
} catch (err) {
// Unable to copy
} finally {
// Remove the textarea
document.body.removeChild(textAreaEle);
}
</script>Hiba: Uncaught TypeError: Cannot read property 'appendChild' of null.
Beraktam bodyba a scriptet, utána semmit nem csinált, viszont a hiba megszűnt.
Aztán a document.body részt cseréltem document.getElementById("mainContent").appendChild(textAreaEle);-re. Így már megjelenik a textarea, benne a tesztszöveg felirattal. (A kódból kitöröltem azt a részt ami elrejti a textarea-t).<html>
<body>
<div id="mainContent">
MAIN CONTENT<br />
</div>
<script type="text/javascript" >
// Create a fake textarea
const textAreaEle = document.createElement('textarea');
var text = "tesztszöveg";
// Set the value
textAreaEle.value = text;
// Append the textarea to body
document.getElementById("mainContent").appendChild(textAreaEle);
// Focus and select the text
textAreaEle.focus();
textAreaEle.select();
// Execute the "copy" command
try {
document.execCommand('copy');
} catch (err) {
// Unable to copy
} finally {
// Remove the textarea
//document.body.removeChild(textAreaEle);
}
</script>
</body>
<html>Viszont nem másol semmit a vágólapra.
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:
-
martonx
veterán
Ezt próbálgattam már. Nálam nem működik (szokás szerint)
Először így próbáltam:
<script type="text/javascript" >
// Create a fake textarea
const textAreaEle = document.createElement('textarea');
// Reset styles
textAreaEle.style.border = '0';
textAreaEle.style.padding = '0';
textAreaEle.style.margin = '0';
// Set the absolute position
// User won't see the element
textAreaEle.style.position = 'absolute';
textAreaEle.style.left = '-9999px';
textAreaEle.style.top = `0px`;
// Set the value
textAreaEle.value = text;
// Append the textarea to body
document.body.appendChild(textAreaEle);
// Focus and select the text
textAreaEle.focus();
textAreaEle.select();
// Execute the "copy" command
try {
document.execCommand('copy');
} catch (err) {
// Unable to copy
} finally {
// Remove the textarea
document.body.removeChild(textAreaEle);
}
</script>Ekkor a textAreaEle.value = text; érték nem volt definiálva így készítettem neki egy változót. var text = "tesztszöveg";
<script type="text/javascript" >
// Create a fake textarea
const textAreaEle = document.createElement('textarea');
// Reset styles
textAreaEle.style.border = '0';
textAreaEle.style.padding = '0';
textAreaEle.style.margin = '0';
// Set the absolute position
// User won't see the element
textAreaEle.style.position = 'absolute';
textAreaEle.style.left = '-9999px';
textAreaEle.style.top = `0px`;
var text = "tesztszöveg";
// Set the value
textAreaEle.value = text;
// Append the textarea to body
document.body.appendChild(textAreaEle);
// Focus and select the text
textAreaEle.focus();
textAreaEle.select();
// Execute the "copy" command
try {
document.execCommand('copy');
} catch (err) {
// Unable to copy
} finally {
// Remove the textarea
document.body.removeChild(textAreaEle);
}
</script>Hiba: Uncaught TypeError: Cannot read property 'appendChild' of null.
Beraktam bodyba a scriptet, utána semmit nem csinált, viszont a hiba megszűnt.
Aztán a document.body részt cseréltem document.getElementById("mainContent").appendChild(textAreaEle);-re. Így már megjelenik a textarea, benne a tesztszöveg felirattal. (A kódból kitöröltem azt a részt ami elrejti a textarea-t).<html>
<body>
<div id="mainContent">
MAIN CONTENT<br />
</div>
<script type="text/javascript" >
// Create a fake textarea
const textAreaEle = document.createElement('textarea');
var text = "tesztszöveg";
// Set the value
textAreaEle.value = text;
// Append the textarea to body
document.getElementById("mainContent").appendChild(textAreaEle);
// Focus and select the text
textAreaEle.focus();
textAreaEle.select();
// Execute the "copy" command
try {
document.execCommand('copy');
} catch (err) {
// Unable to copy
} finally {
// Remove the textarea
//document.body.removeChild(textAreaEle);
}
</script>
</body>
<html>Viszont nem másol semmit a vágólapra.
Ember, szokjál már rá a jsfiddle-re
-
cattus
addikt
Nem bele szeretném, hanem mellé helyezni. Az első Iframe a megjelenítési minta. Tehát az user ebből látja, hogy fog kinézni a kód eredménye, amit az inputból kimásol.
Az input azért kell, hogy a felhasználó könnyen ki tudja jelölni és másolni belőle az Iframe kódot, majd azt beilleszteni máshová, például a saját weboldalába, a megfelelő magassági értékkel együtt. Ekkor már a JavaScript-et el is hagyhatja, mivel olyan Iframe kódot másol ki, ami tartalmazza az Iframe contentjének magasságát. De ez nem is kéne, ha valahogy találnék egy lehetőséget gombnyomásra be másolni az user vágólapjára az Iframe kódot. Mivel ez a cél, hogy az user könnyedén copyzza.Vágólapra másolás: [link]
-
sztanozs
veterán
Pontosan hogy is tudnám a "var innertomydiv" változómat végigfuttatni ezzel? Bocsi, de én már hosszú ideje kezdő vagyok Javascriptben, így ez egy kicsit magas, hogyan is tudnám ezt alkalmazni, de akár az előző BA változós példához is jó lenne, tudnom, hogyan is varázsolhatom bele, illetve hogyan nyerhetem ki, mondjuk egy új változóban?
Emoik nem lesznek benne, csak a példában is látott input mező benne az input mezőben lévő iframe html kód a magassági értékkel együtt ami a v1data változóban van tárolva.
var innertomydiv = '<input style="width: 100%;" type="text" id="frame" name="frame" value="<iframe src='https://website.com/embed/id' id='iframe' name='iframe' scrolling='no' frameborder='0' style='width: 100%; height: ' + v1data + ';'></iframe>">';UPDATE:
A kimásolandó kód értékét elrontottam, mert id="iframe" name="iframe" helyett csak id="frame" name="frame" van az input mezőben.Amúgy az még jobb lenne, ha valami buttonnal az egész értéket a vágólapra is lehetne tenni. Ennek még utánanézek.
Nem igazán értem, miért akarasz egy iframe-be beilleszteni egy input mezőt, aminek a tartalma egy iframe elem html-kódolt kódja...
-
sztanozs
veterán
Í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.
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
Egy IFRAME-ből ptóbálom kiszedni "a" változó értékét.
<iframe src="https://weboldal.ahol.var.a.ad.egy.erteket/" id="iframe" scrolling="no" frameborder="0" style="width: 100%;"></iframe>Négyféle variációt próbáltam.
1.
var check=document.getElementById("iframe").contentWindow.a;
document.writeln(check);
2.var check=document.getElementById("iframeid").contentDocument.a;document.writeln(check);3.
var b;
// you might want to write these into if statements to make sure that e.data[0] is varA if you have multiple messages coming across
if (typeof window.addEventListener != 'undefined') {
window.addEventListener('message', function(e) {
b = e.data[1];
}, false);
} else if (typeof window.attachEvent != 'undefined') { // this part is for IE8
window.attachEvent('onmessage', function(e) {
b = e.data; // you'll probably have to play around with this part as I can't remember exactly how it comes across in IE8 -- i think it will involve slice() iirc
});
}
document.writeln(b);ebben az esetben kell egy ilyen kód is az iframe-mel lekért oldalba
window.parent.postMessage(['varA', a], '*');4.
var myFrame = window.frames[0].window;
document.writeln(myFrame.a);Természetesen miért is működne bármelyik is. Mindegyik eredménye Undefined, kivéve a 4. eset, ott semmi. Különböző és azonos domainen lévő Iframe-mel próbálva.
Í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
Üdv!
Egy popupot szeretnék megoldani, ami kattintásra megnyílik, a benne lévő gombbal bezáródik, illetve azt szeretném, hogyha mellé kattintok, akkor is záródjon be, de ha magára a popupra (a popup területére), akkor ne történjen semmi (ne záródjon be)
Odáig jutottam, hogy a popup szinte csak CSS alapon működik. Piros területen van egy link, arra ha rákattintok, akkor megnyílik a popup div (zöld színnel). A bezárást úgy oldottam meg, hogy a szülő divnek (piros színnel) adtam egy ilyen értéket, hogy:
<div id="parent" onclick="location.href='#';">
Ezzel az a gond, hogy a popup területén is érvényesíti magát.[A kód és a működés itt tekinthető meg]
Próbáltam azt is hogy a children divnek
onclick="return false;"vagyonclick="location.href='#children';"értéket adok , de akkor is a parent divben megadottonclick="location.href='#';"érvényesül, azaz "bezáródik" div.Ötletek esetleg?
Közben megtaláltam a kellő működésű popupot, ráadásul teljesen CSS, nem kell Javascriptes dolgokat sem használni hozzá
Azért még érdekel, hogy JavaScript alapon hogyan lehetne kivitelezni. -
btz
addikt
IV. Verzió
Sajnos még mindig bugos. Nem adja vissza a cookie-t (már eleve azt írja, hogy van, pedig frissen megnyitott böngészőben alapból nem létezhetne) és nem is akar frisssülni a div.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
-
cattus
addikt
Szia!
Megpróbáltam a kódot, nem tudom mit rontottam el, de nem működik a codepenben.
Utána nézek az általad írt javaslatoknak, még kezdő vagyok a javascriptben, ezért sokmindennek kell még utánajárnom.

Bocsi, elrontottam, a
window.addEventListener("load", loadDiv);
sort cseréld ki erre:
document.addEventListener("DOMContentLoaded", loadDiv); -
btz
addikt
Üdv!
<div id="cookie-check">
</div>Tartalmát ez a javascript kód "tölti fel":
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 />";
}Ha a süti létezik akkor az egyik document.getElementById('cookie-check').innerHTML = fut le, ha nem létezik, akkor a másik.
Van benne gomb, ami amellett, hogy onclick esetén végrehajtja a wantCookie() vagy a givebackCookie() funkciót újratölti a cookie-check id-vel rendelkező divet, ami üres, ezért újratöltés után üres lesz. Én azt szeretném, ha újratöltés után, újra felülírná a javascript a divet a megfelelő tartalommal a fenti if else utasítás szerint.A div újratöltéséért ez a kódrész felel:
$("#cookiebutton").click(function() {
$("#cookie-check").load(" #cookie-check > *");
});A teljes demo itt található:
CODEPEN DEMOElőre is köszönöm a válaszokat!
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
Üdv!
<div id="cookie-check">
</div>Tartalmát ez a javascript kód "tölti fel":
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 />";
}Ha a süti létezik akkor az egyik document.getElementById('cookie-check').innerHTML = fut le, ha nem létezik, akkor a másik.
Van benne gomb, ami amellett, hogy onclick esetén végrehajtja a wantCookie() vagy a givebackCookie() funkciót újratölti a cookie-check id-vel rendelkező divet, ami üres, ezért újratöltés után üres lesz. Én azt szeretném, ha újratöltés után, újra felülírná a javascript a divet a megfelelő tartalommal a fenti if else utasítás szerint.A div újratöltéséért ez a kódrész felel:
$("#cookiebutton").click(function() {
$("#cookie-check").load(" #cookie-check > *");
});A teljes demo itt található:
CODEPEN DEMOElőre is köszönöm a válaszokat!
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.
-
#57018880
törölt tag
Viszont most kaptam egy ilyen kódot egy másik fórumról
<div id="myDiv">
1234567890 ABCDEFG abcd efg
123
</div>
<div id="button">
<button onclick="myFunction()"><-DEL</button>
</div>
<script>
function myFunction() {
var txt = document.getElementById("myDiv").innerHTML.slice(0,-1);
document.getElementById("myDiv").innerHTML= txt;
//txt.slice(0,-1);
//var txt = $('#myDiv');
//txt.val(txt.val().slice(0, -1));
}
</script>Ez is az első clickre nem történik semmi (legalább is látszólag) betegségben szenved.
<div id="myDiv">
1234567890 ABCDEFG abcd efg
123
</div>Ezért "nem működik" elsőre, valójában működik, ha teljesen egy sorba írod akkor nem lesz ott extra karakter amit törölhet.
//látom közben meglett

-
btz
addikt
Viszont most kaptam egy ilyen kódot egy másik fórumról
<div id="myDiv">
1234567890 ABCDEFG abcd efg
123
</div>
<div id="button">
<button onclick="myFunction()"><-DEL</button>
</div>
<script>
function myFunction() {
var txt = document.getElementById("myDiv").innerHTML.slice(0,-1);
document.getElementById("myDiv").innerHTML= txt;
//txt.slice(0,-1);
//var txt = $('#myDiv');
//txt.val(txt.val().slice(0, -1));
}
</script>Ez is az első clickre nem történik semmi (legalább is látszólag) betegségben szenved.
Á, tudtam én hogy az ebédszünet meghozza a megoldást, ha nem gondolkodom rajta, egyből beugrik. Az enter az utolsó karakter és e lezáró div között. Azt törli ki elősször.
Így mostmár hibátlan 🙂 -
petyus_
senior tag
Köszönöm a megoldást. Így már működik, amit szeretnék.
Egyetlen gond van vele, hogy az első klikknél nem csinál semmit, csak a második kattintás után kezdi törölni a div tartalmát.Valószínűleg van a végén whitespace, és azt vágja le először, hívja rajta egy trim()-et.
(viszont akkor a spacek alapból mindig törölve lesznek, nem tudom ez gond-e).
-
Csepe
aktív tag
Ez a verzió pedig egyszerűen nem működik és nem értem, hogy miért?
<div id="myDiv">
1234567890 ABCDEFG abcd efg
123
</div>
<p>This is a paragraph outside the div.</p>
<script>
function myFunction() {
var txt = $('#myDiv');
txt.val(txt.val().slice(0, -1));
}
</script>
<button onclick='myFunction()'>TÖRLÉS</button>Szia!
A .val() az input elemek value értékét kéri le, ha egy div elem szövegét akarod módosítani, akkor a .text(), vagy a .html() metódusokat lehet használni.
-
petyus_
senior tag
$(document).ready(function(){
$("button").click(function(){
const div = $('#myDiv');
div.text(div.text().substring(0,div.text().length-1))
});
}); -
mobal
nagyúr
-
Jim-Y
veterán
Dehát azt a részt pont te javasoltad, hogy tegyem bele vagy én értettem félre valamit és beletettem, utána elkezdett úgy működni ahogy nekem kell.

Közben találtam a dologra egy végtelenül egyszerű és purritán megoldást. Szóval feleslegesen bonyolítottam az egészet 😃
Remélem ez széles körben standard dolog és a legtöbb böngésző támogatja.Ismerem a jsfidle-t és néha használom is, de ilyen purritán kódnál, az ágyúval verébre kategóriának érzem a használatát, főleg a külön szekcióba szedést (HTML, CSS, JS).
Ugyanez amit csinaltal, csak szebben megoldva szeparalava a kodot. https://jsfiddle.net/3ky9chug/
-
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
Javascriptel szeretnék bezárni egy szövegrészt vagy egy egész divet egy bezár gombbal és magát a bezár gombot is el akarom tünteni.
A dialogal már próbálkoztam és működik is, de azt írják, hogy nem valami standard cucc, ezért szeretnék valami mást. A másik problémám még vele, hogy bezáráskor a tartalom az oldal tetejére ugrik, ami nem biztos, hogy jó, ha a felhasználó egy hosszú lap alján van.
Jelenleg van egy ilyenem. Ez bezárja ugyan a szöveget de magát a bezár gombot nem. És ha a gombot alulra teszem, akkor még azt sem.
Érdekelne, hogy milyen lehetőségek vannak még erre.
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'; -
btz
addikt
Van egy ilyen dialogom:
https://www.w3schools.com/code/tryit.asp?filename=G4TB4HP92PJ0
Hogyan oldhatnám meg, hogy a dialog tartalma már a betöltéskor megjelenjen és a close gombal bezáródjon?
Jelenleg az van, hogy a dialog alapból nem jelenik meg.
Kellett megkérdeznem, mire megkérdeztem, eszembe jutott egy módszer.

https://www.w3schools.com/code/tryit.asp?filename=G4TBCOXG2KV4
-
#57018880
törölt tag
Hát, meg kell hagyni túlbonyolítottad amennyire csak lehetett

Új hozzászólás Aktív témák
-
Fórumok
Mobilarena - mobil fórumok
Okostelefonok Mobiltelefonok Okosórák Autó+mobil Üzlet és Szolgáltatások Mobilalkalmazások Tartozékok, egyebek Mobilarena blogokPROHARDVER! - hardver fórumok
Notebookok TV & Audió Digitális fényképezés Alaplapok, chipsetek, memóriák Processzorok, tuning Hűtés, házak, tápok, modding Videokártyák Monitorok Adattárolás Multimédia, életmód, 3D nyomtatás Nyomtatók, szkennerek Tabletek, E-bookok PC, mini PC, barebone, szerver Beviteli eszközök Egyéb hardverek PROHARDVER! BlogokIT café - infotech fórumok
Infotech Hálózat, szolgáltatók OS, alkalmazások SzoftverfejlesztésGAMEPOD - játék fórumok
PC játékok Konzol játékok MobiljátékokLOGOUT - lépj ki, lépj be!
LOGOUT reakciók Monologoszféra FototrendFÁRADT GŐZ - közösségi tér szinte bármiről
Tudomány, oktatás Sport, életmód, utazás, egészség Kultúra, művészet, média Gazdaság, jog Technika, hobbi, otthon Társadalom, közélet Egyéb Lokál PROHARDVER! interaktív
- Samsung Galaxy S25 - végre van kicsi!
- Visszatérés az aranykorba: Heroes of Might and Magic: Olden Era Early Access
- Könyvajánló
- Viccrovat
- Forza sorozat (Horizon/Motorsport)
- Macska topik
- Luck Dragon: Asszociációs játék. :)
- Speciális kiadású AMD-s alaplapot villantott az ASUS a 20 éves ROG-jubileumra
- Projektor topic
- Xbox tulajok OFF topicja
- További aktív témák...
- i9-9900KF + RTX 2060 SUPER Gamer PC
- HP EliteBook 6 G1 Ryzen 5 PRO 2.5 ÉV GARANCIA Csak 9 ciklus!
- AKCIÓ!!! GAMER PC: i5-12400F/13400F/14400F +RTX 5060 +16GB DDR4! GARANCIA/SZÁMLA (a Te nevedre)!
- HIGH END - 2026 MacBook Pro 16" 18C / 40C / 128 GB RAM - 4TB SSD - Magyar Billentyűzet - Space Black
- Mac Pro 6,1 2013 Late
- Xiaomi Redmi Note 11 Pro 128GB,Újszerű,Dobozaval,12 hónap garanciával
- Corsair Vengeance DDR4 32GB ( 2x16GB ) 2400 MHZ
- Surface Pro 7+ i5-1135G7 16G 256GB 1 év garancia
- Dell Latitude 5430 14" Touchscreen i5-1235U 32GB 512GB 1 év garancia
- Bomba ár! Lenovo ThinkPad T15 G1 - i7-10G I 16GB I 256GB SSD I 15,6" FHD I Cam I W11 I Gari!
Állásajánlatok
Cég: aiMotive Kft.
Város: Budapest
Cég: Laptopműhely Bt.
Város: Budapest




É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.




