Problema com substituição de imagem

[Paulo Felipe de Araujo 1]

Olá, fiz esse script para trocar imagem, mas não funciona. Ele da esse erro no log : 

 

Uncaught TypeError: Cannot read property 'src' of null
    at HTMLImageElement.<anonymous> (produto.html:197)
    at HTMLImageElement.dispatch (jquery.js:5183)
    at HTMLImageElement.elemData.handle (jquery.js:4991)

 

Segue o código: 

            <div class="img-principal">
              <img src="images/produtos/bolo-choco.jpg" alt="" class="img-fluid" id="imagem-principal">
            </div>
            <div class="img-thumb-group">
              <a rel="1">
                <img src="images/produtos/bolo-choco.jpg" class="img-thumbnail config-img-thumb" id="1">
              </a>
              <a rel="2">
                <img src="images/produtos/p-bolo-frutas-vermelhas.jpg" class="img-thumbnail config-img-thumb" id="2">
              </a>
            </div>

<script>
      $(document).ready(function(){
        var img_principal = document.getElementById('imagem-principal');
        
        $('#1').click(function(){
          img_principal.attr('src',document.getElementById('#1').src);
        });

        $('#2').click(function(){
          img_principal.attr('src',document.getElementById('#2').src);
        });
      });
</script>

 

[wanderval 19]

Seu erro é que você está declarando uma variável de objeto javascript e querendo manipula-la como um objeto jquery, para fazer isso é necessário transformar o elemento retornado em um objeto jquery ou usar a sintax de manipulação de atributos do javascript, em elementById não se usa '#' apenas em objetos jquery.

 

JS exemplo com as duas forma de implementação:

$(document).ready(function(){
  // var img_principal = document.getElementById('imagem-principal');
  var img_principal = $(document.getElementById('imagem-principal'));

  $('#1').click(function(){
    // img_principal.src = document.getElementById('1').src;
    img_principal.attr('src',document.getElementById('1').src);
  });

  $('#2').click(function(){
    // img_principal.src = document.getElementById('2').src;
    img_principal.attr('src',document.getElementById('2').src);
  });
  
  $('#3').click(function(){
    // img_principal.src = document.getElementById('3').src;
    img_principal.attr('src',document.getElementById('3').src);
  });
});

ex jsbin: https://jsbin.com/jiferixaqo/edit?html,js,output