Problem when Exchanging Image with Javascript

Asked

Viewed 141 times

-2

Hello! I made a feature using Javascript to swap one image for another. The idea is that there is a main image, that main image should be switched when clicking on the secondary images below it, and that the main image turns the image that was clicked on. Not to make a function for each image, I tried to make a function only with switch case, in which the DOM returns the SRC of the images, in different variables and in each case the main image takes the value of the secondary. But when I click on the images, nothing happens and the console returns the following message:

trocaImagem.js:3 Uncaught Typeerror: Cannot set Property 'src' of null exchangeImage (exchangeImage.js:3) Htmlimageelement.onclick (index.html:202)

Please, can you help me?

Follow the JS and HTML codes

function trocaImagem(){

    var imagemPrincipal = document.getElementById("imagem_principal").src 
    var imagem_certificado01 = document.getElementById("imagem_certificado01").src
    var imagem_certificado02 = document.getElementById("imagem_certificado02").src
    var imagem_certificado03 = document.getElementById("iamgem_certificado03").src
    var imagem_certificado04 = document.getElementById("imagem_certificado04").src

    var pegaImagem = [imagem_certificado01, imagem_certificado02, imagem_certificado03, imagem_certificado04]

    switch (pegaImagem){

        case 01:
            imagemPrincipal = imagem_certificado01
            break;
        case 02:
            imagemPrincipal = imagem_certificado02
            break;
        case 03:
            imagemPrincipal = imagem_certificado03
            break;
        case 04:
            imagemPrincipal = imagem_certificado04
            break;

    }
}
<!--------------------------------------SEÇÃO DE DIPLOMAS E CERTIFICADOS--------------------------------------------->

  <section class="jumbotron bg-transparent">
    <h1 data-aos="fade-up" class="display-4">Diplomas e Certificados</h1>
    <hr class="my-4">


    <section class="certificado_principal">

      <div ata-aos="fade-up" class="border border-dark card text-center m-3  p-3 bg-secondary text-white" style="width: 50rem;">
        <img src="img/diploma01.jpg" class=" imagem_certificado_principal border border-warning card-img-top  w-100 text-center  imagem_diploma" alt="Imagem de Bootstrap">
        <div class="card-body">
          <p class="card-text">Diploma de Ensino Superior - Tecnologia em Análise e Desenvolvimento de Sistemas - UniÍtalo 2019</p>
        </div>
      </div>
      
    </section>

      <section class= "diplomas ">

        <div ata-aos="fade-up" class=" border border-dark card text-center m-3  p-3 bg-secondary text-white" style="width: 25rem;">
          <img src="img/diploma01.jpg" onclick="trocaImagem()" class=" imagem_certificado01 border border-warning card-img-top  w-100 text-center  imagem_diploma" alt="Imagem de Bootstrap">
          <div class="card-body">
            <p class="card-text">Diploma de Ensino Superior - Tecnologia em Análise e Desenvolvimento de Sistemas - UniÍtalo 2019</p>
          </div>
        </div>

        <div ata-aos="fade-up" class="  border border-dark card text-center m-3  p-3 bg-secondary text-white" style="width: 25rem;">
          <img src="img/certificadoteste.jpg" onclick="trocaImagem()" class="imagem_certificado02 border border-warning card-img-top  w-100 text-center  imagem_diploma" alt="Imagem de Bootstrap">
          <div class="card-body">
            <p class="card-text">Diploma de Ensino Superior - Tecnologia em Análise e Desenvolvimento de Sistemas - UniÍtalo 2019</p>
          </div>
        </div>

        <div ata-aos="fade-up" class="  border border-dark card text-center m-3  p-3 bg-secondary text-white" style="width: 25rem;">
          <img src="img/certificadoteste4.png" onclick="trocaImagem()" class=" imagem_certificado03 border border-warning card-img-top  w-100 text-center  imagem_diploma" alt="Imagem de Bootstrap">
          <div class="card-body">
            <p class="card-text">Diploma de Ensino Superior - Tecnologia em Análise e Desenvolvimento de Sistemas - UniÍtalo 2019</p>
          </div>
        </div>

        <div ata-aos="fade-up" class=" imagem05 border border-dark card text-center m-3  p-3 bg-secondary text-white" style="width: 25rem;">
          <img src="img/diplomatestecaelum.jfif" onclick="trocaImagem()" class=" imagem_certificado04 border border-warning card-img-top  w-100 text-center  imagem_diploma" alt="Imagem de Bootstrap">
          <div class="card-body">
            <p class="card-text">Diploma de Ensino Superior - Tecnologia em Análise e Desenvolvimento de Sistemas - UniÍtalo 2019</p>
          </div>
        </div>
        
        
        
        
       </section>     


<!------------------------------------------------------------------------------------------------------------------->

Thank you!

