Javascript Como colocar input em Javascript?

Eli Almeida · 8 de maio

Como colocar input em Javascript para capturar dados dos usuários?

É possível fazer isso utilizando o Node js?

A única maneira de capturar dados do usuário é utilizando o window.prompt?

Como capturar dados no usuário utilizando o Visual studio code? É a mesma coisa para capturar dados no Node js?

UserX_ · 8 de maio

Não, não é só com window.prompt, há outras formas e vai da sua criatividade. Veja esse exemplo aqui que fui melhorando com o tempo:

<!DOCTYPE html>

<html lang="pt-BR">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Gerador de tabuada</title>

</head>

<script>



var initial = 1;

var num = 50;



//___________________________________________________________________________________________________________________




function Tecla(){

    var empty = ""

    var x = document.getElementById("tabuada").innerHTML = empty




var teclaP = event.key;



if(teclaP == "Enter"){



    var getNumber = Number(document.getElementById("Escolha").value);



    for(var i=initial;i<=num;i++){

   



   var resultado = getNumber * i

    var x = document.getElementById("tabuada").style = "display: block"

   

    var y = document.getElementById("tabuada").innerHTML +="<ul><li>"+getNumber+" x "+i+"="+(resultado)    

}



} else {



    var y001 = document.getElementById("tabuada").style ='display: none;';



}




}



  function funcao(){

    var empty = ""

    var x = document.getElementById("tabuada").innerHTML = empty

    var getNumber = Number(document.getElementById("Escolha").value);



    if(getNumber===0){

        window.alert("Nenhum valor foi informado.")



    } else {



    for(var i=initial;i<=num;i++){

   

       var resultado = getNumber * i

        var x = document.getElementById("tabuada").style = "display: block"

        var y = document.getElementById("tabuada").innerHTML +="<ul><li>"+getNumber+" x "+i+"="+(resultado)      

    }  

}



  }




</script>

<style>

    body {



        text-align: center;

        background-image: url("https://i.gifer.com/1kc1.gif");

        background-size: cover;

        color: yellow;



    }

    div {

     

     margin: auto;

     height: auto;

     background-color: gray;

     width: 300px;

     border: 1px solid gray;

     font-family: Verdana;

     line-height: 10px;

position: absolute;

left: 570px;



    }

</style>

<body>

    <h2 id="numeroE" style='margin-left: 70px;'></h2>

    <label for="Escolha" style='font-weight: bold;color: yellowgreen'>Número:

        <input type="number" onkeypress="Tecla()" id="Escolha" style="width: 150px; padding: 10px; border: 2px solid #2575fc; border-radius: 6px; font-size: 16px; text-align: center; outline: none; transition: 0.3s ease;"

        onfocus="this.style.borderColor='#6a11cb'" onblur="this.style.borderColor='#2575fc'">

            <br>

    <br>

    <button id="botao" onclick="funcao()" style="margin-left: 70px;background: linear-gradient(45deg, #ff7e5f, #feb47b); border: none; border-radius: 8px; padding: 12px 20px; color: white; font-size: 16px; font-weight: bold; cursor: pointer; transition: 0.3s ease;">Gerar Tabuada</button>

    <br>

    <br>

    <div style="display: none" id="tabuada">

   



    </div>

</label>

   <script>

    var y = document.getElementById("numeroE").innerHTML = "Gerador de tabuada "+num;  

   </script>

</body>

</html>

Esse código é um gerador de tabuada, mexer nos números de cima reflete lá embaixo. Tem-se initial, num, empty que é vazio, etc.

https://www.youtube.com/watch?v=deSvO6vouM4

Nesse vídeo era só de 10, mas eu coloquei para dizer do número que for colocado em initial, num. Entende?

Swalls · 9 de maio

@Eli Almeida respondendo sua pergunta, não, usar window é errado, você deve aprender html (a DOM e CSS), não é para dominar e sim para saber os conceitos.

Usar métodos como window.prompt() ou alert() é considerado invasivo e não recomendado para aplicações modernas, você aprende isso, por ex, no curso de javascript da cisco, que é o recomendado como preparatorio para certificação oficial do javascript. (o da cisco é gratis)

o mais comum é usar esses básicos:

document.getElementById()
document.getElementsByClassName()
document.getElementsByTagName()
document.querySelector()

se tiver um inglês de nível básico já dá para entender o que eles fazem.

mas há outros também, todos eles retornam o objeto (elemento) e suas propriedades. (você precisa saber OOP e, no caso de js com html, prototipagem)

espero ter ajudado.

Também pode surgir a duvida de como lidar com ações, e para isso eu recomendo você estudar como lidar com eventos e entender o pattern observer.

Entrar

Javascript Como colocar input em Javascript?

Posts recomendados

Eli Almeida

UserX_

Swalls

Crie uma conta ou entre para comentar

Criar uma conta

Entrar

Quem está navegando aqui 0 usuários estão online

Últimos tópicos

Livros

Cursos

Conteúdo recente

Sobre o Clube do Hardware

Direitos autorais

Mais

Fórum

Atividades

Artigos

Análises

Livros

Cursos