Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

Javascript-Events

1
Skriv svar
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?

Senast redigerat
Redigera
Citera flera Citera
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.

Redigera
Citera flera Citera
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.

Gå till inlägget

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?

Redigera
Citera flera Citera
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?

Gå till inlägget

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

Redigera
Citera flera Citera
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

Gå till inlägget

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

Redigera
Citera flera Citera
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....

Gå till inlägget

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

Visa signatur

Spela Swemantle! Du vet att du vill.

Ibland har jag fel, men då är det någon annans fel.

Redigera
Citera flera Citera
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).

Gå till inlägget

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

Redigera
Citera flera Citera
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....

Gå till inlägget

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

Senast redigerat
Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av zykoz:

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

Gå till inlägget

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?

Visa signatur

Spela Swemantle! Du vet att du vill.

Ibland har jag fel, men då är det någon annans fel.

Redigera
Citera flera Citera
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);
  }
}
Gå till inlägget

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>

Redigera
Citera flera Citera
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>

Gå till inlägget

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?

Redigera
Citera flera Citera
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?

Gå till inlägget

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å?

Redigera
Citera flera Citera
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å?

Gå till inlägget

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

Redigera
Citera flera Citera
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

Gå till inlägget

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

Redigera
Citera flera Citera
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

Gå till inlägget

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

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av zaibuf:

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

Gå till inlägget

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

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av zaibuf:

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

Gå till inlägget

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

Redigera
Citera flera Citera
Permalänk
99:e percentilen ★
●
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?

Gå till inlägget

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); });
Visa signatur

Skrivet med hjälp av Better SweClockers

Redigera
Citera flera Citera
Permalänk
99:e percentilen ★
●
Skrivet av zykoz: 
<head>
  <script>
    function loaded(){
        // …
    }
  </script>
</head>
<body onload="loaded()">
  <button id="katt">Tryck här</button>
</body>
Gå till inlägget

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.

Visa signatur

Skrivet med hjälp av Better SweClockers

Redigera
Citera flera Citera
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); });
Gå till inlägget

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"; });

Senast redigerat
Redigera
Citera flera Citera
Permalänk
99:e percentilen ★
●
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"; });

Gå till inlägget

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.

Visa signatur

Skrivet med hjälp av Better SweClockers

Redigera
Citera flera Citera
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?

Redigera
Citera flera Citera
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?

Gå till inlägget

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.

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara