CODEWITHSUNDEEP
javascript
Carmavals
Carmavals

Reputation: 21

masking and input value with javascript

I have a task that consists in masking the value that the user puts in an input.

So far I have got to validate the number but can not mask it.

What I need is that a number, for example
13589294579294 changes to ########9294.

I have done the functions and they work as you can see I am importing those functions.

The thing is that every time I use the function validator.maskify()
the console says:

Uncaught TypeError: can't assign to property "innerHTML" on "324543": not an object

My Code:

Javascript:

let numero = document.getElementById('numeroTarjeta').value
numero.innerHTML = validator.maskify(numero)
if (validator.isValid(numero) === true) {
    let tarjeta_valida = document.createElement('div')
    tarjeta_valida.setAttribute('div', 'tarjetaValida')
    let div_tarjeta = document.querySelector('.tarjeta')
    div_tarjeta.appendChild(tarjeta_valida)
} else {
    let tarjeta_invalida = document.createElement('div')
    tarjeta_invalida.setAttribute('div', 'tarjetaInvalida')
    let div_tarjeta = document.querySelector('.tarjeta')
    div_tarjeta.appendChild(tarjeta_invalida)
    
}

console.log(numero)

console.log(validator);

HTML:

<section>
      <div class="tarjeta">
        <h4 class="tu-tarjeta">TU TARJETA DE CRÉDITO</h4>
        <span class="compras">COMPRAS</span>
        <br>
        <label for="nuemeroTarjeta">número de tarjeta:</label> <br>
        <input id="numeroTarjeta" type="text" placeholder="Introduce tu numero de tarjeta">
        <button>validar</button>
        <br>
        <span>VENCIMIENTO MM/YY</span>
      </div>
</section>

Upvotes: 0

Views: 248

Answers (2)

Laaouatni Anas
Laaouatni Anas

Reputation: 3788

in the numero variable, you are getting the value

value is the string you get from the input

value isn't the input itself on the DOM

so you need to also add another variable with the DOM element

const numberoEl = document.getElementById('numeroTarjeta'); // <input>
const numero = numeroEl.value;                              // 13589294579294

also in the input don't use type="text",

but use type="tel" or use type="number"

which is good because gives the user a good keyboard,
and saves you from a lot of checking
because with input number we can't insert a letter
and so in javascript, you don't have to check if all numbers match a certain regex.

so with this code, when focusing you will have this correct keyboard automatically.

<input 
  id="numeroTarjeta" 
  type="number" 
  placeholder="Introduce tu numero de tarjeta"
>

enter image description here

Upvotes: 1

islemdev
islemdev

Reputation: 206

in your js script try this

import validator from './validator.js';
//accediendo al input text
let numeroDom = document.getElementById('numeroTarjeta')
let numero = numeroDom.value
numeroDom.innerHTML = validator.maskify(numero)
if (validator.isValid(numero) === true) {
    let tarjeta_valida = document.createElement('div')
    tarjeta_valida.setAttribute('div', 'tarjetaValida')
    let div_tarjeta = document.querySelector('.tarjeta')
    div_tarjeta.appendChild(tarjeta_valida)
} else {
    let tarjeta_invalida = document.createElement('div')
    tarjeta_invalida.setAttribute('div', 'tarjetaInvalida')
    let div_tarjeta = document.querySelector('.tarjeta')
    div_tarjeta.appendChild(tarjeta_invalida)
    
}


console.log(numero)

console.log(validator);

Explainin: getElementById render a dom object which is the html object which you can use with (innerHTML and other features) so you were getting in numero the value of dom, then you want to use with this value (int) the innerHTML so what we did is to get the dom then retreive its value so we put in the dom's html the maskify of its value

i hope this was helpful for you

Upvotes: 1

Related Questions