κλικ σε γράμμα από μια λέξη

Gunix · 15 Φεβρουαρίου 2017

Γεια σας.

Θα ήθελα την βοήθεια σας.

Όπως θα δείτε στην εικόνα που έχω 3 κυκλωμένα γράμματα προσπαθώ να κάνω με την JS το εξής.Εάν ο χρήστης κάνει κλικ στο W θα ακούσει έναν ήχο. Αλλιώς εαν κάνει κλικ στο D θα ακούσει έναν ήχο αλλιώς εάν κλικ στο P θα ακούσει έναν ήχο. Προσπάθησα να κάνω κάτι αλλά δεν τα κατάφερα δηλαδή δεν λειτουργεί.

Πως μπορώ να το κάνω αυτό?

Επίσης να τονίσω ότι, όταν το ποντίκι πάει απάνω μόνο στο γράμμα και γίνει finger και εμφανίζεται ένα underline στο γράμμα τότες κάνει κλικ μόνο σε αυτό το γράμμα να ακούσει έναν ήχο.

Όπως θα δείτε στον κώδικα προσπαθώ με ένα γράμμα

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link href="style.css" rel="stylesheet">
	</head>
	
	<body>
		
      <audio id="audiolettersound">
        <source src="sound/audiotest1.ogg" type="audio/ogg">
          <source src="sound/audiotest1.mp3" type="audio/mpeg">
            Your browser does not support the audio element.
          </audio>
		
		<h1 id="test" onclick="clickOnletter()"></h1>
		<script src="js/jstest.js"></script>
	</body>
	</html>

var audioletter = document.getElementById("audiolettersound");
var whoIsPlaying = null;
var letterstring = "Web Developer";

function clickOnletter() {
  for (var i = 0; i < letterstring.length; i++) {
    var c = letterstring.indexOf("N");
    if (c == "N") {
      if (whoIsPlaying != 'H1') {
        audioletter.pause();
        audioletter.play();
        whoIsPlaying = 'H1';
        audioletter.currentTime = 0;
      }
    }
  }
}
document.getElementById('test').innerHTML = letterstring;

dominotrix · 15 Φεβρουαρίου 2017

Θα σε πειραζε να βαλεις το Web Developer μεσα στην HTML και καθε γραμμα να ειναι μεσα σε ενα <span> το οποιο θα εχει ενα onClick function για να παιζει τον ηχο που θελεις. Θα ειναι στατικο ολο αυτο ή δυναμικο; Δηλαδη το κειμενο θα αλλαζει; Θα αλλαζουν και τα γραμματα που θα παιζουν ηχο;

flienky · 15 Φεβρουαρίου 2017

Να μάθεις για τα events γιατι κατα πασα πιθανοτητα δεν γνωριζεις τοτε θα μπορεις να το κανεις αρκετα ευκολα.

Αφου διαβαζεις, να ξερεις πως καλυτερα θα ηταν να βαλεις ένα, click event στο παρεντ της προτασης, και απο εκει να ελεγχεις σε ποιο γραμμα εκανε click ο χρηστης

<div id="outter">
      <span id="pLetter>P</span>h alli protasi edw
</div>

$('#outter').on('click','span',function(e){
   if($(e.target).attr('id') == 'pLetter'){
     //play p sound
    }
});

Gunix · 15 Φεβρουαρίου 2017

Θα σε πειραζε να βαλεις το Web Developer μεσα στην HTML και καθε γραμμα να ειναι μεσα σε ενα <span> το οποιο θα εχει ενα onClick function για να παιζει τον ηχο που θελεις. Θα ειναι στατικο ολο αυτο ή δυναμικο; Δηλαδη το κειμενο θα αλλαζει; Θα αλλαζουν και τα γραμματα που θα παιζουν ηχο;

Όχι. Στατικό θα είναι το κείμενο. Απλός όταν ο χρήστης πάει το mouse απάνω στο γράμμα πχ το W θα του εμφανίζει ένα underline και ένα cursor pointer και όταν του κάνει κάνει κλικ θα ακούσει έναν ήχο.

Επίσης μετά από ψάξιμο βρήκα αυτό

var letterstring = "WEb developer";
var audioletter = document.getElementById("audiolettersound");
document.addEventListener('click',function(){
var letter = window.getSelection();
if(letter.focusNode.data[letter.focusOffset].toLowerCase()=='e'){
audioletter.play();
}
},false);
document.getElementById("test").innerHTML=letterstring;

Αλλά βλέπω δεν λειτουργεί σωστά. Δηλαδή όταν πατάω με την σειρά το γράμμα e παίζει κανονικά αλλά όταν το πατάω πάλη από την αρχή δεν μου παίζει. Δηλαδή πρέπει να το πατήσω 2 φορές για να παίξει ή φορές.

Μπορούμε να το διορθώσουμε αυτό φίλοι?

Σύνδεση

κλικ σε γράμμα από μια λέξη

Προτεινόμενες αναρτήσεις

Gunix

dominotrix

flienky

Gunix

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Δημιουργία λογαριασμού

Σύνδεση

Σύνδεση