How to make a draw of words and letters by clicking the start button?

Asked

Viewed 1,828 times

0

Can someone help me? So I need to do a draw of words that are in the Array and a draw of the lavras of these words, every time the user clicks the start button, that is in the table. Thank you in advance!!

SCRIPT

//chamar no onclick cada div (DEU CERTO O CLICK)
$(document).ready(function() {
  $('div[id^=num]', 'table').click(function() {
    var id = $(this).attr("id");
    //aqui está apresentado o elemento da id
    //alert(document.getElementById(id).innerHMTL);
  });
});
//BIBLIOTECA DE PALAVRAS 
var palavras = new Array();
palavras[0] = "escola";
palavras[1] = "casa";
palavras[2] = "inverno";
palavras[3] = "macaco";
palavras[4] = "estudantes";

alert("Eu sou um alert!");


var p = new Array();

function tempo() {
  setTimeout("tempo()", 1000);
  itempo++;
}
/*
                -------------------
                SORTEIO,
                essa funcao eh chamada
                todas as vezes que o jogador
                iniciar ou terinar a jogada. 
                -------------------  */
var numero = [];
var i;

function numero_aleatorio() {
  while (numero.length < 4) {
    var aleatorio = Math.floor(Math.random() * 100);

    if (numeros.indexoOf(aleatorio) == -1) numero.push(aleatorio);
  }
}
/*-------------------
JOGAR -
inicia uma jogada.
quando o usuario clica em uma das
letras ele irá para a outra coluna */

function jogar(letra) {
  var nome = palavras[iconte].toUpperCase();
  nome.split("");
  var erroSim = 0;
  var coleta = "";
}

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" onclick='teste(this.value)'>

