CODEWITHSUNDEEP
javascriptasp.net-mvcimageasp.net-corec#-2.0
jgrewal
jgrewal

Reputation: 342

Image changing on timer for .NET Core framework

I found this bit of code online and changed it a bit for my use and it's not working as needed. I'm also new to C# and the .NET Core framework.

What I want to happen

Every few seconds, the image changes.

What's happening

The first image appears on the screen, but when it tries to go through the list; the image of the default (green hill blue sky) file appears on the screen.

What I tried (1)

I added the line <img id="imageTEST" src="~/images/basketball.jpg"> right under <img id="image" src="~/images/baseball.jpg">.

The results: both images appear on the screen. But when the timer hits; the first image turns to the default file while the second image (basketball) stays on the screen. however, the image shakes every few seconds because when the first image changes. Meaning the code is iterating through the list. Just not appearing on screen.

cshtml:

<img id="image" src="~/images/baseball.jpg">

<script type = "text/javascript">
    var image = document.getElementById("image");
    var currentPos = 0;
    var images = ["~/images/baseball.jpg", "~/images/basketball.jpg", "~/images/football.jpg", "~/images/soccer.jpg"]

    function changeimage() {
        if (++currentPos >= images.length)
            currentPos = 0;

        image.src = images[currentPos];
    }

    setInterval(changeimage, 3000);
</script>

What I tried (2)

I changed the image location for each image in the list of images to to the following format : "../../wwwroot/images/basketball.jpg"

I did this because I thought maybe it has to do with the script being type "text/javascript" and I'm using a .net to find the wwwroot location with '~'.

Result: same result

What I tried (3)

@{
    var image = document.getElementByID("image");
    int currentPos = 0;
    var images new List<imageList>()
        {
            "~/images/baseball.jpg", 
            "~/images/basketball.jpg", 
            "~/images/football.jpg", 
            "~/images/soccer.jpg"
        };

    public void changeimage(){
        if(++currentPos >= image.length)
        {
            currentPos = 0;
        }
    }
    setInterval(changeimage, 3000);
}

Result: doesn't like the like var images new List<imageList>() and public void changeimage()

What I tried (4)

<script type = "text/javascript">
    const image=document.getElementById("image");
    let images= ["~/images/baseball.jpg", 
            "~/images/basketball.jpg", 
            "~/images/football.jpg", 
            "~/images/soccer.jpg"], i = 0;

    function changeimage() {
        i<images.length?i+=1:i=0; 
        image.src=images[i];
    }
    Console.Writeline("changing pic");
    setInterval(changeimage, 3000);
<script>

Result: the picture stays the same and the Console.Writeline is never executed

Upvotes: 1

Views: 308

Answers (2)

Victor
Victor

Reputation: 8950

After removing the ~ character in the script section use window.onload event to call the setInterval():

<script type="text/javascript">

    window.onload = function () {            
        
        var currentPos = 0;
        var images = ["/images/baseball.jpg", "/images/basketball.jpg", "/images/football.jpg", "/images/soccer.jpg"]
        var img = document.getElementById("image");

        function changeimage() {
            if (++currentPos >= images.length)
                currentPos = 0;
           
            img.src = images[currentPos];            
        }
        setInterval(changeimage, 3000);
    }
</script>

<body>
    <div>
        <img id="image" src="/images/baseball.jpg">
    </div>
</body>

Upvotes: 1

Shoejep
Shoejep

Reputation: 4849

Your first approach is the way to go, you just need to remove ~ from the image paths in the array, i.e.

var images = ["/images/baseball.jpg", "/images/basketball.jpg", "/images/football.jpg", "/images/soccer.jpg"];

You can't use ~ in an image src unless it's compiled by Razor, which is why your initial image element displays but not the srcs in the array.

Option 2 won't work because it has the wrong path, it should be /images/basketball.jpg

Option 3 won't work because you're mixing Razor C# and Javascript. Once the page loads, no more C# will execute until it's loaded again.

Option 4, same problem as Option 3 and that's why your Console.Writeline doesn't execute.

Upvotes: 2

Related Questions