Jump to content
Slate Blackcurrant Watermelon Strawberry Orange Banana Apple Emerald Chocolate Marble
Slate Blackcurrant Watermelon Strawberry Orange Banana Apple Emerald Chocolate Marble
alexitiris

JavaScript expain

Recommended Posts

Γεια σας φίλοι μου.

Θα ήθελα την βοήθεια σας παρακαλώ. Είμαι αρχάριος και θα ήθελα την βοήθεια σας παρακαλώ.

Σε αυτό εδώ κάνεις το εξής: Όταν ο χρήστης πατήσει την λέξη τεστ θα ακούσει ένα ήχο. Μετά αν πατήσει την εικόνα σταματάει ο ήχος από την πρόταση και παίζει ο ήχος στην εικόνα.

 

<h1 class="underline-on-hover" onclick="playAudio()" onmouseover="" cursor: pointer;">Test.</h1>
<img onclick="playAudio()" onmouseover="" style="cursor: pointer;" class="img-responsive" src="imagetest.png" alt="Image Test">

 

Επειδή δεν καταλαβαίνω κάποια πράγματα θα ήθελα να εξηγήσετε λίγο την λογική της σας παρακαλώ δηλαδή πως λειτουργεί εδώ η JS.

 

var audio1 = document.getElementById("audio1");
var audio2 = document.getElementById("audio2");
var whoIsPlaying = null; //Εδώ δίνει μια μεταβλητή και της εκχωρεί με null.



function clickOnH1() {


  /*Στην if τι ελέγχει το είδος ή κάτι άλλο? Δηλαδή στο Data types που έχω διαβάσει από το w3schools
  το null είναι object και τα '' είναι sting. Ισχύει αυτό που λέω? */
  if (whoIsPlaying != 'H1') {
    audio2.pause();
    audio1.play();

    whoIsPlaying = 'H1'; //Εδώ γιατί έβαλε ότι η μεταβλητή εκχωρείται με ''?
  }
}


function clickOnIMG() {


  if (whoIsPlaying != 'IMG') {


    audio1.pause();
    audio2.play();
    whoIsPlaying = 'IMG';
  }
}

 

Share this post


Link to post
Share on other sites

βαλε το cursor:pointerl μεσα σε style="" στο h1

Στην jS γραφεις 

document.getElementById("audio1");
document.getElementById("audio2");

Αλλα αυτα τα ID δεν υπαρχουνε καπου. θα πρεπει να δωσεις <h1 id="audio1" ........ > και <img id="audio2" ............ >

Επισης λες στο onclick του h1 να τρεξει το function: playAudio()  αλλα δε βλεπεω να υπαρχει τετοιο function. Ισως θα πρεπει να μετονομασεις το clickOnH1 σε playAudio()

Edited by domino

Share this post


Link to post
Share on other sites

Το έχω βρει εδώ http://stackoverflow.com/questions/41973990/two-click-differnets-text-and-image-and-play-audio/41974611?noredirect=1#comment71128718_41974611

Απλός θα ήθελα την βοήθεια σας αν μπορείτε να μου εξηγήσετε γιατί έβαλε το null? Και + αυτό που ρωτάω απάνω.

 

Edited by alexitiris

Share this post


Link to post
Share on other sites

Τα έχω διορθώσει αυτά. Απλός θέλω μια εξήγηση σχετικά με την JS!!!!!

15 minutes ago, domino said:

βαλε το cursor:pointerl μεσα σε style="" στο h1

Στην jS γραφεις 


document.getElementById("audio1");

document.getElementById("audio2");

Αλλα αυτα τα ID δεν υπαρχουνε καπου. θα πρεπει να δωσεις <h1 id="audio1" ........ > και <img id="audio2" ............ >

Επισης λες στο onclick του h1 να τρεξει το function: playAudio()  αλλα δε βλεπεω να υπαρχει τετοιο function. Ισως θα πρεπει να μετονομασεις το clickOnH1 σε playAudio()

 

