Απορία με javascript

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
dionisis71
Δημοσιεύσεις: 237
Εγγραφή: 04 Μάιος 2009 22:15
Επικοινωνία:

Απορία με javascript

Δημοσίευση από dionisis71 » 27 Σεπ 2012 14:52

Καλησπέρα,

Σε μία σελίδα έχω 2 input tags. Όταν αλλάζει τιμή το 1ο tag θέλω η τιμή να φαίνεται στο 2ο tag. Το 2ο tag δηλαδή θα έχει πάντα την τιμή του 1ο tag. Και όταν αλλάζει η τιμή στο 2ο tag, με ένα change event ή listener να παίρνω ένα alert.


ο κώδικας μου

Κώδικας: Επιλογή όλων

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http&#58;//www.w3.org/1999/xhtml">
<head>
<title>firing on change_event</title>
    <script type="text/javascript">

        function Init&#40;&#41; &#123;
            var id2tag = document.getElementById&#40;'id2'&#41;;
            if &#40;id2tag.addEventListener&#41; &#123;  // all browsers except IE before version 9
                id2tag.addEventListener&#40;'onchange', msg&#40;&#41;, false&#41;;
            &#125;
            else &#123;
                if &#40;id2tag.attachEvent&#41; &#123;   // IE before version 9
                    id2tag.attachEvent&#40;'onchange', msg&#40;&#41;&#41;;
                &#125;
            &#125;
        &#125;

        function changeid1&#40;&#41; &#123;
            document.getElementById&#40;'id2'&#41;.value = document.getElementById&#40;'id1'&#41;.value;
        &#125;

        function msg&#40;&#41; &#123;
            alert&#40;'The Id 2 has changed!!'&#41;;
        &#125;

    </script>
  </head>

<body  onload="Init&#40;&#41;">

    <p>id1
        <input id="id1" type="text" onchange="changeid1&#40;&#41;" /></p>
    <p>id2
        <input id="id2" type="text" "/></p>

  </body>
</html>

Το πρόβλημα είναι ότι το listener για το id2 δεν εκτελειτε.

Ευχαριστώ

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

Απορία με javascript

Δημοσίευση από korgr » 27 Σεπ 2012 16:55

Γιατί δεν το απλουστεύεις λίγο?

Κώδικας: Επιλογή όλων

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http&#58;//www.w3.org/1999/xhtml"> 
<head> 
<title>firing on change_event</title> 
    <script type="text/javascript">  

        function changeid1&#40;&#41; &#123; 
            document.getElementById&#40;'id2'&#41;.value = document.getElementById&#40;'id1'&#41;.value; 
        &#125; 

        function msg&#40;&#41; &#123; 
            alert&#40;'The Id 2 has changed!!'&#41;; 
        &#125; 

    </script> 
  </head> 

<body> 

    <p>id1 
        <input id="id1" type="text" onchange="changeid1&#40;&#41;" /></p> 
    <p>id2 
        <input id="id2" type="text" onchange="msg&#40;&#41;"/></p> 

  </body> 
</html>

Άβαταρ μέλους
burnmind
Script Master
Δημοσιεύσεις: 954
Εγγραφή: 26 Σεπ 2009 02:14
Τοποθεσία: UK
Επικοινωνία:

Απορία με javascript

Δημοσίευση από burnmind » 27 Σεπ 2012 17:07

Και μια γρήγορη λύση με χρήση jQuery:

Κώδικας: Επιλογή όλων

    <script type="text/javascript">
    	$&#40;document&#41;.ready&#40;function&#40;&#41;&#123;
    		$&#40;'#id1'&#41;.change&#40;function&#40;&#41; &#123;
    			$&#40;'#id2'&#41;.val&#40;$&#40;this&#41;.val&#40;&#41;&#41;;
    		&#125;&#41;;

    		$&#40;'#id2'&#41;.change&#40;function&#40;&#41; &#123;
  				alert&#40;'Το #id2 άλλαξε'&#41;;
			&#125;&#41;;
    	&#125;&#41;;
    </script> 
Το .change βέβαια ενεργοποιείται αφότου έχει φύγει το focus από το element, οπότε αν θέλεις να αλλάζει η τιμή του #id2 καθώς ο χρήστης γράφει στο #id1, μπορείς να το αλλάξεις σε ".keyup".

Άβαταρ μέλους
dionisis71
Δημοσιεύσεις: 237
Εγγραφή: 04 Μάιος 2009 22:15
Επικοινωνία:

