Scrivere funzione con variabile in stringa jQuery

[fede220]

Ciao a tutti non sono bravo con la programmazione JavaScript ed ho cercato su internet come si scrive una funzione con variabile in stringa jQuery 1.0 ma non ci sono riuscito perchè visualizzo errori del tipo che $ non è una funzione. Qui il codice che non riesco a scrivere in stringa jQuery 1.0

function mark(e) {

        var td = e.target;

        if (td.innerHTML) {
            return;
        }

        var row = td.getAttribute('row'),
            column = td.getAttribute('column');

        var current_mark = moves % 2 === 0
            ? 'X'
            : 'O';

        td.innerHTML = current_mark;
        $(td).addClass(current_mark);
        data[row + '' + column] = current_mark;

        moves++;

        setTimeout(function() {
            if (didWin(current_mark)) {
                alert(current_mark + ' vince la partita!');
                scores[current_mark]++;
                updateScoreboard();
                empty();
            } else if (moves === Math.pow(grid_size, 2)) {
                alert("Pareggio!");
                empty();
            }
        }, 0);

    }

[KillerWorm]

errori del tipo che $ non è una funzione

Se $ non viene riconosciuto come funzione può significare che stai provando ad eseguire quello script prima che sia inclusa tale libreria.

Controlla quindi di avere incluso correttamente jQuery e che quella tua funzione sia chiamata solo dopo tale inclusione.

[fede220]

@KillerWorm jQuery è incluso nel tag head, ho risolto e il problema era e.target, l'ho sostituito con event.srcElement e funziona anche su internet explorer. Ma event.srcElement funziona su tutti i browser? Che differenza c'è tra e.target e event.srcElement? Grazie per la cordialità.

[KillerWorm]

Ho potuto rispondere solo ora.

il problema era e.target

Questo però non dovrebbe influire sull'errore "$ non è una funzione".

La cosa non è chiara.

Ad ogni modo event.srcElement dovrebbe essere supportato da tutti i browser ma è comunque deprecato, quindi non c'è alcuna garanzia che continui ad essere supportato in futuro.

Vedi qui qualche riferimento:
Event.srcElement
L'alternativa dovrebbe essere proprio Event.target

Mi pare strano che la causa del problema fosse quella proprietà ma sopratutto che si risolva usandone una non standard

Suppongo ci siano altra cause ma senza vedere l'intero contesto non è possibile trarre conclusioni precise.

Bisogna capire da dove e come stai chiamando quella funzione. Mi sembra evidente che si tratti di un listener applicato ad un qualche evento; in tal caso si potrebbe pensare di usare this per riferirsi all'oggetto da cui è scaturito l'evento.

Eventualmente se puoi postare un link della pagina pubblica o se riesci a postare la parte in cui definisci l'evento, si può cercare di capire meglio dove poter intervenire.

Anche questa parte non mi convince:

        var row = td.getAttribute('row'),
            column = td.getAttribute('column');

Non ne sono sicuro ma gli attributi row e column non mi pare siano attributi HTML sandard; a meno che tu non stia usando del markup personalizzato impostato a dovere, ti consiglierei di usare degli attributi data se ti serve associare in qualche modo dei valori ai tag HTML.

[fede220]

Posto qui il codice, non riesco a capire come si scrivono le funzioni in jQuery. Alcune ci sono riuscito. Soprattutto non sono riuscito a capire come si scrive e.target in jQuery. Questo è il link della pagina pubblica http://android2.altervista.org/Tris-js40.html

function TicTacToe(selector) {

    var main_element = $(selector)[0],
        score_X = $('.score.X')[0],
        score_O = $('.score.O')[0],
        board = $('.board')[0],
        grid_options = $('.grid-options')[0],
        reset_btn = $('.btn-reset')[0];

    var grid_size = 3,
        moves = 0,
        scores = {
            X: 0,
            O: 0
        },
        data = {};

    grid_options.onchange = function(e){
      grid_size = parseInt(e.target.value);
      init();
    };

    init();
    
    reset_btn.onclick = function(e){
      reset_btn = init();
    };

    function paint() {
        var table = '<table>';
        for (var i = 0; i < grid_size; i++) {
            table += '<tr>';
            for (var j = 0; j < grid_size; j++) {
                table += '<td row="' + i + '" column="' + j + '"></td>';
            }
            table += "</tr>";
        }
        board.innerHTML = table;

        var columns = $('td');
        for (i = 0; i < columns.length; i++) {
            columns[i].onclick = function(e){
            td = mark(e);
            }
        }

    }

    function mark(e) {

        var td = e.target;

        if (td.innerHTML) {
            return;
        }

        var row = td.getAttribute('row'),
            column = td.getAttribute('column');

        var current_mark = moves % 2 === 0
            ? 'X'
            : 'O';

        td.innerHTML = current_mark;
        $(td).addClass(current_mark);
        data[row + '' + column] = current_mark;

        moves++;

        setTimeout(function() {
            if (didWin(current_mark)) {
                alert(current_mark + ' vince la partita!');
                scores[current_mark]++;
                updateScoreboard();
                empty();
            } else if (moves === Math.pow(grid_size, 2)) {
                alert("Pareggio!");
                empty();
            }
        }, 0);

    }

    function didWin(mark) {

        var vertical_count = 0,
            horizontal_count = 0,
            right_to_left_count = 0,
            left_to_right_count = 0;

        for (var i = 0; i < grid_size; i++) {

            vertical_count = 0;
            horizontal_count = 0;

            for (var j = 0; j < grid_size; j++) {

                if (data[i + '' + j] == mark) {
                    horizontal_count++;
                }

                if (data[j + '' + i] == mark) {
                    vertical_count++;
                }

            }

            if (data[i + '' + i] == mark) {
                left_to_right_count++;
            }

            if (data[(grid_size - 1 - i) + '' + i] == mark) {
                right_to_left_count++;
            }

            if (horizontal_count == grid_size || vertical_count == grid_size) {
                return true;
            }

        }

        if (left_to_right_count == grid_size || right_to_left_count == grid_size) {
            return true;
        }

        return false;
    }

    function empty() {
        moves = 0;
        paint();
        data = {};
    }

    function init() {
        empty();
        scores = {
            X: 0,
            O: 0
        };
        updateScoreboard();
    }

    function updateScoreboard() {
        score_X.innerHTML = scores.X;
        score_O.innerHTML = scores.O;
    }

}

TicTacToe('.game-panel');

[fede220]

ciao @KillerWorm ho risolto con jQuery il problema della pagina.

[KillerWorm]

Ciao, scusami se non ho risposto ma avevo proprio perso di vista questa discussione.

Se hai comunque risolto mi fa piacere.
Fai sapere se ti serve ulteriore aiuto.