Return result in an input

Question

Good afternoon, I need to return a result in an input. how do?

HTML

<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>

I’ll type in the input cc-number and give me the result on cc-flag

JAVASCRIPT

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.innerHTML = JSON.stringify(cards)
}

OBS: It works properly by returning to a DIV. But I need it back to an INPUT

Answer 1

The estate innerHTML is to modify the html inside a tag. The value of a input gets into value and not in innerHTML, That’s why you can’t change.

Another thing, you have no classes .cc-number and .cc-flag, but ids. So, on your selector, you should put # in place of ..

Follow the example:

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>