Απορία με javascript

Δημοσίευση από dionisis71 » 28 Σεπ 2012 09:14

σε ευχαριστώ για την απάντηση σου.

Πολύ ωραίο το παράδειγμα με jquery αλλά το αποτέλεσμα δεν είναι αυτό που θέλω. Αυτό που θέλω είναι πχ. γράφοντας στο #id1 και χωρίς να έχω φύγει από το #id1 (.keyup), να καταλαβαίνει το #id2 την αλλαγή που γινεται και να εμφανίζει alert. (να μην εχει χάσει το focus το id#1). Γράφω πχ "Κ" στο id1, το focus παραμενει στο id1, γίνεται η αλλαγή της τιμής στο id2, καταλαβαίνει την αλλαγή που γίνεται στον εαυτό του (id2) και εμφανίζει alert. Ολα αυτά χωρίς να χάσει το focus το #id1.

Κώδικας: Επιλογή όλων

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http&#58;//www.w3.org/1999/xhtml">
<head>
<title>firing on change_event</title>
    <script type="text/javascript" src="jquery-1.8.2.min.js" ></script>
    <script type="text/javascript" >
        //function Init&#40;&#41; &#123;
         //   var id2tag = document.getElementById&#40;'id2'&#41;;
          //  if &#40;id2tag.addEventListener&#41; &#123;  // all browsers except IE before version 9
           //     id2tag.addEventListener&#40;'onchange', msg&#40;&#41;, false&#41;;
            //&#125;
            //else &#123;
             //   if &#40;id2tag.attachEvent&#41; &#123;   // IE before version 9
              //      id2tag.attachEvent&#40;'onchange', msg&#40;&#41;&#41;;
               // &#125;
           // &#125;
       // &#125;

        //function changeid1&#40;&#41; &#123;
        //    document.getElementById&#40;'id2'&#41;.value = document.getElementById&#40;'id1'&#41;.value;
        //    init&#40;&#41;;
        //&#125;

        //function msg&#40;&#41; &#123;
         //   alert&#40;'The Id 2 has changed!!'&#41;;
        //&#125;
       $&#40;document&#41;.ready&#40;function&#40;&#41;&#123; 
          $&#40;'#id1'&#41;.keyup&#40;function&#40;&#41; &#123; 
             $&#40;'#id2'&#41;.val&#40;$&#40;this&#41;.val&#40;&#41;&#41;; 
          &#125;&#41;;

         $&#40;'#id2'&#41;.change&#40;function &#40;&#41; &#123; 
              alert&#40;'Το #id2 άλλαξε'&#41;; 
         &#125;&#41;; 
       &#125;&#41;; 


    </script>
  </head>

<body>

    <p>id1
        <input id="id1" type="text"  /></p>
    <p>id2
        <input id="id2" type="text" "/></p>

  </body>
</html>

Άβαταρ μέλους
dionisis71
Δημοσιεύσεις: 237
Εγγραφή: 04 Μάιος 2009 22:15
Επικοινωνία:

Απορία με javascript

Δημοσίευση από dionisis71 » 28 Σεπ 2012 09:23

Ουσιαστικά, για να ενεργοποιηθεί το onchange ειτε jvascript, είτε jquery, πρέπει να έχει focus το control; Το id2 δεν θα έχει ποτέ focus καθώς μπορεί να είναι hidden.

Άβαταρ μέλους
burnmind
Script Master
Δημοσιεύσεις: 954
Εγγραφή: 26 Σεπ 2009 02:14
Τοποθεσία: UK
Επικοινωνία:

Απορία με javascript

Δημοσίευση από burnmind » 28 Σεπ 2012 12:25

Το αποτέλεσμα (που είναι το ίδιο με του korgr) είναι ακριβώς αυτό που εξήγησες αρχικά. :P

Από εκεί και πέρα, τα λες (ή τα διαβάζω, καθώς είναι πρωί) λίγο μπερδεμένα, αλλά απ' ότι κατάλαβα θέλεις κάτι σαν το παρακάτω;

Κώδικας: Επιλογή όλων

