我想使用一个javascript变量来存储图像位置

Question

I'm pretty new to coding in javascript, and am currently making pop up notifications for a website in order to give feedback to users. I have searched around a bit and know there is a way to do this, but can't get my head wrapped around it. I need to store an image location to a variable in my javascript that I can reference in my html page, enabling me to output a different icon image on my toast notification based on the type that is called (error, more info, warning, ect). This is my code so far:

<div id="toast">
    <div id ="title" style="<some styling code>"></div>
    <img id ="icon" style="<image style code>"/>
</div>

And my script:

function showTypeOfToast()
{
    var i = document.getElementById("toast")
    i.className = "showTypeOfToast";
    var label = "Type Of Toast";
    document.getElementById("title").innerHTML = label
    var img = "imgsrc.png";
    var iconElement = document.getElementById("icon");
    iconElement.src = img;
}

My title element works as I expect it to, and I am wanting the image element to work in the same way.

Cheers

Answer 1

pass a parameter into showTypeOfToast. Pass in the type of toast you want to show. then inside the function define something like:

if (type == warning)
iconElement.src = "warning.jpg";
else if (type == help)
iconElement.src = "help.jpg";

document.getElementById('imageId').src = 'x.jpg'; should work in any case.

or you can state:

var x = "www.yoursite.com/your-image.jpg";
var y = "www.yoursite.com/your-image2.jpg";

then document.getElementById('imageId').src = x; and document.getElementById('imageId').src = y; work