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

Asked

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>

javascript validation

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

  • no , from the tbm error, I think it’s in html

  • https://codepen.io/valdeir2000/pen/YzGYVLb

  • 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

  • Uncaught Referenceerror: click is not defined ta giving this in the after click

  • This means you need to implement the function clique. Post your code on the Pastebin

Show 1 more comment

1 answer

0

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>

  • input type number returns a string ?? so we have q uses number?

  • How it was an input that caught number from 1 to 100 then I preset the input with type="number", because then it will only accept number and not string. If you prefer you can change the input to accept String, Number, Date and etc.. This link that will go to MDN shows the types that the input accepts: link @Vitorsantos

Browser other questions tagged javascript validation

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