<!DOCTYPE html> 
<html> 
<head> 
    <script type="text/javascript" src="jquery.js" ></script> 
    <script type="text/javascript">  

    $&#40;document&#41;.ready&#40;function&#40;&#41;&#123;
        ids = new Object&#40;&#41;;
        ids.id2 = $&#40;'#id2'&#41;.val&#40;&#41;;

        $&#40;'#id1'&#41;.keyup&#40;function&#40;&#41; &#123; 
           $&#40;'#id2'&#41;.val&#40;$&#40;this&#41;.val&#40;&#41;&#41;; 
        &#125;&#41;; 

        setInterval&#40;'checkID2&#40;&#41;', 1000&#41;;
    &#125;&#41;;

    function checkID2&#40;&#41;
    &#123;
        var tempID2 = $&#40;'#id2'&#41;.val&#40;&#41;;
        if&#40;tempID2 != ids.id2&#41;
        &#123;
            alert&#40;'Το #id2 &#40;hidden&#41; άλλαξε'&#41;;
            ids.id2 = tempID2;
        &#125;
    &#125;
    </script> 
</head> 
<body> 
    <p>#id1&#58; <input id="id1" type="text" value="" /></p>
    <input id="id2" type="hidden" value="" />
</body> 
</html>
Να ξέρεις πάντως πως τα "id1" και "id2", σε συνάρτηση με τα "μπορεί", δε βοηθάνε και πολύ στην κατανόηση του προβλήματος. Θα βοηθούσε περισσότερο αν εξηγούσες τι θέλεις να κάνεις συγκεκριμένα, καθώς είναι συχνό φαινόμενο να καταλήγουμε σε μία πολύπλοκη λύση χωρίς να υπάρχει λόγος. :wink:

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

Απορία με javascript

Δημοσίευση από korgr » 28 Σεπ 2012 13:18

Να ρωτήσω και εγώ με τη σειρά μου γιατί χρησιμοποιείς το object ids αντί πχ ενός υφιστάμενου αντικειμένου όπως το window ή το document?
Εννοώ γιατί

Κώδικας: Επιλογή όλων

        ids = new Object&#40;&#41;; 
        ids.id2 = $&#40;'#id2'&#41;.val&#40;&#41;;
και όχι

Κώδικας: Επιλογή όλων

        window.id2 = $&#40;'#id2'&#41;.val&#40;&#41;;
Απλά από απορία (μήπως και μάθουμε κάτι καινούργιο) :D

Άβαταρ μέλους
burnmind
Script Master
Δημοσιεύσεις: 954
Εγγραφή: 26 Σεπ 2009 02:14
Τοποθεσία: UK
Επικοινωνία:

Απορία με javascript

Δημοσίευση από burnmind » 28 Σεπ 2012 14:09

Απλά και μόνο για θέμα (δικής μου) λογικής. Συνήθως δε μου αρέσει να τα μπλέκω, ακόμα και αν πρόκειται για κάτι πολύ μικρό (όπως στη συγκεκριμένη περίπτωση).

Τα window & document objects έχουν ήδη παραμέτρους και κάνουν μία συγκεκριμένη δουλειά, άρα μου κάθεται καλύτερα να δημιουργήσω ένα νέο object που θα κάνει μόνο τη δουλειά που θέλω χωρίς να μπλέκεται με τίποτα άλλο, ώστε στο μέλλον -αν χρειαστεί- να το επεκτείνω.

Εδώ το παράδειγμα ήταν μικρό και "μπακάλικο"*, αλλά αν για παράδειγμα θέλαμε να κρατάμε 3 μεταβλητές (πχ name, width και background-color) για το κάθε text input που μπορεί να υπάρξει, τότε το να δημιουργήσουμε ένα custom object είναι η πιο καθαρή λύση:

Κώδικας: Επιλογή όλων

function textInput&#40;name, width, backgroundColor&#41;
&#123;  
    this.name = name;
    this.width = width;
    this.backgroundColor = backgroundColor;
&#125;;

var id1 = new textInput&#40;'id1', 300, 'yellow'&#41;;
var id2 = new textInput&#40;'id2', 150, 'black'&#41;;
*Για την ιστορία, το ids object στο πρώτο παράδειγμα θα μπορούσε να γραφεί και ως

Κώδικας: Επιλογή όλων

ids = &#123; id2&#58; $&#40;'#id2'&#41;.val&#40;&#41; &#125;
αλλά τα κατάλοιπα της Java με κάνουν να χρησιμοποιώ το new Object(). :)

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

Απορία με javascript

Δημοσίευση από korgr » 28 Σεπ 2012 15:20

ok thanks for the info :)

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες