Div content controling an img

[Hocus Pocus]

Good morning, good evening~

I've been studying javascript for few hours, so I'm sorry if I'm making a lot of mistakes, and I hope I'll be able to learn from you guys, and do what I'm trying to build. (Also, I'm sorry, I'm not a native English speaker, so if you don't understand what I'm trying to do, or to explain, please feel free to ask me again, and I'll try to be more accurate.)

I would like to have the content of a div called <div id ="fruit"> that  control an <img id="imgfruit" src="">. So for exemple :

<div id="fruit">orange</div> and the <img> will, for exemple, have the picture of an orange like <img id ="imgfruit" src=".../orange.png"> 

But at the same time, if I change the content of the div like : <div id="fruit">apple</div>, the <img> will have the picture of an apple. 

So according to the content of the div, the image could change. I tried to do that by myself, but it doesn't work properly :

<span id="fruit">apple</span>
<img id="img" src="">

        <script type="text/javascript">
          if (document.getElementById("fruit").textContent = "orange") {document.getElementById("img").src="http://placehold.it/400x150?text=orange";}
     else if (document.getElementById("fruit").textContent = "apple") {document.getElementById("img").src="http://placehold.it/400x150?text=apple";}
     else if (document.getElementById("fruit").textContent = "pear") {document.getElementById("img").src="http://placehold.it/400x150?text=pear";}
        </script>

I'm probably missing something somewhere, but I can't find the solution, so if you can help, that would be very nice~

Thank you !

 

Edit : Also, I'm sorry for posting the same topic twice, my internet connection just got really bad when I submitted my topic, for some reasons, it was posted twice, and it doesn't look like I can delete it by myself. Sorry again !

Edited March 30, 2017 by Hocus Pocus

[Ingolme]

Use "==" for comparison. A single "=" is the assignment operator, which changes the value of the variable you're operating with.

You can use a switch() statement as well to make your code more readable.

[Hocus Pocus]

Thank you for helping me ! I was almost there ahah 

[Hocus Pocus]

Hello ! I'm back with a new challenge ~

So here is my code, that I corrected with the help of Ingolme :

<span id="fruit">apple</span>
<img id="img" src="">

<script type="text/javascript">
     if (document.getElementById("fruit").textContent == "orange") {document.getElementById("img").src="http://placehold.it/400x150?text=orange";}
else if (document.getElementById("fruit").textContent == "apple") {document.getElementById("img").src="http://placehold.it/400x150?text=apple";}
else if (document.getElementById("fruit").textContent == "pear") {document.getElementById("img").src="http://placehold.it/400x150?text=pear";}
</script>

It works just fine like this. But I can't make it work multiple times, like if I try this :

<span id="fruit">apple</span>
<img id="img" src="">

<span id="fruit">orange</span>
<img id="img" src="">

Only the picture of the apple will appear. The javascript is applying only on the first <span id ="fruit"></span>

How I can correct that and make it work multiples times on the same page ? 

Thank you ! ~

 

 

[dsonesuk]

An id reference must be unique within a page, only class names can be used multiple times, so you would have to loop through classnames and make changes to next sibling img src attribute.

[Hocus Pocus]

Thanks for responding ~ I tried to do that :

<span id="fruit">apple</span>
<img id="img" src="">

<span id="fruit">orange</span>
<img id="img" src="">

<script type="text/javascript">
   $(function() var fruit=".fruit span" $(fruit).each(function()
  
     if (document.getElementById("fruit").textContent == "orange") {document.getElementById("img").src="http://placehold.it/400x150?text=orange";}
else if (document.getElementById("fruit").textContent == "apple") {document.getElementById("img").src="http://placehold.it/400x150?text=apple";}
else if (document.getElementById("fruit").textContent == "pear") {document.getElementById("img").src="http://placehold.it/400x150?text=pear";}
    });
</script>

But, of course, it would have been too easy if it could work just like that, so yeah... ahaha sadly I'm probably missing a lot of knowledge again

[dsonesuk]

13 minutes ago, Hocus Pocus said:

Thanks for responding ~ I tried to do that :

<span id="fruit">apple</span>
<img id="img" src="">

