3

Estou fazendo um jogo bem simples em html e javascript, a ideia é que o usuário coloque o resultado de cada operação, e se estiver certo, aparecer um alert para ele. Eu quis usar tabela pois quero exercitar esse quesito. O programa está quase pronto, porém eu não consigo fazer com que o usuário dê um "submit" para que possa checar se está certo. Eu até tentei usar um submit ali, mas acabei fazendo uma gambiarra que não deu certo. Procurei no google e não achei nada relacionado. Desde já...J.G.

function olosko() {
  var x = document.getElementById("tabela").rows[0].cells[4];
  var y = document.getElementById("tabela").rows[1].cells[4];
  var z = document.getElementById("tabela").rows[2].cells[4];
  var r = document.getElementById("tabela").rows[3].cells[4];
  x.innerHTML = "<input type='text'>";
  y.innerHTML = "<input type='text'>";
  z.innerHTML = "<input type='text'>";
  r.innerHTML = "<input type='text'>";
  var a = document.getElementById("tabela").rows[0].cells[0];
  var b = document.getElementById("tabela").rows[0].cells[2];
  var c = document.getElementById("tabela").rows[1].cells[0];
  var d = document.getElementById("tabela").rows[1].cells[2];
  var e = document.getElementById("tabela").rows[2].cells[0];
  var f = document.getElementById("tabela").rows[2].cells[2];
  var g = document.getElementById("tabela").rows[3].cells[0];
  var h = document.getElementById("tabela").rows[3].cells[2];

  a.innerHTML = parseInt(Math.random()*10);
  b.innerHTML = parseInt(Math.random()*10);
  c.innerHTML = parseInt(Math.random()*10);
  d.innerHTML = parseInt(Math.random()*10);
  e.innerHTML = parseInt(Math.random()*10);
  f.innerHTML = parseInt(Math.random()*10);
  g.innerHTML = parseInt(Math.random()*10);
  h.innerHTML = parseInt(Math.random()*10);

  if(a+b==x && c-d==y && e/f==z && g*h==r){
    alert("VC GANHOU!");
  }
}
<button onclick="olosko()">ESTOU PRONTO!</button>
<table id="tabela" border=1 width=400 height=400>
  <tr>
    <td></td>
    <td>+</td>
    <td></td>
    <td>=</td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td>-</td>
    <td></td>
    <td>=</td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td>รท</td>
    <td></td>
    <td>=</td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td>X</td>
    <td></td>
    <td>=</td>
    <td><div id="olosko()"></div></td>
  </tr>
</table>
<submit><button>ACABEI!</button></submit>

3
  • acho que não ficou claro o que esse submit vai fazer, vai ser um botão ? ou uma mensagem com um submit ? quando ela vai ocorrer, após preencher todos campos ? Commented 21/09/2015 às 19:29
  • Bem, esse botão vai ser para o usuário clicar após preencher a tabela. Ele vai clicar nesta para checar se as respostas estão corretas, caso estejam, aparecer um 'alert' dizendo isto, caso contrário, também aparece um alert dizendo que está errado. Commented 21/09/2015 às 19:44
  • pra submeter dados você precisa de um formulário. O HTML que você postou não tem formulário.
    – MFedatto
    Commented 22/09/2015 às 21:27

3 Respostas 3

6

Você pode usar JavaScript puro para resolver seu problema por ser muito simples.

Exemplo:

document.getElementById("myForm").submit();

Com botão:

<a href="#" onclick="document.getElementById('myForm').submit()">Submit Form</a>
7
  • Eduardo Binotto, vc poderia ver no meu código se está correta a condição? Pois mesmo com esse submit que me enviou, não consigo fazê-lo. Creio que esteja errada a minha condição, então se vc puder olhar, agradeço! Commented 21/09/2015 às 19:51
  • 1
    Coloque um form por fora da sua table, ou seja, coloque sua table dentro de um forma para que você possa dar o submit Commented 21/09/2015 às 19:55
  • Acabo de fazer isso, o resultado é o mesmo. A condição é que me parece ser o problema. Pois eu acho que teria que criar uma função para que variáveis recebam o valor colocado pelo usuário, mas não sei como fazer isso. Desculpa o incômodo, mas é que preciso disso até hj de noite. Commented 21/09/2015 às 20:03
  • Posso saber o motivo de você querer dar um submit. Quem sabe temos uma outra saída para seu problema. Commented 21/09/2015 às 20:20
  • Na verdade eu não quero especificamente o submit. Só quero que o programa diga se o usuário acertou ou não. A única maneira possível que pensei foi justamente no submit. Se tiver outro jeito, seria muito bom! Commented 21/09/2015 às 20:24
