How to load a JS image

Asked

Viewed 1,063 times

0

Inside my 'data' div I load the JS information by id inside the spans, I am not able to load the image inside the span id='imgspan'

    <div class="dados">
       <label><span id="orderid"></span></label>
        <label><span id="endereco"></span></label>
        <label><span id="bairro"></span></label>
        <label>imagem: <span id="imgspan" /></label>
    </div>

$('#cities').change(function() {
      var orderid = values[$(this).val()].OrderID;    
      var endereco = values[$(this).val()].Endereco;
      var bairro = values[$(this).val()].Bairro;
      var imgspan= values[$(this).val()].ImgSpan;

      $('#orderid').text(orderid);
      $('#endereco').text(endereco);
      $('#bairro').text(bairro);
      $('#imgspan').text(imgspan)
    });

MY JS

 var values = [
             {"OrderID": "Santo André",
              "Endereco": "Rua Bernardino de Campos, 171",
              "Bairro":"Centro",
              "ImgSpan":"<img src='../img/pointer.png' alt='' />"
              }]
javascript jquery

  • <span id="imgspan" />... is wrong the syntax.

  • Try <div id="Imgspan"></div>

  • By the way, I am your neighbor of São Bernardo haha, take also that "/ >" at the end of the <img src, that is not necessary.

  • Victor, it didn’t work replace the ID

2 answers

0

Try the following:

          var values = [
         {"OrderID": "Santo André",
          "Endereco": "Rua Bernardino de Campos, 171",
          "Bairro":"Centro",
          }
         function image() {  
         var img = document.createElement("imgspan"<img src="../img/pointer.png">;  
         img.src = "../img/pointer.png"";  
         document.getElementById('imgspan').appendChild(img);  
         }]

And the code:

      <div class="dados">
      <label><span id="orderid"></span></label>
      <label><span id="endereco"></span></label>
    <label><span id="bairro"></span></label>
    <label>imagem: <div id="imgspan"></div></label>
</div>

   $('#cities').change(function() {
  var orderid = values[$(this).val()].OrderID;    
  var endereco = values[$(this).val()].Endereco;
  var bairro = values[$(this).val()].Bairro;
  var imgspan= values[$(this).val()].ImgSpan;

  $('#orderid').text(orderid);
  $('#endereco').text(endereco);
  $('#bairro').text(bairro);
  $('#imgspan').text(imgspan)
});

0

I managed to solve using:

<div class="dados">
       <label><span id="orderid"></span></label>
        <label><span id="endereco"></span></label>
        <label><span id="bairro"></span></label>
        <label>imagem: <span id="imgspan"></span> </label>
    </div>

$('#cities').change(function() {
      var orderid = values[$(this).val()].OrderID;    
      var endereco = values[$(this).val()].Endereco;
      var bairro = values[$(this).val()].Bairro;
      var imgspan= values[$(this).val()].ImgSpan;

      $('#orderid').text(orderid);
      $('#endereco').text(endereco);
      $('#bairro').text(bairro);
      $( '#imgspan' ).empty();
      $('#imgspan').append(imgspan);

    });

and in the JS

 var values = [
             {"OrderID": "Santo André",
              "Endereco": "Rua Bernardino de Campos, 171",
              "Bairro":"Centro",
              "ImgSpan":"<img src='../img/pointer.png' alt='' />"
              }]

  • This way the JS empties the 'imgspan' field, if Empty is not placed the JS will put one in sequence the other every time the JS is called

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.