Share this post


Link to post
Share on other sites

To null το εβαλε απλα για να κανει reset το value. Οταν δηλωνεις μια μεταβλητη, καλο ειναι στην αρχη να την μηδενιζεις σε περιπτωση που καποιο αλλο script χρησιμοποιει την μεταβλητη αυτη με το ιδιο ονομα.

Στην if στην ουσια κανει το εξης: Λεει αν το whoIsPlaying δεν ειναι "H1" (το ! σημαινει "δεν") τοτε κανε το img να σταματησει να παιζει και το h1 να παιξει. και μετατρεπει το value του whoIsPlaying σε H1.

Η θεωρια ειναι η εξης:

Οταν κανεις κλικ στο h1 τρεξε το function clickonh1 και κανε το value του whoisplaying απο οτιδηποτε ειναι σε h1 αφου κανεις το img να σταματησει να παιζει και το h1 να ξεκινησει.

Οταν κανεις κλικ στο img τρεξε το function clickonimg και κανε το value του whoisplaying απο οτιδηποτε ειναι σε img αφου κανεις το h1 να σταματησει να παιζει και το img να ξεκινησει.

To θεμα ειναι πως εσυ εβαλες οταν καποιος κανει κλικ στο h1 να τρεξει το function playaudio() αλλα δεν υπαρχει καπου αυτο το function. (εκτος και αν απλα δε το συμπεριελαβες)

Αν θελεις ξαναστειλε τον κωδικα με τις διορθωσεις που εκανες.

Edited by domino

Share this post


Link to post
Share on other sites
5 minutes ago, domino said:

To null το εβαλε απλα για να κανει reset το value. Οταν δηλωνεις μια μεταβλητη, καλο ειναι στην αρχη να την μηδενιζεις σε περιπτωση που καποιο αλλο script χρησιμοποιει την μεταβλητη αυτη με το ιδιο ονομα.

Στην if στην ουσια κανει το εξης: Λεει αν το whoIsPlaying δεν ειναι "H1" (το ! σημαινει "δεν") τοτε κανε το img να σταματησει να παιζει και το h1 να παιξει. και μετατρεπει το value του whoIsPlaying σε H1.

Η θεωρια ειναι η εξης:

Οταν κανεις κλικ στο h1 τρεξε το function clickonh1 και κανε το value του whoisplaying απο οτιδηποτε ειναι σε h1 αφου κανεις το img να σταματησει να παιζει και το h1 να ξεκινησει.

Οταν κανεις κλικ στο img τρεξε το function clickonimg και κανε το value του whoisplaying απο οτιδηποτε ειναι σε img αφου κανεις το h1 να σταματησει να παιζει και το img να ξεκινησει.

Τώρα κατάλαβα. Απλός είχα μπερδευτεί με τα data types. Γι' αυτό.

Σε ευχαριστώ πολύ για το χρόνο σου.

Share this post


Link to post
Share on other sites

Καλημέρα απ ότι βλέπω υπάρχει μια onclick function στα δύο στοιχεία με το ίδιο όνομα "playAudio" την οποία δεν μας την έχεις δώσει στο κομμάτι κώδικα. δοκίμασε αν θες αυτό:

 

https://jsfiddle.net/5mgyLxkc/6/

Share this post


Link to post
Share on other sites
9 minutes ago, Freddo said:

Καλημέρα απ ότι βλέπω υπάρχει μια onclick function στα δύο στοιχεία με το ίδιο όνομα "playAudio" την οποία δεν μας την έχεις δώσει στο κομμάτι κώδικα. δοκίμασε αν θες αυτό:

 

https://jsfiddle.net/5mgyLxkc/6/

Αυτό το έκανες με jQuery? 

Share this post


Link to post
Share on other sites

Ναι μονο και μονο για να μπορείς εύκολα να τα κανεις "catch" με classes αν έχεις πολλά ίδια στοιχεία.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×