My code does not recognize the SCRIPT

Asked

Viewed 99 times

0

I am creating an online wallet to learn and I have a problem, I wanted to format my INPUT with a Coin mask and from what I saw Jquery is a good option. I saw a tutorial (in this case: http://blog.conradosaud.com.br/artigo/26) but it’s not working in my code..

body {

   margin: 0px;
}

#navbar {
	position: absolute;
	top: 165px;
	width: 100%;
	height: 35px;
	background-color: #59b210;
}

#coluna {

	margin-top: 30px;
}

#coluna1 {

	height: auto;
}

#coluna2 {
	
	height: auto;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
	<meta charset="UTF-8">
	<title>Menu</title>
	<link rel="stylesheet" href="css.css">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<!-- SCRIPT MASCARA $$ -->
	<script src="https://igorescobar.github.io/jQuery-Mask-Plugin/js/jquery.mask.min.js"></script>           

	<script type="text/javascript">
		
		$('.telefone').mask('(00) 0 0000-0000');
		$('.dinheiro').mask('#.##0,00', {reverse: true});
		$('.estado').mask('AA');
        
	</script>


</head>
<body>

	<div id="coluna">
		<div class="container">
			<div class="row">
				<div class="col">
					<div class="p-3 mb-2 bg-primary text-white"><h2>
						<p class="text-center"> NOME </p>
					</div>
					<h2>
				</div>
				<div class="col">
					<div class="p-3 mb-2 bg-danger text-white"><h2>
						<p class="text-center"> NOME	 </p>
					</div>
			</div>
		</div>
	</div>

	
	<div class="container">
		<div class="row">
			<div class="col">
				<h6>
					<p class="text-center"> Gastos Mensais</p>
				</h6>
			</div>
			
			<div class="col">
				<h6>
					<p class="text-center"> Gastos Mensais</p>
				</h1>
			</div>
		</div>
	</div>



<div class="container">
	<div class="row">
		<div id="coluna1" class="col">	
			
				<p class="text-center">Semana 1 <label for="dinheiro">R$</label> <input type="text" id="dinheiro" name="dinheiro" style="display:inline-block" />
				<p class="text-center">Semana 2 <label for="dinheiro">R$</label> <input type="text" id="dinheiro" name="dinheiro" style="display:inline-block" />
				<p class="text-center">Semana 3 <label for="dinheiro">R$</label> <input type="text" id="dinheiro" name="dinheiro" style="display:inline-block" />
				<p class="text-center">Semana 4 <label for="dinheiro">R$</label> <input type="text" id="dinheiro" name="dinheiro" style="display:inline-block" />
				<p class="text-center">Semana 5 <label for="dinheiro">R$</label> <input type="text" id="dinheiro" name="dinheiro" style="display:inline-block" />
		</div>
		
		<div id="coluna2" class="col">
				<p class="text-center">Semana 1 <label for="dinheiro">R$</label> <input type="text" id="dinheiro" name="dinheiro" style="display:inline-block" />
				<p class="text-center">Semana 2 <label for="dinheiro">R$</label> <input type="text" id="dinheiro" name="dinheiro" style="display:inline-block" />
				<p class="text-center">Semana 3 <label for="dinheiro">R$</label> <input type="text" id="dinheiro" name="dinheiro" style="display:inline-block" />
				<p class="text-center">Semana 4 <label for="dinheiro">R$</label> <input type="text" id="dinheiro" name="dinheiro" style="display:inline-block" />
				<p class="text-center">Semana 5 <label for="dinheiro">R$</label> <input type="text" id="dinheiro" name="dinheiro" style="display:inline-block" />
		</div>
	</div>
</div>
</body>
</html>

html jquery input

  • Good afternoon, look at this lib here I use it and very simple to use. https://igorescobar.github.io/jQuery-Mask-Plugin/#examples follows a functional example https://gist.github.com/amadeujunior18/d793bb5b3a656c86ca1e3cee43e3bd5e

3 answers

1


Have trouble with your code.

  1. you are searching for the library directly from the repository.

  2. all your inputs are with the same id.

  3. your startup code is running before the page is loaded.

The problem of searching for the library directly from the repository implies that the repository is a development environment where the possibilities of the author of the library to make changes to the code and this becomes incompatible with its page or the author to remove the code are possibilities royal. So not to incur these possibilities or copy the desirable code to your server and reference that copy or use a content delivery service CDN(Content Delivery Network). In case I used a CDN: 

<script 
   src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js">
</script>

The problem with the ids is a serious thing. The global attribute id defines an identifier that should be unique throughout the document. Its purpose is to identify the element by linking the script or stylization application. To fix the problem I removed all the ids and applied the same attribute class="dinheiro" to dodos their <inputs>:

<input type="text" class="dinheiro" name="dinheiro" style="display:inline-block" />

Its boot code was firing before any visual content of the page was uploaded. To solve I put the startup code inside the event ready which specifies a feature to be executed when the DOM is fully charged.

