javascript , jquery και checkbox

[zaranero]

Εχω τον εξης κωδικα:

function SelectItemsForTransformation() {
            for (var CheckBoxNumber = 0; dataset.length>=CheckBoxNumber+1; CheckBoxNumber++) {
$('#myform2')    .append(
       $(document.createElement('input')).attr({
           id: "Rectangle " + CheckBoxNumber
          , name: 'myCheckbox'
           ,checked: false
          , value: 1
          , type: 'checkbox'


       })
    );
                
                var label = document.createElement('label');
                label.htmlFor = "Rectangle " + CheckBoxNumber;
                label.appendChild(document.createTextNode('Rectangle Number ' + CheckBoxNumber));
                myform2.appendChild(label);


            }
        }

Δημιουργει πολλαπλα checkbox για καθε αντικειμενο που φτιαχνω στο προγραμμα μου και δουλευει ως φαινεται μια χαρα.

Εχω και τον εξης κωδικα :

function getValuesTranslate() {

            for (var CheckBoxNumber = 0; dataset.length >= CheckBoxNumber + 1; CheckBoxNumber++) {

if ($("#Rectangle " + CheckBoxNumber).prop("checked")) {

                    svg.select("#Rectangle" + CheckBoxNumber)
                
                        .attr("transform", "translate(50,50)");
                  }
       }
}

Το προβλημα μου ειναι οτι τα checkbox δεν ειναι επιλεγμενα αλλα επιλεγει ο χρηστης ποια θελει να ειναι επιλεγμενα και κανονικα οταν επιλεγονται επρεπε να περνανε απο την if του δευτερου κωδικα και να εκτελουν εκεινες τις δυο σειρες κατω απο to if.
Το ασχημο ειναι οτι ποτε δεν εκτελειται ο κωδικας μεσα στο if ειτε επιλεξω ειτε ειναι αποεπιλεγμενα τα checkbox .... δεν μπορω να καταλαβω γιατι.

- - - Updated - - -

Ο καθε κωδικας εκτελειται με το πατημα διαφορετικου κουμπιου.

[Simpleton]

Δοκίμασε να χρησιμοποιήσεις ID χωρίς κενά:
"Rectangle " -> "Rectangle"
"#Rectangle " -> "#Rectangle"

[zaranero]

Χμ θα το τσεκαρω θα αργησω λιγο γιατι ειναι φασαρια γιατι το id χωρις κενα χρησιμοποιειται ηδη εδω:svg.select("#Rectangle" + CheckBoxNumber) ...παω να κανω τις αλλαγες.

- - - Updated - - -

OMFG εχεις δικιο αναθεμα την ωρα που ασχοληθηκα με τον προγραμματισμο..... παλευω τοσες ωρες....ΕΥΧΑΡΙΣΤΩ

[Παπι]

Οπως ειπα και στο αλλο θεμα. Μαθε να χρησιμοποιεις εργαλεια οπως debugger και αλλα. Πχ μονο εαν ειχες την κονσολα ανοικτη, θα εβλεπες αυτο

[zaranero]

Συμφωνω οτι εχεις δικιο , χρησιμποιω την κονσολα του Chrome αλλα πολλες φορες οπως στην προκειμενη με αφηνε στα κρυα του λουτρου. Δεν ξερω να χρησιμοποιω breakpoints και ολα αυτα τα περιεργα , αλλα κατασκευαζω κατι και οσο αυξανει η πολυπλοκοτητα που θα παει θα μαθω να χρησιμοποιω και τα εργαλεια καλυτερα

Ευχαριστω

[Παπι]

Μαθε σουλεω μαθε. Ακου αυτο. Με breakpoints μπορεις να δεις την εκτελεση του κωδικα γραμμη γραμμη, και οχι μονο αυτο αλλα μπορεις να δεις και τι εχει η καθε μεταβλητη!

[zaranero]

Θα προσπαθησω

Στο παραπανω κωδικα που ποσταρα

function getValuesTranslate() {

            for (var CheckBoxNumber = 0; dataset.length >= CheckBoxNumber + 1; CheckBoxNumber++) {

if ($("#Rectangle " + CheckBoxNumber).prop("checked")) {

                    svg.select("#Rectangle" + CheckBoxNumber)
                
                        .attr("transform", "translate(50,50)");
                  var w = $("#Rectagle0").getCTM();

}
       }
}

μεσα στο if στο τελος του, προσθετω μια γραμμη var w = $("#Rectagle0").getCTM(); Εχω δημιουργησει το Rectangle0. Με επιθεωρηση του Element βλεπω:

<rect x="486.4" y="237.19999999999993" width="76.40000000000009" height="76.40000000000009" id="Rectangle0" transform="translate(50,50)"></rect> εχει λοιπον δημιουργηθει.

Ο κωδικας δεν αναγνωριζει το getCTM() ... μου βγαζει λαθος οτι δεν ειναι function και διαφορους τροπους που δοκιμασα να το συνταξω δεν εβγαλα ακρη.
Ωραια λοιπον εχουμε το ορθογωνιο πως θα παρω το current transform matrix ή αλλιως πως θα συνταξω το getCTM() που φαινεται οτι δεν δουλευει. Χρησιμοποιω Chrome.