2

Fiz algumas modificações no seu código, usei JavaScript puro como você.

var x;
var a, b;

function olosko() {
  a = document.getElementById("tabela").rows[0].cells[0];
  b = document.getElementById("tabela").rows[0].cells[2];
  x = document.getElementById("tabela").rows[0].cells[4];
  x.innerHTML = "<input id='val' type='text' />";

  a.innerHTML = parseInt(Math.random() * 10);
  b.innerHTML = parseInt(Math.random() * 10);
}

Nesta parte de JavaScript, primeiramente eu declarei as variaveis "a, b e x" como globais para serem usadas em duas funções. Segue as linhas abaixos para explicação:

a = document.getElementById("tabela").rows[0].cells[0];
a.innerHTML = parseInt(Math.random() * 10);

Você usou a mesma variável para criar uma coluna na sua tabela, e para gerar um número aleatório, até ai tudo bem, mas faltou você atribuir o numero aleatório gerado para alguma variável, não fazendo isso, a variável "a" irá receber um objeto, que será "HTMLTableCellElement". Veja agora o que fiz na parte de HTML.

<button onclick="olosko()">ESTOU PRONTO!</button>
<table id="tabela" border=1 width=auto height=auto>
    <tr>
        <td id="a"></td>
        <td>+</td>
        <td id="b"></td>
        <td>=</td>
        <td><div id="olosko()"></div></td>
    </tr>
</table>
<button onclick="enviar()">ACABEI!</button>

Eu criei um "id" para as colunas que recebem o número aleatório, para depois por JavaScript, pegar os números para criar uma condição e uma ação no botão "ACABEI!", para chamar a função enviar() que fará a atribuição dos números aleatórios a uma variável.

function enviar() {
    a = parseInt(document.getElementById("a").innerHTML);
    b = parseInt(document.getElementById("b").innerHTML);
    x = document.getElementById("val").value;

    if (a + b == x) {
        alert("VC GANHOU!");
    } else {
        alert("VC PERDEU!");
    }
}

Repare bem nesta linha:

a = parseInt(document.getElementById("a").innerHTML);

É aqui, que o número aleatório vai ser atribuído as variáveis, e vai substituir os objetos que foram atribuídos anteriormente, o "parseInt" teve que ser usado pois o número aleatório era uma "String" então foi preciso fazer uma conversão para Number, diferente da atribuição da variável "x" logo acima. Sobre a condição não tem o que explicar é o mais simples.

Espero que ajude, comecei a estudar JavaScript a pouco tempo, qualquer dúvida estou a disposição.

0

Com o uso do JQuery é mais confiável , para que rode tranquilo em todos navegadores.

  $("#nome-do-meu-form").submit(function() {
                //alguma ação aqui ex :
                $("#btn").prop('disabled', true);
  });
5
  • Evite usar jQuery inadvertidamente. Todo JavaScript é bloqueante e o jQuery faz uma série de validações e considerações desnecessárias nesse caso.
    – MFedatto
    Commented 22/09/2015 às 21:30
  • eu não acho do jeito que ele fez o script dele não rodará de boa em todos navegadores Commented 23/09/2015 às 12:40
  • Não vai rodar porque ele está criando elementos por string com innerHTML. Se utilizar createElement() e getElementById() pra selecionar o form não tem erro.
    – MFedatto
    Commented 23/09/2015 às 13:12
  • Como sou aluno do 1º ano de Informática do CEFET(ensino médio/técnico), meus conhecimentos são MUITO limitados. Por isso tenho dificuldade de aplicar as ideias que tenho a programação, já aconteceu uma vez de eu ter uma ideia de um programa em C e qnd me dei conta, tinham quase 500 linhas de código e não funcionou hehe. Mas obrigado, esse joguinho eu fiz pra minha irmã que tem dificuldade em matemática, para que ela pudesse aprender de uma forma legal. Eu ainda não tive como testar o seu código, pois estou em período de provas, mas assim que puder, testarei! Commented 4/10/2015 às 23:50
  • boa iniciativa @J.Gaidzinski Commented 5/10/2015 às 12:15

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .