loophole

Question

I am trying to reduce the code js because I have 9 inputs of these,

basically I want a way to automate the process, since the only things that changes in js and #input_titulo_imagem_1, #input_titulo_imagem_2 and so on will....

<div class="form-group">
    <input type="text" class="form-control mr-3 my-3" name="titulo_imagem_1" id="input_titulo_imagem_1" placeholder="Titulo Primeira Imagem" required/>
    <small id="menuHelp" class="form-text text-muted">
        Escreva o Titulo da imagem.
    </small>
</div>
<div class="form-group">
    <input type="text" class="form-control mr-3 my-3" name="titulo_imagem_2" id="input_titulo_imagem_2" placeholder="Titulo Segunda Imagem" required/>
    <small id="menuHelp" class="form-text text-muted">
        Escreva o Titulo da imagem.
    </small>
</div>

<div class="card">
    <img src="../img/natureza2.png" class="card-img-top" alt="...">
    <div class="card-body">
        <h5 class="card-title" id="titulo_imagem_1">Titulo Primeira Imagem</h5>
    </div>
</div>
<div class="card">
    <img src="../img/natureza2.png" class="card-img-top" alt="...">
    <div class="card-body">
        <h5 class="card-title" id="titulo_imagem_2">Titulo Segunda Imagem</h5>
    </div>
</div>

$(document).ready(function() {
    for (var i = 1; i <= 9; i++) {
        $('#input_titulo_imagem_' + i).on('change', function() {
            var value = $(this).val();
            $('#titulo_imagem_' + i).text(value);
        })
    }
})

Answer 1

You can create a selector to facilitate your work, in the example below I create an algorithm using jQuery to listen to the keyup and the change of all elements possessing the property data-text-to.

To use simply add to inputs the property data-text-to with the query selector you want to send the text to.

Example:

<input type="text" data-text-to="#id_conteudo_1" />
<h5 id="id_conteudo_1"></h5>
<br/>
<input type="text" data-text-to="#id_conteudo_2" />
<h5 id="id_conteudo_2"></h5>

<script>
  // criando selector para enviar texto para outro elemento.
  $('body').on('change, keyup', '[data-to-text]', function () {
    var selector = $(this).attr('data-to-text');
    var elem = $(selector);
    if(elem.length) {
      elem.text($(this).val());
    }
  });
</script>

In your case, it would be enough for the inputs to insert the data-text-to with the id of h5 that would receive the content.

Jsfiddler example: https://jsfiddle.net/n5gpwmz0/2/

Answer 2

Hello. Your code does not work because the i used within the event of change is the same used in for. When the event is called, the value of i will always be equal to 10 (try to give a console.log(i) within the event of change). In addition, the appropriate event is input and not change. I put a code below in which I fix this variable scope problem i and modify the event.

$(document).ready(function() {
  for (var i = 1; i <= 9; i++) {
    (function(j){
      $('#input_titulo_imagem_' + j).on('input', function() {
          var value = $(this).val();
          $('#titulo_imagem_' + j).text(value);
      });
    })(i);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
    <input type="text" class="form-control mr-3 my-3" name="titulo_imagem_1" id="input_titulo_imagem_1" placeholder="Titulo Primeira Imagem" required/>
    <small id="menuHelp" class="form-text text-muted">
        Escreva o Titulo da imagem.
    </small>
</div>
<div class="form-group">
    <input type="text" class="form-control mr-3 my-3" name="titulo_imagem_2" id="input_titulo_imagem_2" placeholder="Titulo Segunda Imagem" required/>
    <small id="menuHelp" class="form-text text-muted">
        Escreva o Titulo da imagem.
    </small>
</div>

<div class="card">
    <img src="../img/natureza2.png" class="card-img-top" alt="...">
    <div class="card-body">
        <h5 class="card-title" id="titulo_imagem_1">Titulo Primeira Imagem</h5>
    </div>
</div>
<div class="card">
    <img src="../img/natureza2.png" class="card-img-top" alt="...">
    <div class="card-body">
        <h5 class="card-title" id="titulo_imagem_2">Titulo Segunda Imagem</h5>
    </div>
</div>

You can read more about this variable use problem in callbacks and loops here.

I believe that doing as Hiago Souza commented is better than using a for.