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 !