Jump to content
Dallas20

Como manipular a tag button do HTML utilizando class javascript ?

Recommended Posts

Então pessoal,  estou fazendo um pequeno projeto para me aperfeiçoar em javascript e acabei me deparando com o seguinte problema. Eu queria pegar o valor de um input quando o usuário desse um click em um botão e isso foi simples de fazer, porém ao utilizar conceitos de POO e aplicando classes no javascript não consigo fazer essa ação. Gostaria de saber se isso é possível? E como fazer?

 

Segue o code HTML:

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8"/>
    <meta name="author" content="Dallas">
    <meta http-equiv="refresh" content="1"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="../CSS/withdrawal.css" rel="stylesheet">
    <script src="../javascript/withdrawal.js"></script>
    <title>Banco do Brasil</title>
	</head>
	<body>
        <h1>Quanto deseja sacar ?</h1>
        <input type="number" id="cashInReal">
        <button type="button" onclick="alter()"> AQUI</button> 
	</body>
</html>

code javascript:

class withdrawal
{
	alter()
  	{
		alert(document.getElementById('cashInReal').value);
	}
}

Desde já muito obrigado.

 

Att. Dallas

Share this post


Link to post
Share on other sites

fiz algumas alterações para ficar mais fácil de visualizar:

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <meta name="author" content="Dallas">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Banco do Brasil</title>
    </head>
    <body>
        <input type="number" id="cashInReal">
        <button type="button" id="button"> AQUI</button> 
        <script>

            class withdrawal {
                alter() {
                    alert(document.getElementById("cashInReal").value);
                }
            }


            objwithdrawal = new withdrawal();

            document.getElementById("button").onclick = function () {
                objwithdrawal.alter();
            };
        </script>
    </body>
</html>

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By daviassumpcao
      Estou buscando uma orientação ou referência para desenvolver algo similar ao formulário dessa página do iPhone https://www.apple.com/shop/buy-iphone/iphone-se ... quando selecionamos alguma opção, a div que contém o formulário centralizar na página e rola feito um carrossel. Estou completamente perdido com essa demanda que recebi... agradeço antecipadamente a todos que derem uma força. Abraço
    • By Alberto Nascimento
      Como faço que consiga colocar parágrafos no campo tipo "text" do formulário?
          <input name="Text1" style="width: 528px; height: 223px" type="text" /></form>
      Se eu pressiono ENTER automaticamente envia o formulário
      Como então consigo digitar ao preencher o formulário da forma abaixo?
       
    • By quimera
      O problema seria simples se o script da página permitisse o autopreenchimento usando javascript, masssssssssssss...
      O site em questão não permite que o campo seja preenchido dinamicamente ou seja usando script (ele identifica a digitação do teclado para impedir isso)
      Eles devem usar algo como: onkeypress ou onkeyup e acumular os valores digitados numa variável para dispor isso no post/get
      Por que nesse caso, se foi simplesmente colado ou preenchido via script não vai aceitar já que provavelmente é acumulativo e não verificado se o campo foi preenchido.
      Então como preencher dinamicamente o campo usando javascript nesse caso?
    • By AndersonWS
      Boa tarde, já tentei muitas formas mas não consigo retirar o atributo required.
      O resultado que eu preciso é, quando retiro o required de um (name="posicao") o outro fica com required e vice-versa e também um aparece e outro some.
       
      Segue o código HTML.
      <select name="posicao" class="form-control option_escolhida" style="display:none" id="2" required="" disabled> <option value="" selected>Selecione</option> <option value="1">Espaco</option> <option value="2">Cursos</option> </select> <select name="posicao" class="form-control option_escolhida" style="display:none" id="4" required="" disabled> <option value="" selected>Selecione</option> <option value="4">Políticas de privacidade</option> </select> <div class="sem_option"><code>Sem posição definida</code></div> <div class="ini_option"><code>Posição inicial</code></div> <div class="main_option" style="display:none"> <input name="apelido" class="form-control apelido" placeholder="Nome do grupo" type="text" required="" disabled> </div> Segue o código javascrpt:
      $('.select_escolhida').on({change: listChildren}).trigger('change'); function listChildren() { if ( $(this).val() != '' ) { children = $('option').val(); $(".ini_option").show(); $(".option_escolhida").hide(); $(".option_escolhida").attr("disabled", true); $("#" + $(this).val() ).show(); $("#" + $(this).val() ).removeAttr("disabled"); $(".sem_option").hide(); if( ($(this).val() == '1')||($(this).val() == '3') ){ $(".main_option").show(); $(".apelido").removeAttr("disabled"); } else { $(".main_option").hide(); $(".apelido").attr("disabled", true); $(".ini_option").hide(); } } else { $(".sem_option").show(); $(".ini_option").hide(); $(".apelido").hide(); } }  
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.