Change image based on dropdown using javascript is changing all of my images

Question

I am using javascript to change my images based on a dropdown menu seen below:

<script type="text/javascript">
        $(document).ready(function() {
        var pics = [
            '/pics/graphForAlbania.png?raw=true', 
            '/pics/graphForAlgeria.png?raw=true',
            '/pics/graphForAngola.png?raw=true'
        ]
        $('#picDD').change(function () {
        var val = parseInt($('#picDD').val());
        $('img').attr("src",pics[val]);
        });
        });
        
    </script>

<div class="container">
        <img src='/pics/graphForAlbania.png?raw=true'/>
        <select id="picDD">
            <option value ="0" selected>Albania</option>
            <option value ="1">Algeria</option>
            <option value ="2">Angola</option>
</select>
        </div>

but I also have another image: <img src="/pics/output-onlinepngtools.png?raw=true"/> that is earlier on in the code that changes along with the other image every time that the drop down is prompted.

Is there a way to have an image in my html code without it changing with the javascript that I wrote? Would I be able to have the image in something beyond an image tag, or should I change something about the javascript?

I can also link the website that I have created incase anyone needs to see it in order to understand the problem — xxx
– xxx, Commented Nov 11, 2020 at 20:12

imvain2 · Accepted Answer · 2020-11-11 20:18:09Z

1

There are a few different solutions for this, but they all are based on the same concept:

Referring to the specific image you want to change

The simplest solution is give the image a class and referring to that class instead of img

<script type="text/javascript">
  $(document).ready(function() {
    var pics = [
      '/pics/graphForAlbania.png?raw=true',
      '/pics/graphForAlgeria.png?raw=true',
      '/pics/graphForAngola.png?raw=true'
    ]
    $('#picDD').change(function() {
      var val = parseInt($('#picDD').val());
      $('.graph').attr("src", pics[val]);
    });
  });
</script>

<div class="container">
  <img class='graph' src='/pics/graphForAlbania.png?raw=true' />
  <select id="picDD">
    <option value="0" selected>Albania</option>
    <option value="1">Algeria</option>
    <option value="2">Angola</option>
  </select>
</div>

answered Nov 11, 2020 at 20:18

imvain2

15.9k1 gold badge19 silver badges21 bronze badges

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

3 Comments

Danial Over a year ago

I'd avoid using a generic class; if there's more than 1 .graph on the page he'll have the same problem. Something like "cpugraph" would be better

imvain2 Over a year ago

@Danial, I always recommend classes over IDs because a TON of problems that I see on SO come from people reusing IDs on the same page. And at least with classes, there are solutions to allow for reusing the same class.

Danial Over a year ago

suggesting less efficient code because people are bad coders isn't good practice. But I didnt SAY not to use classes. I said to use more unique classes; if there are 4 graphs on the page your example has the same problem as using <img>, or if all images have the same class, which is often the case. The same universe of people who don't know how to use IDs also don't know how to use classes, so you're just suggesting a less efficient method. IDs are faster and more efficient.

Danial · Accepted Answer · 2020-11-11 20:18:08Z

$('img') matches all images on the page. Give it an id or unique class so you can identify it

<script type="text/javascript">
    $(document).ready(function() {
    var pics = [
        '/pics/graphForAlbania.png?raw=true', 
        '/pics/graphForAlgeria.png?raw=true',
        '/pics/graphForAngola.png?raw=true'
    ]
    $('#picDD').change(function () {
    var val = parseInt($('#picDD').val());
    $('#pic2change').attr("src",pics[val]);
    });
    });
    
</script>

<div class="container">
    <img id='pic2change' src='/pics/graphForAlbania.png?raw=true'/>
    <select id="picDD">
        <option value ="0" selected>Albania</option>
        <option value ="1">Algeria</option>
        <option value ="2">Angola</option>
</select>
    </div>

Collectives™ on Stack Overflow

Change image based on dropdown using javascript is changing all of my images

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related