Permalänk
Medlem

Javascript-Events

Är ny med javascript och events så har lite problem med denna uppgift jag fått. Någon som kan hjälpa mig?

Det finns flera olika sätt för att koppla javascript-funktioner mot events. Visa med programkod minst 2 olika sådana sätt. Skapa kod som kopplar events till en knapp. Knappen har id ”katt” och koden ska skriva ut ”mjaou” om man klickar på knappen och skriver ut ”mjaoumjaou” om man dubbelklickar på knappen.

Såhär har jag gjort nu:

function loaded(){
document.addEventListener("click", function(e){
alert("mjaou");
});
}
</script>
</head>
<body onload="loaded()">
<button id="katt">Tryck här</button>

Men då kommer ju alerten upp oavsett vart på sidan man klickar, plus att den kommer upp direkt utan att man tryckt på knappen.. Är ju pga body onload, men hur ska jag koda så att mjaou endast kommer upp när man klickar på knappen? Och hur gör jag så att mjaoumjaou kommer upp när man dubbelklickar?

Permalänk
Medlem

Nu binder du din event listener på document, istället för på din knapp. Därför körs koden vart du än klickar.

Permalänk
Medlem
Skrivet av Chimo:

Nu binder du din event listener på document, istället för på din knapp. Därför körs koden vart du än klickar.

Jag ändrade till detta och det verkar fungera bättre:

<body>
<button id="katt">Tryck här</button>
<script>
document.getElementById("katt").addEventListener("click", display);

function display() {
alert("mjaou");
}
</script>
</body>

Men nu är frågan hur jag ska lägga in den där dubbelklicken?

Permalänk
Medlem
Skrivet av zykoz:

Jag ändrade till detta och det verkar fungera bättre:

<body>
<button id="katt">Tryck här</button>
<script>
document.getElementById("katt").addEventListener("click", display);

function display() {
alert("mjaou");
}
</script>
</body>

Men nu är frågan hur jag ska lägga in den där dubbelklicken?

https://www.w3schools.com/Jsref/event_ondblclick.asp

Lär dig googla, det är din bästa vän som programmerare

Skickades från m.sweclockers.com

Permalänk
Medlem
Skrivet av zaibuf:

https://www.w3schools.com/Jsref/event_ondblclick.asp

Lär dig googla, det är din bästa vän som programmerare

Skickades från m.sweclockers.com

Jaa jag fick också upp "dblclick", men vad är felet för denna kod fungerar inte?

<button id="katt">Tryck här</button>
<script>
document.getElementById("katt").addEventListener("click", display);
document.getElementById("katt").addEventListener("dblclick", display2);
function display() {
alert("mjaou");
}
function display2() {
alert("mjaoumjaou");
}

De fungerar var för sig men inte tillsammans....

Permalänk
Medlem
Skrivet av zykoz:

Jaa jag fick också upp "dblclick", men vad är felet för denna kod fungerar inte?

<button id="katt">Tryck här</button>
<script>
document.getElementById("katt").addEventListener("click", display);
document.getElementById("katt").addEventListener("dblclick", display2);
function display() {
alert("mjaou");
}
function display2() {
alert("mjaoumjaou");
}

De fungerar var för sig men inte tillsammans....

click avfyras vid första klicket varvid du drar upp en dialogruta som förhindrar ytterligare klick. Om display inte ska köras vid dubbelklick måste du se till att vänta en viss tid och avbryta om det dyker upp ett klick till.

Jag tycker det är en extremt dålig idé att göra två helt olika saker beroende på om man klickar eller dubbelklickar på något. Eftersom man måste vänta på timeouten innan något händer vid enkelklick känns det väldigt oresponsivt (testa att slå på trippelklick för zoom om du har en androidtelefon så får du uppleva det på varenda tryck).

Permalänk
Medlem
Skrivet av LemonIllusion:

click avfyras vid första klicket varvid du drar upp en dialogruta som förhindrar ytterligare klick. Om display inte ska köras vid dubbelklick måste du se till att vänta en viss tid och avbryta om det dyker upp ett klick till.

Jag tycker det är en extremt dålig idé att göra två helt olika saker beroende på om man klickar eller dubbelklickar på något. Eftersom man måste vänta på timeouten innan något händer vid enkelklick känns det väldigt oresponsivt (testa att slå på trippelklick för zoom om du har en androidtelefon så får du uppleva det på varenda tryck).

Okej så hur kan man göra istället då?

Permalänk
Medlem
Skrivet av zykoz:

Jaa jag fick också upp "dblclick", men vad är felet för denna kod fungerar inte?