<script type="text/javascript">
  $(document).ready(function() {
      $('.telefone').mask('(00) 0 0000-0000');
      $('.dinheiro').mask('#.##0,00', {
        reverse: true
      });
      $('.estado').mask('AA');
  });
</script>

Your code with the repairs:

body {
  margin: 0px;
}

#navbar {
  position: absolute;
  top: 165px;
  width: 100%;
  height: 35px;
  background-color: #59b210;
}

#coluna {
  margin-top: 30px;
}

#coluna1 {
  height: auto;
}

#coluna2 {
  height: auto;
}
<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <title>Menu</title>
  <link rel="stylesheet" href="css.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

  <!-- SCRIPT MASCARA $$ -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>

  <script type="text/javascript">
    $(document).ready(function() {
      $('.telefone').mask('(00) 0 0000-0000');
      $('.dinheiro').mask('#.##0,00', {
        reverse: true
      });
      $('.estado').mask('AA');
    });
  </script>



</head>

<body>

  <div id="coluna">
    <div class="container">
      <div class="row">
        <div class="col">
          <div class="p-3 mb-2 bg-primary text-white">
            <h2>
              <p class="text-center"> NOME </p>
          </div>
          <h2>
        </div>
        <div class="col">
          <div class="p-3 mb-2 bg-danger text-white">
            <h2>
              <p class="text-center"> NOME </p>
          </div>
        </div>
      </div>
    </div>


    <div class="container">
      <div class="row">
        <div class="col">
          <h6>
            <p class="text-center"> Gastos Mensais</p>
          </h6>
        </div>

        <div class="col">
          <h6>
            <p class="text-center"> Gastos Mensais</p>
            </h1>
        </div>
      </div>
    </div>



    <div class="container">
      <div class="row">
        <div id="coluna1" class="col">

          <p class="text-center">Semana 1 <label for="dinheiro">R$</label> <input type="text" class="dinheiro" name="dinheiro" style="display:inline-block" />
            <p class="text-center">Semana 2 <label for="dinheiro">R$</label> <input type="text" class="dinheiro" name="dinheiro" style="display:inline-block" />
              <p class="text-center">Semana 3 <label for="dinheiro">R$</label> <input type="text" class="dinheiro" name="dinheiro" style="display:inline-block" />
                <p class="text-center">Semana 4 <label for="dinheiro">R$</label> <input type="text" class="dinheiro" name="dinheiro" style="display:inline-block" />
                  <p class="text-center">Semana 5 <label for="dinheiro">R$</label> <input type="text" class="dinheiro" name="dinheiro" style="display:inline-block" />
        </div>

        <div id="coluna2" class="col">
          <p class="text-center">Semana 1 <label for="dinheiro">R$</label> <input type="text" class="dinheiro" name="dinheiro" style="display:inline-block" />
            <p class="text-center">Semana 2 <label for="dinheiro">R$</label> <input type="text" class="dinheiro" name="dinheiro" style="display:inline-block" />
              <p class="text-center">Semana 3 <label for="dinheiro">R$</label> <input type="text" class="dinheiro" name="dinheiro" style="display:inline-block" />
                <p class="text-center">Semana 4 <label for="dinheiro">R$</label> <input type="text" class="dinheiro" name="dinheiro" style="display:inline-block" />
                  <p class="text-center">Semana 5 <label for="dinheiro">R$</label> <input type="text" class="dinheiro" name="dinheiro" style="display:inline-block" />
        </div>
      </div>
    </div>

</body>

</html>

  • 1

    Perfect Augusto! Thank you very much friend.

0

$(document).ready(function(){ $('.telefone').mask('(00) 0 0000-0000'); $('.dinheiro').mask('#.##0,00', {reverse: true}); $('.estado').mask('AA'); });

I guess I have to load jquery

  • But the script <script src="https://igorescobar.github.io/jQuery-Mask-Plugin/js/jquery.mask.min.js"></script> No longer Load?

0

Configure Jquery to load as soon as the document is ready, as suggested by Amadeu Junior:

<script type="text/javascript">
               /**
                * $(function()), $(document).ready(function() ou 
                * jQuery(document).ready(), sao usados de maneira 
                * intercambiaveis.
                */
                $(function() {
                        $('.telefone').mask('(00) 0 0000-0000');
                        $('.dinheiro').mask('#.##0,00', {reverse: true});
                        $('.estado').mask('AA');
                });

</script>

Then change inputs to use class instead of id:

<p class="text-center">Semana 1 <label for="dinheiro">R$</label> <input type="text" class="dinheiro" name="dinheiro" style="display:inline-block" /

A unique identifier on a page, as suggested, should be only one on the current page. This identifier follows with the adjunct #(sharp/hash) notation.

Now, when you want the effect on more than one element, use the . (dot). Thus, allowing desired element(s) make(m) part of a defined class.

id="dinheiro"

class="dinheiro"

As emphasized in your case, this is a class (.money) that has an effect on your N elements. Therefore, use the class="money" markup to have desired effects on all your inputs that are part of this class, money.

Browser other questions tagged html jquery input

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