Como formato um botton e sua saída em um arquivo style a partir do seguinte arquivo HTML

29 de julho de 2021 6 respostas

ecsmelo 29 de julho de 2021

<!DOCTYPE html>
<html>
  <head>
    <title>Exercício 01</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script>
      function calcularQuadrados() {
        var numeros = document.getElementById('txtNumeros').value
        numeros = numeros.split(',')
        for (i = 0; i < numeros.length; i++) {
          quadrado = parseInt(numeros[i]) * parseInt(numeros[i])
          document.write(
            'O quadrado de ' + numeros[i] + ' é ' + quadrado + '<br>'
          )
        }
      }
    </script>
    <!-- STYLES -->
    <link rel="stylesheet" type= "text/css" href="style.css"
  </head>

  <body>
    Números: <input type="text" id="txtNumeros" />
    <input
      type="button"
      value="Calcular Quadrados!"
      onclick="calcularQuadrados()"
    />
  </body>
</html>

.bt {

  border: 1px solid #25692a;

  border-radius: 4px;

  display: inline-block;

  cursor: pointer;

  font-family: Verdana;

  font-weight: bold;

  font-size: 13px;

  padding: 6px 10px;

  text-decoration: none;

}

6 Respostas

ecsmelo 29 de jul. de 2021

<!DOCTYPE html>
<html>
  <head>
    <title>Exercício 01</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script>
      function calcularQuadrados() {
        var numeros = document.getElementById('txtNumeros').value
        numeros = numeros.split(',')
        for (i = 0; i < numeros.length; i++) {
          quadrado = parseInt(numeros[i]) * parseInt(numeros[i])
          document.write(
            'O quadrado de ' + numeros[i] + ' é ' + quadrado + '<br>'
          )
        }
      }
    </script>
    <!-- STYLES -->
    <link rel="stylesheet" type= "text/css" href="style.css"
  </head>

  <body>
    Números: <input type="text" id="txtNumeros" />
    <button class="bt" onclick="calcularQuadrados()">
      Calcular Quadrados!
    </button>
  </body>
</html>

Lucas_Camara 2 de ago. de 2021

Conseguiu resolver sua dúvida?

ecsmelo 2 de ago. de 2021

Oi Lucas!

Bom dia!
Consegui resolver sim, obrigado…

ecsmelo 2 de ago. de 2021

Agora preciso saber como verificar se existem caracteres em um vetor de números…

Lucas_Camara 2 de ago. de 2021

Segue uma forma de verificar se um valor não é um número:

if (isNaN(x)) {
    return 'Not a Number!';
}

FONTE: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/isNaN

REFERÊNCIA: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/NaN

ecsmelo 2 de ago. de 2021

Boa tarde!
Obrigado!

Criado 29 de julho de 2021

Ultima resposta 2 de ago. de 2021

Respostas 6

Participantes 2

6 Respostas

Topicos relacionados