masking and input value with javascript-CodePudding

I have a task that consists in masking the value that a user puts in a 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 and 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

import validator from './validator.js';
//accediendo al input text
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);

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Tarjeta de crédito válida</title>
  <link rel="shortcut icon" href="#" type="image/x-icon">
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <header >
    <h1 >Aqui puedes validar tu tarjeta</h1>
  </header>
  <main>
    <section>
      <div >
        <h4 >TU TARJETA DE CRÉDITO</h4>
        <span >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>
  </main>
  <footer>

  </footer>
  <script src="index.js" type="module"></script>
</body>

</html>

CodePudding user response：

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

CodePudding user response：

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');
const numero = numeroEl.value;