CODEWITHSUNDEEP
javascriptjquery
Luis Gerardo Runge
Luis Gerardo Runge

Reputation: 107

Changing an image with a dropdown, only works with the last image added

Using some examples in javascript, I have created this with the idea that pressing the buttom, a new row is added to the webpage, the row contain a dropdown list that will change an image in that row with the event OnChange.

html:

<button name="addDom" id="incrementor" type="button" class="btn btn-block btn-primary btn-lg"><i class="fa fa-plus-circle" aria-hidden="true"></i> Añadir pregunta</button>

JS + Jquery:

var number = 0;
var incrementor = document.getElementById('incrementor');
incrementor.addEventListener('click', plusOne);

function plusOne() {
  number++;
  count.textContent = number.toString();
}

$(document).ready(function() {
       
    $("button[name='addDom']").click(function() {
        var domElement = $('<div class="row"><div class="col-md-9"><div class="box"><div class="box-header with-border"><h3 class="box-title">Pregunta '+number.toString()+'</h3></div><div class="box-body"><div class="box box-solid"><div class="form-group"><label for="exampleInputEmail1">Selecciona el tipo de pregunta</label><select class="form-control input-lg" id="img_change'+number.toString()+'"><option value="5caritas">5 caritas</option><option value="3caritas">3 caritas</option><option value="2caritas">2 caritas</option><option value="opciones">Selección simple</option><option value="nps">Evaluación del 1 al 10</option><option value="texto">Texto libre</option><option value="telefono">Teléfono</option><option value="email">Correo electrónico</option></select></div><div class="form-group"><label for="exampleInputEmail1">Tu pregunta es: </label><input class="form-control input-lg" type="text" placeholder="Escribe tu pregunta"></div></div></div></div></div><div class="col-md-3"><div class="box box-default"><div class="box-header with-border"><i class="fa fa-bullhorn"></i><h3 class="box-title">Ejemplo:</h3></div><div class="box-body"><img class="img-responsive" id="changePictureYo'+number.toString()+'" src="https://easycsat.com/adminLib/clients/img/screenshot-5caritas.png"/></div></div></div></div>');
        $(this).before(domElement);
        
        $('#img_change'+number.toString()).on('change', function(){

        var img_path = 'https://easycsat.com/adminLib/clients/img/screenshot-' + $(this).val() + '.png';
        $('#changePictureYo'+number.toString()).attr( 'src', img_path );
});
    });
    
    
});

Thats work fine, pressing the button a new row is added and i'm able to change the image using the drop down list.

example:

  1. Pressing the button a new row 1 is added, and the dropdown 1 change the image 1
  2. Pressing the button a new row 2 is added, and the dropdown 2 change the image 2
  3. Pressing the button a new row 3 is added, and the dropdown 3 change the image 3

The issue is when I try to change an image of any previous row, (using the example before) if I try to use the dropdown 1 to change image 1, this action will change the image of the last row added instead the image 1.

so, all dropdown only change the last image added instead of changing the image that belongs to that dropdown.

Here a working example: https://jsfiddle.net/lrunge/vupgz1rh/2/

I have tried to make some changes in JS, as I said before, I have used different examples and adapted them to what I need, but there is something that I cannot achieve due to my limited knowledge in JS

Many thanks in advance for all your support and guidance

Upvotes: 3

Views: 88

Answers (1)

Swati
Swati

Reputation: 28522

You can move whole change event outside click event .Then , inside change event use $(this).closest(".row").find("img") to refer img tag where select-box has been changed.

Demo Code :

var number = 0;
var incrementor = document.getElementById('incrementor');
incrementor.addEventListener('click', plusOne);

function plusOne() {
  number++;
  //count.textContent = number.toString();
}

$(document).ready(function() {
  $("button[name='addDom']").click(function() {
    var domElement = $('<div class="row"><div class="col-md-9"><div class="box"><div class="box-header with-border"><h3 class="box-title">Row ' + number.toString() + '</h3></div><div class="box-body"><div class="box box-solid"><div class="form-group"><label for="exampleInputEmail1">Selecciona el tipo de pregunta</label><select class="form-control input-lg" id="img_change' + number.toString() + '"><option value="5caritas">5 caritas</option><option value="3caritas">3 caritas</option><option value="2caritas">2 caritas</option><option value="opciones">Selección simple</option><option value="nps">Evaluación del 1 al 10</option><option value="texto">Texto libre</option><option value="telefono">Teléfono</option><option value="email">Correo electrónico</option></select></div><div class="form-group"><label for="exampleInputEmail1">Tu pregunta es: </label><input class="form-control input-lg" type="text" placeholder="Escribe tu pregunta"></div></div></div></div></div><div class="col-md-3"><div class="box box-default"><div class="box-header with-border"><i class="fa fa-bullhorn"></i><h3 class="box-title">Image:</h3></div><div class="box-body"><img class="img-responsive" id="changePictureYo' + number.toString() + '" src="https://easycsat.com/adminLib/clients/img/screenshot-5caritas.png" style="max-width: 70px;"/></div></div></div></div><hr>');
    $(this).before(domElement);
  });
  //on change of select
  $(document).on('change', 'select[id*=img_change]', function() {
    var img_path = 'https://easycsat.com//adminLib/clients/img/screenshot-' + $(this).val() + '.png';
    //use closest and find..
    $(this).closest(".row").find('img').attr('src', img_path);
  });


});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button name="addDom" id="incrementor" type="button" class="btn btn-block btn-primary btn-lg"><i class="fa fa-plus-circle" aria-hidden="true"></i> Añadir pregunta</button>

Upvotes: 5

Related Questions