How to make a table that only accepts number 1 to 100?

Question

How to make a table that only accepts number 1 to 100?

Asked 3 years, 6 months ago

Viewed 71 times

0

I started now in programming and I’m in trouble. I’m trying to make a table that only accepts numbers from 1 to 100, but this giving errors

var num = document.getElementById("caixaNum")
var tab = document.getElementById("tab")
var res = document.getElementById("res")

function clique() {
  if (Number(num) >= 1 && Number(num) <= 100) {
    window.alert('ok')
  } else {
    window.alert('error')
  }
}

<header>
  <h1>Numeros</h1>
</header>

<section>
  <div> <strong>Numeros Para Tab (entre 1 - 100):</strong>
    <input type="number" name="caixa" id="caixaNum"><input type="button" value="numeros" onclick="clique()">
    <br><br>
    <select name="tabnu" id="tab"></select> <br><br>
    <input id='fina' type="button" value="Finalizar">
  </div>
  <div id='res'></div>
</section>


<footer>
  <p>&copy;CursoemVideo</p>
</footer>

You are passing an element to the function Number. The correct is to pass only the value: Number(num.value).

– Valdeir Psr

2020/12/25 at 13:53
no , from the tbm error, I think it’s in html

– Vitor Santos

2020/12/27 at 21:36
https://codepen.io/valdeir2000/pen/YzGYVLb

– Valdeir Psr

2020/12/28 at 15:44
n is going to give error in the input, but I saw that your code is right . must be something in the settings of my pc, vlw msm like this

– Vitor Santos

2020/12/29 at 16:35
Uncaught Referenceerror: click is not defined ta giving this in the after click

– Vitor Santos

2020/12/29 at 16:44
This means you need to implement the function clique. Post your code on the Pastebin

– Valdeir Psr

2020/12/29 at 22:21

Show 1 more comment

1 answer

Browser other questions tagged javascript validation

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

by Matheus França • 53 points · Answer 1 · 2020-12-25T13:32:07+00:00

I believe your error was in the &&(E) operator instead of ||(OR). I made a practical example to show you better.

I separated the files so the elements are in a file html and the JS is in another file that I imported as you can see on <script src="./index.js"></script>.

HTML

<header>
      <h1>Número</h1>
    </header>

    <main>
      <!-- Um formulário com atributo "novalidate" para o formulário não se dar submit automaticamente -->
      <form id="calculo" novalidate>
        <input
          type="number"
          id="numberId"
          placeholder="Coloque um número entre 1 e 100."
        />
        <button type="submit">Verificar</button>
      </form>
    </main>

    <script src="./index.js"></script>

JS file where the magic rolls, here I took the ids of the elements and assigns to a constant with the same name to facilitate and then when you click the "check" button it will perform this function.

// Pegand o id dos elementos
const calculo = document.getElementById("calculo");
const numberId = document.getElementById("numberId");

// Uma função de submit para validar se o número é menor que 1 ou maior que 100
calculo.onsubmit = (event) => {
  event.preventDefault();

  if (numberId.value < 1 || numberId.value > 100) {
    alert("Número invalido!");
    // Se o número não corresponder com o valor posto ele retorna false
    return false;
  }

  // Depois do número validado ele limpa o value do input
  numberId.value = "";
};

I put the code here so you can see in real time it running, just click on execute.

// Pegand o id dos elementos
const calculo = document.getElementById("calculo");
const numberId = document.getElementById("numberId");

// Uma função de submit para validar se o número é menor que 1 ou maior que 100
calculo.onsubmit = (event) => {
  event.preventDefault();

  if (numberId.value < 1 || numberId.value > 100) {
    alert("Número invalido!");
    // Se o número não corresponder com o valor posto ele retorna false
    return false;
  }

  // Depois do número validado ele limpa o value do input
  numberId.value = "";
};

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Número</title>
  </head>
  <body>
    <header>
      <h1>Número</h1>
    </header>

    <main>
      <!-- Um formulário com atributo "novalidate" para o formulário não se dar submit automaticamente -->
      <form id="calculo" novalidate>
        <input
          type="number"
          id="numberId"
          placeholder="Coloque um número entre 1 e 100."
        />
        <button type="submit">Verificar</button>
      </form>
    </main>

    <script src="./index.js"></script>
  </body>
</html>