<table border="0">
  <tr>
    <td colspan="15">Dica:</td>
  </tr>

  <tr class="area">
    <td>
      <div id="num1"></div>
    </td>
    <!--UM ID EM TODAS AS DIV'S-->
    <td>
      <div id="num2"></div>
    </td>
    <td>
      <div id="num3"></div>
    </td>
    <td>
      <div id="num4"></div>
    </td>
    <td>
      <div id="num5"></div>
    </td>
    <td>
      <div id="num6"></div>
    </td>
    <td>
      <div id="num7"></div>
    </td>
    <td>
      <div id="num8"></div>
    </td>
    <td>
      <div id="num9"></div>
    </td>
    <td>
      <div id="num10"></div>
    </td>
    <td>
      <div id="num11"></div>
    </td>
    <td>
      <div id="num12"></div>
    </td>
    <td>
      <div id="num13"></div>
    </td>
    <td>
      <div id="num14"></div>
    </td>
    <td>
      <div id="num15"></div>
    </td>
    <td class="tempo">Tempo</td>
    <!-- AQUI SERÁ O CRONOMETRO-->
  </tr>

  <tr class="area">
    <td>
      <div id="num16"></div>
    </td>
    <td>
      <div id="num17"></div>
    </td>
    <td>
      <div id="num18"></div>
    </td>
    <td>
      <div id="num19"></div>
    </td>
    <td>
      <div id="num20"></div>
    </td>
    <td>
      <div id="num21"></div>
    </td>
    <td>
      <div id="num22"></div>
    </td>
    <td>
      <div id="num23"></div>
    </td>
    <td>
      <div id="num24"></div>
    </td>
    <td>
      <div id="num25"></div>
    </td>
    <td>
      <div id="num26"></div>
    </td>
    <td>
      <div id="num27"></div>
    </td>
    <td>
      <div id="num28"></div>
    </td>
    <td>
      <div id="num29"></div>
    </td>
    <td>
      <div id="num30"></div>
    </td>
  </tr>

  <tr class="area">
    <td>
      <div id="num31"></div>
    </td>
    <td>
      <div id="num32"></div>
    </td>
    <td>
      <div id="num33"></div>
    </td>
    <td>
      <div id="num34"></div>
    </td>
    <td>
      <div id="num35"></div>
    </td>
    <td>
      <div id="num36"></div>
    </td>
    <td>
      <div id="num37"></div>
    </td>
    <td>
      <div id="num38"></div>
    </td>
    <td>
      <div id="num39"></div>
    </td>
    <td>
      <div id="num40"></div>
    </td>
    <td>
      <div id="num41"></div>
    </td>
    <td>
      <div id="num42"></div>
    </td>
    <td>
      <div id="num43"></div>
    </td>
    <td>
      <div id="num44"></div>
    </td>
    <td>
      <div id="num45"></div>
    </td>
    <td class="iniciar"> <button>Iniciar</button></td>
    <!-- MELHORAR ESSE BOTÃO E O DE SAIR-->
  </tr>

  <tr class="area">
    <td>
      <div id="num46"></div>
    </td>
    <td>
      <div id="num47"></div>
    </td>
    <td>
      <div id="num48"></div>
    </td>
    <td>
      <div id="num49"></div>
    </td>
    <td>
      <div id="num50"></div>
    </td>
    <td>
      <div id="num51"></div>
    </td>
    <td>
      <div id="num52"></div>
    </td>
    <td>
      <div id="num53"></div>
    </td>
    <td>
      <div id="num54"></div>
    </td>
    <td>
      <div id="num55"></div>
    </td>
    <td>
      <div id="num56"></div>
    </td>
    <td>
      <div id="num57"></div>
    </td>
    <td>
      <div id="num58"></div>
    </td>
    <td>
      <div id="num59"></div>
    </td>
    <td>
      <div id="num60"></div>
    </td>
  </tr>

  <tr class="area">
    <td>
      <div id="num61"></div>
    </td>
    <td>
      <div id="num62"></div>
    </td>
    <td>
      <div id="num63"></div>
    </td>
    <td>
      <div id="num64"></div>
    </td>
    <td>
      <div id="num65"></div>
    </td>
    <td>
      <div id="num66"></div>
    </td>
    <td>
      <div id="num67"></div>
    </td>
    <td>
      <div id="num68"></div>
    </td>
    <td>
      <div id="num69"></div>
    </td>
    <td>
      <div id="num70"></div>
    </td>
    <td>
      <div id="num71"></div>
    </td>
    <td>
      <div id="num72"></div>
    </td>
    <td>
      <div id="num73"></div>
    </td>
    <td>
      <div id="num74"></div>
    </td>
    <td>
      <div id="num75"></div>
    </td>
    <td class="sair"><button>Sair</button></td>
  </tr>

  <tr class="area">
    <td>
      <div id="num76"></div>
    </td>
    <td>
      <div id="num77"></div>
    </td>
    <td>
      <div id="num78"></div>
    </td>
    <td>
      <div id="num79"></div>
    </td>
    <td>
      <div id="num80"></div>
    </td>
    <td>
      <div id="num81"></div>
    </td>
    <td>
      <div id="num82"></div>
    </td>
    <td>
      <div id="num83"></div>
    </td>
    <td>
      <div id="num84"></div>
    </td>
    <td>
      <div id="num85"></div>
    </td>
    <td>
      <div id="num86"></div>
    </td>
    <td>
      <div id="num87"></div>
    </td>
    <td>
      <div id="num88"></div>
    </td>
    <td>
      <div id="num89"></div>
    </td>
    <td>
      <div id="num90"></div>
    </td>
  </tr>

  <tr class="area">
    <td>
      <div id="num91"></div>
    </td>
    <td>
      <div id="num92"></div>
    </td>
    <td>
      <div id="num93"></div>
    </td>
    <td>
      <div id="num94"></div>
    </td>
    <td>
      <div id="num95"></div>
    </td>
    <td>
      <div id="num96"></div>
    </td>
    <td>
      <div id="num97"></div>
    </td>
    <td>
      <div id="num98"></div>
    </td>
    <td>
      <div id="num99"></div>
    </td>
    <td>
      <div id="num100"></div>
    </td>
    <td>
      <div id="num101"></div>
    </td>
    <td>
      <div id="num102"></div>
    </td>
    <td>
      <div id="num103"></div>
    </td>
    <td>
      <div id="num104"></div>
    </td>
    <td>
      <div id="num105"></div>
    </td>
    <td rowspan="4" class="informacoes">Informações: As Letras da palavras, estão embaralhada; Tem 40 segundos para escrever corretamente; O tempo acabou e não conseguiu escrever, perdeu; terminou antes do tempo, mas a palavra está errada, perdeu;</td>
  </tr>

  <tr class="area_perigo">
    <!--NÃO ESTOU CONSEGUINDO TROCAR A COR-->
    <td>
      <div id="num106"></div>
    </td>
    <td>
      <div id="num107"></div>
    </td>
    <td>
      <div id="num108"></div>
    </td>
    <td>
      <div id="num109"></div>
    </td>
    <td>
      <div id="num110"></div>
    </td>
    <td>
      <div id="num111"></div>
    </td>
    <td>
      <div id="num112"></div>
    </td>
    <td>
      <div id="num113"></div>
    </td>
    <td>
      <div id="num114"></div>
    </td>
    <td>
      <div id="num115"></div>
    </td>
    <td>
      <div id="num116"></div>
    </td>
    <td>
      <div id="num117"></div>
    </td>
    <td>
      <div id="num118"></div>
    </td>
    <td>
      <div id="num119"></div>
    </td>
    <td>
      <div id="num120"></div>
    </td>
  </tr>

  <tr class="area_perigo">
    <td>
      <div id="num121"></div>
    </td>
    <td>
      <div id="num122"></div>
    </td>
    <td>
      <div id="num123"></div>
    </td>
    <td>
      <div id="num124"></div>
    </td>
    <td>
      <div id="num125"></div>
    </td>
    <td>
      <div id="num126"></div>
    </td>
    <td>
      <div id="num127"></div>
    </td>
    <td>
      <div id="num128"></div>
    </td>
    <td>
      <div id="num129"></div>
    </td>
    <td>
      <div id="num130"></div>
    </td>
    <td>
      <div id="num131"></div>
    </td>
    <td>
      <div id="num132"></div>
    </td>
    <td>
      <div id="num133"></div>
    </td>
    <td>
      <div id="num134"></div>
    </td>
    <td>
      <div id="num135"></div>
    </td>
  </tr>

  <tr class="area_perigo">
    <td>
      <div id="num136"></div>
    </td>
    <td>
      <div id="num137"></div>
    </td>
    <td>
      <div id="num138"></div>
    </td>
    <td>
      <div id="num139"></div>
    </td>
    <td>
      <div id="num140"></div>
    </td>
    <td>
      <div id="num141"></div>
    </td>
    <td>
      <div id="num142"></div>
    </td>
    <td>
      <div id="num143"></div>
    </td>
    <td>
      <div id="num144"></div>
    </td>
    <td>
      <div id="num145"></div>
    </td>
    <td>
      <div id="num146"></div>
    </td>
    <td>
      <div id="num147"></div>
    </td>
    <td>
      <div id="num148"></div>
    </td>
    <td>
      <div id="num149"></div>
    </td>
    <td>
      <div id="num150"></div>
    </td>
  </tr>

  <tr>
    <td colspan="10">Respostas: </td>
  </tr>
</table>

</body>

</html>
javascript html array

  • what would be a ploy of word?

  • What is the expected input and output?

  • something else is called a wrong method indexoOf, within the number-random Function

  • Was any of the answer helpful? Don’t forget to choose one and mark it so it can be used if someone has a similar question!

2 answers

1

You can use the function Math.random to select a random value based on the total size of the array/String. In the example below I used only one function to select random values:

const randomizar = opcoes => opcoes[Math.floor(Math.random() * opcoes.length)];

const embaralhar = (opcoes) => {
  return opcoes
    .split('')
    .map((a) => ({ sort: Math.random(), value: a }))
    .sort((a, b) => a.sort - b.sort)
    .map(a => a.value)
    .join('');
};

// Utilização

const palavras = ['escola', 'casa', 'inverno', 'macaco', 'estudantes'];

const palavra = randomizar(palavras);
const letra = randomizar(palavra);
const embaralhado = embaralhar(palavra);

console.log('palavra', palavra);
console.log('letra', letra);
console.log('embaralhado', embaralhado);

I also added a function that scrambles the letters of a word.

  • Thank you very much!

-2

So friend, I always do some tests of this kind there. I do it this way:

function sorteando(){
   let palavras = ["escola","casa","inverno","macaco","estudantes"]; 
   let sorteio = Math.floor(Math.random()*palavras.length);
   console.log(palavras[sorteio]); 
}

var botao = document.getElementById("sortear");
botao.addEventListener("click",sorteando);
<button id="sortear">Sortear</button>

So you will draw one of the words in the array. Well I understood that this is what you wanted to do. Good luck!

Browser other questions tagged javascript html array

You are not signed in. Login or sign up in order to post.