javascript
  • 1

    There are no elements with the id’s on the lines where you try to catch the .src. For example, here: var imagemPrincipal = document.getElementById("imagem_principal").src..there is no element with id imagem_principal.

1 answer

4


Bruno, the problem is that in Javascript code you use the method document.getElementById(), passing to it HTML element id, but in HTML code you don’t even use the selector id. Not to mention that there is a spelling error within your JS code, you write "iamgem_certificado03" instead of "imagem_certificado03"

Therefore, your HTML code should use a id for the main image, not a class. The same happens with other images. That way, your code should look like this:

function trocaImagem(elemento){
    var imagemPrincipal = document.getElementById("imagem_principal")
    if(elemento.id != 'imagem_principal')
        [imagemPrincipal.src, elemento.src] = [elemento.src, imagemPrincipal.src]
}
  <section class="jumbotron bg-transparent">
    <h1 data-aos="fade-up" class="display-4">Diplomas e Certificados</h1>
    <hr class="my-4">


    <section class="certificado_principal">

      <div ata-aos="fade-up" class="border border-dark card text-center m-3  p-3 bg-secondary text-white" style="width: 50rem;">
        <img src="http://placehold.it/500x200?text=principal" id="imagem_principal" class=" imagem_certificado_principal border border-warning card-img-top  w-100 text-center  imagem_diploma" alt="Imagem de Bootstrap">
        <div class="card-body">
          <p class="card-text">Diploma de Ensino Superior - Tecnologia em Análise e Desenvolvimento de Sistemas - UniÍtalo 2019</p>
        </div>
      </div>
      
    </section>

      <section class= "diplomas ">

        <div ata-aos="fade-up" class=" border border-dark card text-center m-3  p-3 bg-secondary text-white" style="width: 25rem;">
          <img src="http://placehold.it/400x200?text=certificado01" onclick="trocaImagem(this)" id="imagem_certificado01" class="  border border-warning card-img-top  w-100 text-center  imagem_diploma" alt="Imagem de Bootstrap">
          <div class="card-body">
            <p class="card-text">Diploma de Ensino Superior - Tecnologia em Análise e Desenvolvimento de Sistemas - UniÍtalo 2019</p>
          </div>
        </div>

        <div ata-aos="fade-up" class="  border border-dark card text-center m-3  p-3 bg-secondary text-white" style="width: 25rem;">
          <img src="http://placehold.it/400x200?text=certificado02" onclick="trocaImagem(this)" id="imagem_certificado02" class=" border border-warning card-img-top  w-100 text-center  imagem_diploma" alt="Imagem de Bootstrap">
          <div class="card-body">
            <p class="card-text">Diploma de Ensino Superior - Tecnologia em Análise e Desenvolvimento de Sistemas - UniÍtalo 2019</p>
          </div>
        </div>

        <div ata-aos="fade-up" class="  border border-dark card text-center m-3  p-3 bg-secondary text-white" style="width: 25rem;">
          <img src="http://placehold.it/400x200?text=certificado03" onclick="trocaImagem(this)" id="imagem_certificado03" class="  border border-warning card-img-top  w-100 text-center  imagem_diploma" alt="Imagem de Bootstrap">
          <div class="card-body">
            <p class="card-text">Diploma de Ensino Superior - Tecnologia em Análise e Desenvolvimento de Sistemas - UniÍtalo 2019</p>
          </div>
        </div>

        <div ata-aos="fade-up" class=" imagem05 border border-dark card text-center m-3  p-3 bg-secondary text-white" style="width: 25rem;">
          <img src="http://placehold.it/400x200?text=certificado04" onclick="trocaImagem(this)"  id="imagem_certificado04" class="  border border-warning card-img-top  w-100 text-center  imagem_diploma" alt="Imagem de Bootstrap">
          <div class="card-body">
            <p class="card-text">Diploma de Ensino Superior - Tecnologia em Análise e Desenvolvimento de Sistemas - UniÍtalo 2019</p>
          </div>
        </div>
	   </section>

  • 3

    I made the changes that the Lord went through, but the same mistake keeps popping up: I don’t understand, line 3 is what you call the src of the main image, only it seems that null is coming.

  • 3

    Did you copy the code I put here? Here works normally...

  • 3

    Sorry, there was an error in the JS code that I forgot to fix, but right now, if copy now you will see that works normally.

  • 3

    Oops! So now the code does not return any error and the console.log ok appears, only the image itself does not change, it remains the same.

  • 3

    I solved the problem you described in the question, however, I see that, in addition to the syntax problem, your code contains a logic error. Therefore, I remade the HTML code and the Javascript function, which now does exactly what you want. Note: I put the src a link that takes a generated image. It’s good to illustrate, but change and adapt to your files.

  • @Brunoeduardorosselli, I edited the code once more, run it and see if you do what you want.

Show 1 more comment

Browser other questions tagged javascript

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