Hacer que loop funcione en mi script

Básicamente, quiero que este ciclo produzca espacios aleatorios en una cuadrícula que estoy desarrollando, pero no puedo hacer que funcione en mi script.

Tengo el ciclo correcto, simplemente no puedo hacer que funcione con el resto de mi secuencia de comandos.

Acabo de editar y sigue sin funcionar, ¿alguna otra idea?

   var listOfWords = {};

var ul = document.getElementById("wordlist");

var i;
for(i = 0; i < ul.children.length; ++i){
   listOfWords[ul.children[i].getAttribute("data-word")] = {
         "pic" : ul.children[i].getAttribute("data-pic"),
         "audio" : ul.children[i].getAttribute("data-audio")
   };
} 

console.log(listOfWords);

var chosenWords = new Array();

      for(var x = 0; x < 6; x++)
    {
        var rand = Math.floor(Math.random() * (listOfWords.length+1));
        chosenWords.push(listOfWords[rand]);
         if (chosenWords.length < 12){
                    chosenWords.push('  ');   
          }

    }

var shuffledWords = Object.keys(listOfWords).slice(0).sort(function() {
    return 0.5 - Math.random();
}).slice(0, 6);
var guesses = {};
console.log(shuffledWords);
var tbl = document.createElement('table');
tbl.className = 'tablestyle';
 var wordsPerRow = 2;

for (var i = 0; i < Object.keys(shuffledWords).length - 1; i += wordsPerRow) {
    var row = document.createElement('tr');

    for (var j = i; j < i + wordsPerRow; ++j) {
        var word = shuffledWords[j];
        guesses[word] = [];

        for (var k = 0; k < word.length; ++k) {
            var cell = document.createElement('td');


            $(cell).addClass('drop').attr('data-word', word);
            cell.textContent = word[k];

            row.appendChild(cell);
           }
    }
    tbl.appendChild(row);
}

document.body.appendChild(tbl);

Muchas Gracias

preguntado el 31 de julio de 12 a las 10:07

¿Hay algún error o advertencia? -

Firebug no puede encontrar nada malo @Liam McCann -

2 Respuestas

Espero que esto te ayude:

var listOfWords = [];

var ul = document.getElementById("wordlist");

var i;
for(i = 0; i < ul.children.length; ++i){

   listOfWords.push({
         "name"   : ul.children[i].getAttribute("data-word"),
         "pic"    : ul.children[i].getAttribute("data-pic"),
         "audio"  : ul.children[i].getAttribute("data-audio")
   });

    console.log(listOfWords);
}

console.log(listOfWords);

var chosenWords = [];
var cpy_list = listOfWords.slice();

      for(var x = 0; x < 6; x++)
    {
        var rand = Math.floor(Math.random() * (cpy_list.length));
        console.log('push ' + cpy_list[rand].name);
        chosenWords.push(cpy_list[rand].name);
        cpy_list.splice(rand,1);
        console.log(cpy_list);  
        if (chosenWords.length < 12){
            console.log('make a blanck' );
                    chosenWords.push('   ');   
          }

    }

console.log(chosenWords);
var shuffledWords = [];
 shuffledWords = chosenWords.sort(function() { return 0.5 - Math.random() });

var guesses = {};
console.log(shuffledWords);
var tbl = document.createElement('table');
tbl.className = 'tablestyle';
var wordsPerRow = 2;

for (var i = 0; i < shuffledWords.length - 1; i += wordsPerRow) {

    var row = document.createElement('tr');
    console.log(shuffledWords);
    for (var j = i; j < i + wordsPerRow; ++j) {
        var word = shuffledWords[j];
        console.log(j);
        console.log(word);
        guesses[word] = [];

        for (var k = 0; k < word.length; ++k) {
            var cell = document.createElement('td');


            $(cell).addClass('drop').attr('data-word', word);
            cell.textContent = word[k];

            row.appendChild(cell);
        }
    }
    tbl.appendChild(row);
}

document.body.appendChild(tbl);

$('#pickNext').click(function() {
    // remove the class from all td's
    $('td').removeClass('spellword');
    // pick a random word
    rndWord = Math.floor(Math.random() * (listOfWords.length));
    // apply class to all cells containing a letter from that word
    $('td[data-word="' + listOfWords[rndWord].name + '"]').addClass('spellword');
});