<span id="fruit">orange</span>
<img id="img" src="">

<script type="text/javascript">
   $(function() var fruit=".fruit span" $(fruit).each(function()
  
     if (document.getElementById("fruit").textContent == "orange") {document.getElementById("img").src="http://placehold.it/400x150?text=orange";}
else if (document.getElementById("fruit").textContent == "apple") {document.getElementById("img").src="http://placehold.it/400x150?text=apple";}
else if (document.getElementById("fruit").textContent == "pear") {document.getElementById("img").src="http://placehold.it/400x150?text=pear";}
    });
</script>

But, of course, it would have been too easy if it could work just like that, so yeah... ahaha sadly I'm probably missing a lot of knowledge again

BUT! you are still going through multiple id references ('fruit' and img) when only one span and one image only can have the unique id

[dsonesuk]

Instead of individual ref for each, use the actual innerhtml text as the complete src ref

$(this).next('img').attr('src', "http://placehold.it/400x150?text=" + $(this).html());

Equals repeating duplicate of text in src of image

Equals the value that defines the complete src reference

        <span class="fruit">apple</span>
        <img src="">

        <span class="fruit">orange</span>
        <img  src="">

        <script type="text/javascript">

            $(function() {

                $('.fruit').each(function(i) {

                    $(this).next('img').attr('src', "http://placehold.it/400x150?text=" + $(this).html());

                    /* if (document.getElementById("fruit").textContent == "orange")
                     {
                     document.getElementById("img").src = "http://placehold.it/400x150?text=orange";
                     }
                     else if (document.getElementById("fruit").textContent == "apple")
                     {
                     document.getElementById("img").src = "http://placehold.it/400x150?text=apple";
                     }
                     else if (document.getElementById("fruit").textContent == "pear")
                     {
                     document.getElementById("img").src = "http://placehold.it/400x150?text=pear";
                     }*/
                });

            });
        </script>

 

[Hocus Pocus]

Thanks for answering~ !

I think I kinda understood what you're explaining. You're using the link "http://placehold.it/400x150?text=" and you're saying to the javascript, to add the word apple, pear, after that link to complete the link, and have the final picture url, right ? Like if I have "apple", it will add apple to the url, and i'll have the img "http://placehold.it/400x150?text=apple". But the thing is that I explained it with fruits and placehold.it img because I thought I would be easier to explain what I'm trying to do.

Actually, I'm trying to make something like a "rank system" for a forum. So you have the users, and they have different written ranks under their avatar like : admin, mod, member. This thing is already automatic, and the code is provided by the forum system I'm using (Forumotion). I've made three types of picture by myself, one for the admin, another for the mod, and the final one for the members. So depending on the written rank they have, I want to show a different picture.

So, in a topic, for exemple, I'll have : one post from an admin, another one from a mod, and the final one from a member. So each of them has a different written rank and will have a different picture (just right next to their avatar) according to their written rank. And the javascript has to work multiple times for that.

I'm sorry, I thought the exemple of the fruits would be easier to explain...

 

Edited March 31, 2017 by Hocus Pocus

[dsonesuk]

Then all you require is to have images with the rank name that matches the written rank, then using same principle you just supply image path which can be set to a constant variable and then the img file extension. You probably need to be more specific on the img element targeted, but you could use 'fruits' class name index, to target a class name given to the rank img index ref.

[dsonesuk]

       <span class="fruit">apple</span>

        <span class="fruit">orange</span>
        <img class="fruit_img" src="">
        <img class="fruit_img" src="">

        <span class="fruit">pear</span>
        <img class="fruit_img" src="">
        <span class="fruit">pineapple</span>
        <img class="fruit_img" src="">

        <script type="text/javascript">

            $(function() {

                $('.fruit').each(function(i) {

                    $('.fruit_img').eq(i).attr('src', "http://placehold.it/400x150?text=" + $(this).html());

                });

            });

Note even though not all images directly follow the span element, the are given the correct url of image in same sequence.

i is the span index starting from 0 with class name 'fruit', img elements with 'fruit_img' class, using .eq() and index of 'i' will target these specific img elements in same sequence as they set out in within the page..

Edited March 31, 2017 by dsonesuk