Javascript - fadein image when value is equal to something

Question

I have this select option:

<div class="okreci_select">
        <select onchange="changeImage(this)" id="selectid">
         <option value="samsung">Samsung</option>
         <option value="apple">Apple</option>
         <option value="lg">LG</option>
         <option value="htc">HTC</option>
        </select>
</div>

And I have this js function:

function changeImage(el) {
    if (el.value == "samsung"){
      document.getElementById("IzabranUredjajSl").src = "Slike/uredjajSamsung.png";
      document.getElementById("prom_vr_kara").innerHTML = "- 5.1” / 2560x1440 ekran <br/> - 12 MP / 5 MP kamere <br/> - Octa-core / 4 GB platforma <br/> - do 32 GB memorije ";
    }
      else if(el.value == "apple"){
        document.getElementById("IzabranUredjajSl").src = "Slike/uredjajApple.png";
        document.getElementById("prom_vr_kara").innerHTML = "- 4.7” / 1334x750 ekran <br/> - 12 MP / 7 MP kamere <br/> - Quad-core / 2 GB platforma <br/> - do 32 GB memorije ";
    }
}

How can I use the fadein() method when the el.value is equal to something. For example, when the value is apple, I want the uredjajApple.png to fadein. I've tried:

document.getElementById("IzabranUredjajSl").src = "Slike/uredjajApple.png".fadein();

But it doesn't work. Same goes for the text (innerHTML), how do I make them fade in when the el.value changes?

try adding document.getElementById("prom_vr_kara").fadeIn(1000); after the other two lines of code — JonHerbert
– JonHerbert, Commented Dec 4, 2016 at 15:52
You mean like this: document.getElementById("prom_vr_kara").fadein(3000) = "texttext"; It doesn't work :( @JonHerbert — Ivan
– Ivan, Commented Dec 4, 2016 at 16:01
Well I don't think that would work because you're not setting the correct thing, If you want to change the text then you need to reference the text first. — JonHerbert
– JonHerbert, Commented Dec 4, 2016 at 16:09
Also if you're going to be referencing those elements a lot I would consider turning them into variables instead — JonHerbert
– JonHerbert, Commented Dec 4, 2016 at 16:26

Community · Accepted Answer · 2017-05-23 12:01:43Z

0

Try something like this

function changeImage(el) {
    $(el).fadeIn( "slow", function() {
        if (el.value == "samsung"){
          document.getElementById("IzabranUredjajSl").src = "Slike/uredjajSamsung.png";
          document.getElementById("prom_vr_kara").innerHTML = "- 5.1” / 2560x1440 ekran <br/> - 12 MP / 5 MP kamere <br/> - Octa-core / 4 GB platforma <br/> - do 32 GB memorije ";
        }
        else if(el.value == "apple"){
            document.getElementById("IzabranUredjajSl").src = "Slike/uredjajApple.png";
            document.getElementById("prom_vr_kara").innerHTML = "- 4.7” / 1334x750 ekran <br/> - 12 MP / 7 MP kamere <br/> - Quad-core / 2 GB platforma <br/> - do 32 GB memorije ";
        }
    });
}

http://api.jquery.com/fadein/ You may need to play around with the place in which you call the fadein function, perhaps within the if/else statement, sorry don't have the time to check myself. But read the Docs and you should be good to go

EDIT

Reference to this

edited May 23, 2017 at 12:01

CommunityBot

11 silver badge

answered Dec 4, 2016 at 16:06

JonHerbert

6771 gold badge9 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ivan Over a year ago

Uncaught TypeError: el.fadeIn is not a function @JonHerbery. I'll look around in the docs

JonHerbert Over a year ago

try now and if not add an id selector for the function as per the other question referenced

IkePr Over a year ago

Fixed my problem by adding fadeout before the image changes, then fading in after

IkePr · Accepted Answer · 2016-12-04 16:34:11Z

Fixed my problem by adding fade out before the picture changes then fade in after the picture changes:

function changeImage(el) {
  if (el.value == "samsung"){
    $("#IzabranUredjajSl").fadeOut(1);
    document.getElementById("IzabranUredjajSl").src = "Slike/uredjajSamsung.png";
    $("#IzabranUredjajSl").fadeIn(1000);
    document.getElementById("prom_vr_kara").innerHTML = "- 5.1” / 2560x1440 ekran <br/> - 12 MP / 5 MP kamere <br/> - Octa-core / 4 GB platforma <br/> - do 32 GB memorije ";
    document.getElementById("prom_vr_cena").innerHTML = "- Zvezda | 70 000din <br/> - Sunce | 50 000din <br/> - Gаlаksijа | 30 000din <br/>";
  }
  else if(el.value == "apple"){
    $("#IzabranUredjajSl").fadeOut(1);
    document.getElementById("IzabranUredjajSl").src = "Slike/uredjajApple.png";
    $("#IzabranUredjajSl").fadeIn(1000);
    document.getElementById("prom_vr_kara").innerHTML = "- 4.7” / 1334x750 ekran <br/> - 12 MP / 7 MP kamere <br/> - Quad-core / 2 GB platforma <br/> - do 32 GB memorije ";
    document.getElementById("prom_vr_cena").innerHTML = "- Zvezda | 80 000din <br/> - Sunce | 60 000din <br/> - Gаlаksijа | 40 000din <br/>";
  }

Collectives™ on Stack Overflow

Javascript - fadein image when value is equal to something

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related