$('.drag').draggable({

    helper: 'clone',
    snap: '.drop',
    grid: [60, 60],
    revert: 'invalid',
    snapMode: 'corner'
});


$('.drop').droppable ({
    drop: function(event, ui) {
        word = $(this).data('word');

        guesses[word].push($(ui.draggable).attr('data-letter'));
        console.log($(event));
        console.log($(ui.draggable).text());

        console.log('CHECKING : ' + $(this).text() + ' against ' + $(ui.draggable).text().trim());


        if ($(this).text() == $(ui.draggable).text().trim()) {

            $(this).addClass('wordglow3');
        } else {
            $(this).addClass('wordglow');
        }
        console.log('CHECKING : ' + $(this).text() + ' against ' + $(ui.draggable).text().trim());


        console.log(guesses);

        if (guesses[word].length == 3) {
            if (guesses[word].join('') == word) {
                $('td[data-word=' + word + ']').addClass('wordglow2');

            } else {
                $('td[data-word=' + word + ']').addClass("wordglow4");
                guesses[word].splice(0, guesses[word].length);
            }
        }






    },


    activate: function(event, ui) {
        word = $(this).data('word');

        // try to remove the class
        $('td[data-word=' + word + ']').removeClass('wordglow').removeClass('wordglow4').removeClass('wordglow3');
    }


});

$(".minibutton").hover(function (){
        $(this).css("text-decoration", "underline");
    },function(){
        $(this).css("text-decoration", "none");
    }
);


$(".minibutton2").hover(function (){
        $(this).css("text-decoration", "underline");
    },function(){
        $(this).css("text-decoration", "none");
    }
);


var audio = $("#mysoundclip")[0];
$("button").click(function() {
    var noExist = $('td[data-word=' + listOfWords[rndWord].name + ']').hasClass('wordglow2');
    if (noExist) {
        $('#pickNext').click();
    } else {

        $("#mysoundclip").attr('src', listOfWords[rndWord].audio);
        audio.play();
    }
});

var audio = $("#mysoundclip")[0];
$("button2").click(function() {
    var noExist = $('td[data-word=' +  listOfWords[rndWord].name + ']').hasClass('wordglow2');
    if (noExist) {
        $('#pickNext').click();
    } else {

        $("#mysoundclip").attr('src',  listOfWords[rndWord].audio);
        audio.play();
    }
});

var pic = $("#mypic")[0];
$("button").click(function() {
    var noExist = $('td[data-word=' +  listOfWords[rndWord].name + ']').hasClass('wordglow2');
    if (noExist) {
        $('#pickNext').click();
    } else {

        pic = $("#mypic").attr('src',  listOfWords[rndWord].pic);
        pic.show();
    }
});


function keys(obj) {
    var keys = [];
    for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
            keys.push(key);
        }
    }
    return keys;
}

Respondido 31 Jul 12, 14:07

Muchas gracias, pero el problema es que no muestra imágenes ni emite sonidos cuando se presiona el botón "siguiente", algunos de los espacios en blanco no se llenan con el color de fondo y las palabras se repiten en la cuadrícula. @cedric.salaun - sMilbz

He actualizado mi código. corrección de: - algunos de los espacios en blanco no se llenan con el color de fondo y las palabras se repiten en la cuadrícula. prueba en jsfiddle - cedric

Gracias @cedric.salaun, ¿alguna idea de cómo detener el botón "siguiente" resaltando los espacios vacíos? - sMilbz

Primero debes cambiar:

 If(chosenWords.length < 12){

a:

 if (chosenWords.length < 12) {

y:

 chosenWords.push(“  ”);  

a:

 chosenWords.push(' ');  

y defina la variable palabraselegidas.

Respondido 31 Jul 12, 11:07

te olvidas ';' en la línea 'var conjeturas = {}' y todavía tiene 'Si' en lugar de 'si' - cedric

Todavía no funciona. Mirar... jsfiddle.net/smilburn/bEYJH/28 Se supone que debe hacer una cuadrícula de 6x6: mitad espacio vacío y mitad palabras con sonidos e imágenes vinculados. @cedric.salaun - sMilbz

tratas listOfWords como una lista pero es un objeto. - cedric

Perfecto, muy apreciado. Te votaré cuando llegue a los 15 - sMilbz

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.