Skip to main content
texto aperfeiçoado.
Fonte Link

A propriedade innerHTML é para modificar o html que fica dentro de uma tag. O valor de um input fica em value e não em innerHTML, por isso não está conseguindo mudar.

Outra coisa, você não tem classes .cc-number e .cc-flag, mas sim ids. Então, no seu seletor, você deve colocar # no lugar de ..

Segue o exemplo:

var input = document.querySelector('input#cc-number')
var result = document.querySelector('input#cc-flag')

input.addEventListener('change', onInputChange)
input.addEventListener('input', onInputChange)

function onInputChange (e) {
  var cards = CardType.cardType(e.target.value;value)
  result.value = cards;cards
}
<div class="form-group">
  <input class="form-control input-lg" type="text" name="cc-number" id="cc-number">
</div>
<div class="form-group">
  <input class="form-control input-lg" name="cc-flag" id="cc-flag" type="text">
</div>

<script src="https://polvo-labs.github.io/card-type/dist/card-type.js"></script>

A propriedade innerHTML é para modificar o html que fica dentro de uma tag. O valor de um input fica em value e não em innerHTML, por isso não está conseguindo mudar.

Outra coisa, você não tem classes .cc-number e .cc-flag, mas sim ids. Então, no seu seletor, você deve colocar # no lugar de ..

Segue o exemplo:

var input = document.querySelector('input#cc-number')
var result = document.querySelector('input#cc-flag')

input.addEventListener('change', onInputChange)
input.addEventListener('input', onInputChange)

function onInputChange (e) {
  var cards = e.target.value;
  result.value = cards;
}
<div class="form-group">
  <input class="form-control input-lg" type="text" name="cc-number" id="cc-number">
</div>
<div class="form-group">
  <input class="form-control input-lg" name="cc-flag" id="cc-flag" type="text">
</div>

A propriedade innerHTML é para modificar o html que fica dentro de uma tag. O valor de um input fica em value e não em innerHTML, por isso não está conseguindo mudar.

Outra coisa, você não tem classes .cc-number e .cc-flag, mas sim ids. Então, no seu seletor, você deve colocar # no lugar de ..

Segue o exemplo:

var input = document.querySelector('input#cc-number')
var result = document.querySelector('input#cc-flag')

input.addEventListener('change', onInputChange)
input.addEventListener('input', onInputChange)

function onInputChange (e) {
  var cards = CardType.cardType(e.target.value)
  result.value = cards
}
<div class="form-group">
  <input class="form-control input-lg" type="text" name="cc-number" id="cc-number">
</div>
<div class="form-group">
  <input class="form-control input-lg" name="cc-flag" id="cc-flag" type="text">
</div>

<script src="https://polvo-labs.github.io/card-type/dist/card-type.js"></script>

texto aperfeiçoado.
Fonte Link

A propriedade innerHTML é para modificar o html que fica dentro de uma tag. O valor de um input fica em value e não em innerHTML, por isso não está conseguindo mudar.

Outra coisa, você não tem classes .cc-number e nem .cc-flag, mas sim ids. Então, no seu seletor, você deve colocar # no lugar de ..

Segue o exemplo:

var input = document.querySelector('input#cc-number')
var result = document.querySelector('input#cc-flag')

input.addEventListener('change', onInputChange)
input.addEventListener('input', onInputChange)

function onInputChange (e) {
  var cards = e.target.value;
  result.value = cards;
}
<div class="form-group">
  <input class="form-control input-lg" type="text" name="cc-number" id="cc-number">
</div>
<div class="form-group">
  <input class="form-control input-lg" name="cc-flag" id="cc-flag" type="text">
</div>

A propriedade innerHTML é para modificar o html que fica dentro de uma tag. O valor de um input fica em value e não em innerHTML, por isso não está conseguindo mudar.

Outra coisa, você não tem classes .cc-number e nem .cc-flag, mas sim ids. Então, no seu seletor, você deve colocar # no lugar de ..

Segue o exemplo:

var input = document.querySelector('input#cc-number')
var result = document.querySelector('input#cc-flag')

input.addEventListener('change', onInputChange)
input.addEventListener('input', onInputChange)

function onInputChange (e) {
  var cards = e.target.value;
  result.value = cards;
}
<div class="form-group">
  <input class="form-control input-lg" type="text" name="cc-number" id="cc-number">
</div>
<div class="form-group">
  <input class="form-control input-lg" name="cc-flag" id="cc-flag" type="text">
</div>

A propriedade innerHTML é para modificar o html que fica dentro de uma tag. O valor de um input fica em value e não em innerHTML, por isso não está conseguindo mudar.

Outra coisa, você não tem classes .cc-number e .cc-flag, mas sim ids. Então, no seu seletor, você deve colocar # no lugar de ..

Segue o exemplo:

var input = document.querySelector('input#cc-number')
var result = document.querySelector('input#cc-flag')

input.addEventListener('change', onInputChange)
input.addEventListener('input', onInputChange)

function onInputChange (e) {
  var cards = e.target.value;
  result.value = cards;
}
<div class="form-group">
  <input class="form-control input-lg" type="text" name="cc-number" id="cc-number">
</div>
<div class="form-group">
  <input class="form-control input-lg" name="cc-flag" id="cc-flag" type="text">
</div>

Fonte Link

A propriedade innerHTML é para modificar o html que fica dentro de uma tag. O valor de um input fica em value e não em innerHTML, por isso não está conseguindo mudar.

Outra coisa, você não tem classes .cc-number e nem .cc-flag, mas sim ids. Então, no seu seletor, você deve colocar # no lugar de ..

Segue o exemplo:

var input = document.querySelector('input#cc-number')
var result = document.querySelector('input#cc-flag')

input.addEventListener('change', onInputChange)
input.addEventListener('input', onInputChange)

function onInputChange (e) {
  var cards = e.target.value;
  result.value = cards;
}
<div class="form-group">
  <input class="form-control input-lg" type="text" name="cc-number" id="cc-number">
</div>
<div class="form-group">
  <input class="form-control input-lg" name="cc-flag" id="cc-flag" type="text">
</div>