[Παπι]

Επρεπε να το παρεις. Κατα πασα πιθανοτητα ο selector δεν βρισκει τον rect και σου επιστρεφει null, το οποιο null δεν εχει καμια συναρτηση (δεν υπαρχει null.getCTM() )
Βγαλε αυτη την γραμμη. Ανοιξε την κονσολα και γραψε $('#Rectangle0');

[axxis]

Έχεις βάλει Rectagle0 αντί για Rectangle0

[zaranero]

Δεν ειναι λαθος στην πληκτρολογηση στην μεταφορα στο φορουμ τα μπερδεψα

Εγραψα την εντολη και μου επιστρεφει $('#Rectangle0');

και μου επιστρεφει κανονικα [<rect x="486.4" y="237.19999999999993" width="76.40000000000009" height="76.40000000000009" id="Rectangle0" transform="translate(50,50)"></rect>]

Δοκιμασα και με svg.select("#Rectangle0"); εκει μου βγαζει κατι περιεργο [Array[1] ] με ενα βελακι μπροστα .... to getCTM() και στιν δυο περιπτωσεις:


Uncaught TypeError: undefined is not a function

[Παπι]

Εφοσον σου βγαζει κανονικα το rect τοτε το προβλημα δεν ειναι εκει. ( εαν πατησεις εκει το βελακι που λες στο array[1], θα δεις τι εχει το svg δηλαδη λογικα το rect. )

Το getCTM που το βαζεις; Αφου μπορεις και κανεις select το rect τοτε εαν γραψεις στην κονσολα $('#Rectangle0').getCTM() τοτε θα το παρεις

[zaranero]

Ευχαριστω γιατι δεν ειχα σκεφτει να χρησιμοποιησω την κονσολα με αυτο τον τροπο .... ειμαι πολυ νεος στο χορο (και θα χορεψω:P).

Οχι μου βγαζει παλι Uncaught TypeError: undefined is not a function ... διαβαζω ενα βιβλιο για το SVG να εμπλουτισω λιγο γνωσεις πανω στο χωρο και θα επανερθω αυριο

- - - Updated - - -

<div id="paperDiv" style="width: 900px; height: 900px; border: 3px solid #ddd;">
                <svg>
                    <rect x="486.4" y="237.19999999999993" width="76.40000000000009" height="76.40000000000009" id="Rectangle0" transform="translate(50,50)"></</rect>
                </svg></div>

Δοκιμασα κατι εβαλα το rect κατευθειαν στην html σελιδα (δεν παραγεται απο κωδικα javascript και δεν τρεχω κανενα script .... περα απο τις βιβλιοθηκες που φορτωνουν αρχικα οπως jquery και ενω το σχεδιαζει και το χω .... τρεχω το

$('#Rectangle0').getCTM() και παλι τιποτα....

- - - Updated - - -

var r=$('#Rectangle0').getCTM();

δοκιμασα στην console να το βαλω και σε μια μεταβλητη .... τιποτα Uncaught TypeError: undefined is not a function ...

- - - Updated - - -

το πρωτο σκελος φυσικα δουλευει $('#Rectangle0'); δεν μπορω να καταλαβω ... δεν υπαρχει αυτη η συναρτηση?

[axxis]

Αν μπορούσες να βάλεις όλο τον κωδικά σου εδώ ή σε κανένα jsfiddle.net ίσως θα βοήθαγε.

[Παπι]

Για γραψε στην κονσολα
var rc = $('#Rectangle0');
και μετα
rc. (με το που θα πατησεις την τελεια, θα σου βγαλει τις μεθοδους που εχει το οbject)

[zaranero]

var rc = $('#Rectangle0');

το εγραψα ... δεν μου βγαζει τετοια μεθοδο ... δεν μπορω να καταλαβω για τι πραγμα μιλανε οταν γραφουν στο νετ για getCTM().

Τεσπα προς το παρον αποφασισα να ακολουθησω διαφορετικη πορεια και εχω το εξης προβλημα....

εχω μια array dataset.

Κανοντας console.log(dataset[0]); μου βγαζει το πρωτο στοιχειο στο index του πινακα που ειναι: [20 ,40 ,30 ,10] . Εγω απο αυτες τις 4 τιμες του index 0 να παρω ας πουμε το 20 πως θα το κανω?

Εχω ενα τροπο οταν εβαλα αυτες τις τιμες τις πηρα απο ενα πινακα πχ το tst[0]=20 ειναι το πρωτο στοιχειο , το tst[1]=40 το δευτερο, το tst[2]=30 το τριτο, το tst[3]=10 το τεταρτο και οταν παει στο tst[4]=50 παμε στο πρωτο αριθμο του επομενου στοιχειου του dataset δλδ του dataset[1]=[50, κατι ,κατι , κατι].
Αλλα γινεται πολυ πολυπλοκος ο κωδικας ετσι αν μπορουσα κατευθειαν απο το dataset[0] να αντλησω τον πρωτο αριθμο , ξεχωριστα το δευτερο κλπ θα ηταν καλυτερα.