CODEWITHSUNDEEP
javascripthtml
Katra
Katra

Reputation: 21

Update URL’s based on Input text

I’m trying to make an animated radar based on the location specified on the input text field. What I’m trying to achieve is when a user enters a location in the input text field, I want the specified location to be placed in the {location} part of each url. How can I achieve this?

Here is what I have:

<html>
    <head>
    </head>
    <body>
        <img class="slide" width="1080" height="1080" style="background-image:url('https://maps.aerisapi.com/{api-key}/flat,counties,admin-lg/1080x1080/{location},9/0.png32')">
        <br> 
        <br>
        <form> 
            <label>Location:</label> 
            <input type="text" id="location" />
            <br> 
            <br> 
            <input type="submit" value="submit" onclick="goToPage();" />
        </form>
        <script>
          var currentImage = 0,
          images = [
            "https://maps.aerisapi.com/{api-key}/radar:75/1080x1080/{location},9/-50minutes.png",
            "https://maps.aerisapi.com/{api-key}/radar:75/1080x1080/{location},9/-40minutes.png",
            "https://maps.aerisapi.com/{api-key}/radar:75/1080x1080/{location},9/-30minutes.png",
            "https://maps.aerisapi.com/{api-key}/radar:75/1080x1080/{location},9/-20minutes.png",
            "https://maps.aerisapi.com/{api-key}/radar:75/1080x1080/{location},9/-10minutes.png",
            "https://maps.aerisapi.com/{api-key}/radar:75/1080x1080/{location},9/current.png"
          ];

          function initSlideshow() {             
            setImage(0);
            setInterval(function() {
                nextImage();
            }, 700);
          }

          function nextImage() {
            if (images.length === currentImage + 1) {
                currentImage = 0;
            } else {                  
            }
            setImage(currentImage);
          }

          function setImage(image) {
            document.querySelectorAll('.slide')[0].src = images[image];
          }

          window.onload = initSlideshow();
        </script>
    </body>
</html>

Upvotes: 2

Views: 83

Answers (1)

Aaron Plocharczyk
Aaron Plocharczyk

Reputation: 2832

This form will reload the page. If you want to execute a script that updates a variable in the page when you click the submit button, that's probably not desirable. So, change:

<input type="submit" value="submit" onclick="goToPage();" />

to

<input type="submit" value="submit" onclick="event.preventDefault();goToPage();" />

Then, if goToPage() is the function you want to update the image urls in, that function should look like this:

function goToPage(){
    images.map((image) => image.replace("{location}", document.getElementById("location").value));
}

NOTE: this function will replace the "{location}" part of the image url strings, so you won't be able to do this action twice. If you want to be able to do this twice, I'd suggest not actually updating the image url strings, but rather making a getter that will build you a new images array with custom locations on the fly whenever you want, like so:

var locationValue = "";
function goToPage(){
    locationValue = document.getElementById("location").value;
}

function getImages(){
    var imagesCopy = [];
    for(var i = 0; i < images.length; i++) imagesCopy[i] = images[i].replace("{location}", locationValue);
    return imagesCopy;
}

Here that all is together:

<html>
    <head>
    </head>
    <body>
        <img class="slide" width="1080" height="1080" style="background-image:url('https://maps.aerisapi.com/{api-key}/flat,counties,admin-lg/1080x1080/{location},9/0.png32')">
        <br> 
        <br>
        <form> 
            <label>Location:</label> 
            <input type="text" id="location" />
            <br> 
            <br> 
            <input type="submit" value="submit" onclick="event.preventDefault();goToPage();console.log(getImages());" />
        </form>
        <script>
          var currentImage = 0,
          images = [
            "https://maps.aerisapi.com/{api-key}/radar:75/1080x1080/{location},9/-50minutes.png",
            "https://maps.aerisapi.com/{api-key}/radar:75/1080x1080/{location},9/-40minutes.png",
            "https://maps.aerisapi.com/{api-key}/radar:75/1080x1080/{location},9/-30minutes.png",
            "https://maps.aerisapi.com/{api-key}/radar:75/1080x1080/{location},9/-20minutes.png",
            "https://maps.aerisapi.com/{api-key}/radar:75/1080x1080/{location},9/-10minutes.png",
            "https://maps.aerisapi.com/{api-key}/radar:75/1080x1080/{location},9/current.png"
          ];

          var locationValue = "";
          function goToPage(){
            locationValue = document.getElementById("location").value;
          }

          function getImages(){
            var imagesCopy = [];
            for(var i = 0; i < images.length; i++) imagesCopy[i] = images[i].replace("{location}", locationValue);
            return imagesCopy;
          }

          function initSlideshow() {             
            setImage(0);
            setInterval(function() {
                nextImage();
            }, 700);
          }

          function nextImage() {
            if (getImages().length === currentImage + 1) {
                currentImage = 0;
            } else {                  
            }
            setImage(currentImage);
          }

          function setImage(image) {
            document.querySelectorAll('.slide')[0].src = getImages()[image];
          }

          window.onload = initSlideshow();
        </script>
    </body>
</html>

Upvotes: 1

Related Questions