<button id="katt">Tryck här</button>
<script>
document.getElementById("katt").addEventListener("click", display);
document.getElementById("katt").addEventListener("dblclick", display2);
function display() {
alert("mjaou");
}
function display2() {
alert("mjaoumjaou");
}

De fungerar var för sig men inte tillsammans....

Vet inte om det är alert ni ska använda. Men click kommer flaggas först och då går den aldrig in i double click.
Det är bad-practise att binda ett click och double click event till samma element.
För att lösa detta måste du använda en timeout som stannar upp efter första klicket för att kolla om det fortfarande är ett single click du vill använda.

Uppgiften skriver "Skriva ut", känns som du då ska skriva i någon HTML tag, typ en <p> tag?
Tror nivån på uppgiften är så att du ska skriva ut "meow" i p taggen, klickar man två gånger appendar den texten och då blir det "meowmeow".

Då uppgiften handlar om väldigt basic eventhantering i JS (antar att det är en skoluppgift av något slag?) så låter det orimligt att du ska behöva dra in en timeout i functionen.

En lösning med timeout skulle kunna se ut såhär, dock är det sjukt ologiskt att lösa det på det här viset.
Gör aldrig såhär!

const cat = document.querySelector("#katt"); let clicks = 0; cat.addEventListener("click", display); cat.addEventListener("dblclick", display); function display(){ clicks++; if(clicks === 1){ // setTimeout(() => { if(clicks === 1){ alert("meow"); } else { alert("meowmeow"); } clicks = 0; }, 100); } }

Tycker att du kan gå tillbaka till skolan och dra din lärare i örat

Permalänk
Medlem
Skrivet av zykoz:

Okej så hur kan man göra istället då?

Ha två olika knappar och använd inte dubbelklick. Kan du komma på ett enda exempel på en hemsida som avbryter enkelklicksåtgärden vid dubbelklick?

Permalänk
Medlem
Skrivet av zaibuf:

Vet inte om det är alert ni ska använda. Men click kommer flaggas först och då går den aldrig in i double click.
Det är bad-practise att binda ett click och double click event till samma element.
För att lösa detta måste du använda en timeout som stannar upp efter första klicket för att kolla om det fortfarande är ett single click du vill använda.

Uppgiften skriver "Skriva ut", känns som du då ska skriva i någon HTML tag, typ en <p> tag?
Tror nivån på uppgiften är så att du ska skriva ut "meow" i p taggen, klickar man två gånger appendar den texten och då blir det "meowmeow".

Då uppgiften handlar om väldigt basic eventhantering i JS (antar att det är en skoluppgift av något slag?) så låter det orimligt att du ska behöva dra in en timeout i functionen.

En lösning med timeout skulle kunna se ut såhär, dock är det sjukt ologiskt att lösa det på det här viset.
Gör aldrig såhär!

const cat = document.querySelector("#katt"); let clicks = 0; cat.addEventListener("click", display); cat.addEventListener("dblclick", display); function display(){ clicks++; if(clicks === 1){ // setTimeout(() => { if(clicks === 1){ alert("meow"); } else { alert("meowmeow"); } clicks = 0; }, 100); } }

Smart! Då borde detta uppfylla kraven för uppgiften väl..? Dock måste jag visa ett annat sätt, där tänker jag att det är bodyonload, har du något tips om hur man ska göra då?

<button id="katt" onclick="myFunction()" ondblclick="myFunction2()">Tryck här</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Mjaou";
}
function myFunction2() {
document.getElementById("demo").innerHTML = "MjaouMjaou";
}
</script>

Permalänk
Medlem
Skrivet av zykoz:

Smart! Då borde detta uppfylla kraven för uppgiften väl..? Dock måste jag visa ett annat sätt, där tänker jag att det är bodyonload, har du något tips om hur man ska göra då?

<button id="katt" onclick="myFunction()" ondblclick="myFunction2()">Tryck här</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Mjaou";
}
function myFunction2() {
document.getElementById("demo").innerHTML = "MjaouMjaou";
}
</script>

Yea det fungerar, tycker att du fortfarande kan dra din lärare i örat för att lära ut bad practises

Vad menar du med annat sätt?

Permalänk
Medlem
Skrivet av zaibuf:

Yea det fungerar, tycker att du fortfarande kan dra din lärare i örat för att lära ut bad practises

Vad menar du med annat sätt?

Haha ja xD

I uppgiften står det ju "Det finns flera olika sätt för att koppla javascript-funktioner mot events. Visa med programkod minst 2 olika sådana sätt"

Så nu har jag ju alltså gjort ett sätt, så måste göra ett annat. Antar att det är att använda body onload..? Hur ska jag ändra om i koden isåfall, så att det fungerar på det sättet också?

Permalänk
Medlem
Skrivet av zykoz:

Haha ja xD

I uppgiften står det ju "Det finns flera olika sätt för att koppla javascript-funktioner mot events. Visa med programkod minst 2 olika sådana sätt"

Så nu har jag ju alltså gjort ett sätt, så måste göra ett annat. Antar att det är att använda body onload..? Hur ska jag ändra om i koden isåfall, så att det fungerar på det sättet också?

https://www.w3schools.com/js/js_events.asp

Finns diverse du kan leka med.
mouseover, keydown etc.

Du skulle kunna ändra bakgrundsfärg då du drar musen över någon text etc. Låt fantasin flöda hehe

Indirekt har du ju använt två då click och dblclick inte är samma event

Permalänk
Medlem
Skrivet av zaibuf:

https://www.w3schools.com/js/js_events.asp

Finns diverse du kan leka med.
mouseover, keydown etc.

Du skulle kunna ändra bakgrundsfärg då du drar musen över någon text etc. Låt fantasin flöda hehe

Indirekt har du ju använt två då click och dblclick inte är samma event

Nej alltså läraren menar nog att detta event (med knappen) ska jag koppla på två olika sätt. Så nu undrar jag hur jag ska göra det andra sättet xD

Permalänk
Medlem
Skrivet av zykoz:

Nej alltså läraren menar nog att detta event (med knappen) ska jag koppla på två olika sätt. Så nu undrar jag hur jag ska göra det andra sättet xD

Jag tolkar inte meningen så, tolkar det som att du ska använda två olika events generellt bara.

Permalänk
Medlem
Skrivet av zaibuf:

Jag tolkar inte meningen så, tolkar det som att du ska använda två olika events generellt bara.

Ah det kanske är så då Men tack för all hjälp! Nu förstår jag mycket bättre

Permalänk
Medlem
Skrivet av zaibuf:

Jag tolkar inte meningen så, tolkar det som att du ska använda två olika events generellt bara.

Nu vet jag vad läraren menar. Det är att man antingen kallar på funktionen så som jag gjorde ovan med button onclick= funktion. Sedan ska man koda ett annat sätt för att koppla eventet till funktionen. Tex att man istället gör en variabel och kopplar ihop det på något vis Du vet inte hur man gör det..? Eller nån annan som vet?

Skickades från m.sweclockers.com

Permalänk
Entusiast
Skrivet av zykoz:

Nu vet jag vad läraren menar. Det är att man antingen kallar på funktionen så som jag gjorde ovan med button onclick= funktion. Sedan ska man koda ett annat sätt för att koppla eventet till funktionen. Tex att man istället gör en variabel och kopplar ihop det på något vis Du vet inte hur man gör det..? Eller nån annan som vet?

Mm. Det "riktiga" sättet att lägga till event listeners är med addEventListener. Den tar en sträng som identifierar eventtypen och en funktion som ska kallas när eventet triggas:

const knapp = document.getElementById("katt"); knapp.addEventListener("click", () => { alert("Mjau!"); });

Alternativt:

function jama() { alert("Mjau!"); } knapp.addEventListener("click", jama);

Om du gör på det andra sättet kan du ta bort lyssnaren senare:

knapp.removeEventListener("click", jama);

Skillnad på f och f()

Notera att det andra argumentet måste vara just en funktion. Vanligt misstag:

knapp.addEventListener("click", jama());

jama och jama() är helt olika saker. jama() kommer i det här fallet vara undefined, vilket inte är en särskilt lämplig event listener.

Åtkomst till eventet i lyssnaren

Lyssnaren kallas med eventet som första argument, så du har åtkomst till eventet i lyssnaren:

knapp.addEventListener("click", event => { console.log(event.target); });

Permalänk
Entusiast
Skrivet av zykoz:

<head> <script> function loaded(){ // … } </script> </head> <body onload="loaded()"> <button id="katt">Tryck här</button> </body>

Ovanstående krumbukter med onload skulle jag säga är redundanta. Överväg istället:

<body> <button id="katt">Tryck här</button> <script> // … </script> </body>

Notera att jag lagt <script>-taggen sist i <body>, så att scriptet körs först när sidans innehåll finns tillgängligt.

Permalänk
Medlem
Skrivet av Alling:

Mm. Det "riktiga" sättet att lägga till event listeners är med addEventListener. Den tar en sträng som identifierar eventtypen och en funktion som ska kallas när eventet triggas:

const knapp = document.getElementById("katt"); knapp.addEventListener("click", () => { alert("Mjau!"); });

Alternativt:

function jama() { alert("Mjau!"); } knapp.addEventListener("click", jama);

Om du gör på det andra sättet kan du ta bort lyssnaren senare:

knapp.removeEventListener("click", jama);

Skillnad på f och f()

Notera att det andra argumentet måste vara just en funktion. Vanligt misstag:

knapp.addEventListener("click", jama());

jama och jama() är helt olika saker. jama() kommer i det här fallet vara undefined, vilket inte är en särskilt lämplig event listener.

Åtkomst till eventet i lyssnaren

Lyssnaren kallas med eventet som första argument, så du har åtkomst till eventet i lyssnaren:

knapp.addEventListener("click", event => { console.log(event.target); });

Okej tack! Jag använde det första sättet:
const knapp = document.getElementById("katt");

knapp.addEventListener("click", () => { alert("Mjau!"); });

Men ändrade om så att det skrivs ut i en p-tag istället så att man kan göra både click och dubbelklick. Ser detta rätt ut..? Det fungerar som det ska men jag undrar om det är korrekt skrivet?

const knapp = document.getElementById("katt");
knapp.addEventListener("click", () => {document.getElementById("text").innerHTML = "mjau"; });

const knapp2 = document.getElementById("katt");
knapp2.addEventListener("dblclick", () => {document.getElementById("text").innerHTML = "mjaumjau"; });

Permalänk
Entusiast
Skrivet av zykoz:

Okej tack! Jag använde det första sättet:
const knapp = document.getElementById("katt");

knapp.addEventListener("click", () => { alert("Mjau!"); });

Men ändrade om så att det skrivs ut i en p-tag istället så att man kan göra både click och dubbelklick. Ser detta rätt ut..? Det fungerar som det ska men jag undrar om det är korrekt skrivet?

const knapp = document.getElementById("katt");
knapp.addEventListener("click", () => {document.getElementById("text").innerHTML = "mjau"; });

const knapp2 = document.getElementById("katt");
knapp2.addEventListener("dblclick", () => {document.getElementById("text").innerHTML = "mjaumjau"; });

Det finns ingen anledning att skapa två referenser till knappen ifråga. Du kan gott återanvända knapp:

const knapp = document.getElementById("katt"); knapp.addEventListener("click", () => {document.getElementById("text").innerHTML = "mjau"; }); knapp.addEventListener("dblclick", () => {document.getElementById("text").innerHTML = "mjaumjau"; });

Sedan kan man diskutera hur bra det är att sätta både en "click"- och en "dblclick"-lyssnare på en och samma knapp, men det är en annan fråga.

Permalänk
Medlem

hey guys! first of all thanks a lot for this thread. I already got couple of my issues resolved just by reading replies. there's one last issue that still remains. So, I am making a clone of kohi click test. I have successfully detected the single click of left mouse button and made the counter to increase on every click.

Now, I have to add a 10 second timer functionality. So that when the player starts, a 10 second countdown starts and automatically shows final click count after 10 seconds end.

This is the code I am using for the timer. (got it on stackoverflow)

var timeleft = 10; var clickTimer = setInterval(function(){ if(timeleft <= 0){ clearInterval(clickTimer); document.getElementById("timer").innerHTML = "Finished"; } else { document.getElementById("timer").innerHTML = timeleft + " seconds remaining"; } timeleft -= 1; }, 1000); <div id="timer"></div>

The timer works only once but after reset method is called, the timer text remains 'Finished'. Can someone help me to get this working?

Permalänk
Medlem
Skrivet av mattnicholas9:

hey guys! first of all thanks a lot for this thread. I already got couple of my issues resolved just by reading replies. there's one last issue that still remains. So, I am making a clone of kohi click test. I have successfully detected the single click of left mouse button and made the counter to increase on every click.

Now, I have to add a 10 second timer functionality. So that when the player starts, a 10 second countdown starts and automatically shows final click count after 10 seconds end.

This is the code I am using for the timer. (got it on stackoverflow)

var timeleft = 10; var clickTimer = setInterval(function(){ if(timeleft <= 0){ clearInterval(clickTimer); document.getElementById("timer").innerHTML = "Finished"; } else { document.getElementById("timer").innerHTML = timeleft + " seconds remaining"; } timeleft -= 1; }, 1000); <div id="timer"></div>

The timer works only once but after reset method is called, the timer text remains 'Finished'. Can someone help me to get this working?

Can't you just set the innerHTML back to whatever you want in your reset function?

A few tips is that using var instead of let or const is bad practice nowadays. I would also bind timer to a const so you can use it everywhere without having to use document.getElementById every time.