Javascript 更新URL’；s基于输入文本_Javascript_Html

Javascript 更新URL’；s基于输入文本

javascript html

Javascript 更新URL’；s基于输入文本,javascript,html,Javascript,Html,我正试图根据输入文本字段中指定的位置制作一个动画雷达。我试图实现的是，当用户在输入文本字段中输入一个位置时，我希望将指定的位置放置在每个url的{location}部分。我怎样才能做到这一点以下是我所拥有的： <html> <head> </head> <body> <img class="slide" width="1080" height="1080" style="background-imag

我正试图根据输入文本字段中指定的位置制作一个动画雷达。我试图实现的是，当用户在输入文本字段中输入一个位置时，我希望将指定的位置放置在每个url的{location}部分。我怎样才能做到这一点

以下是我所拥有的：

<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>

此表单将重新加载页面。如果您希望在单击submit按钮时执行更新页面中变量的脚本，那么这可能是不可取的。因此，改变：

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

注意：此函数将替换图像url字符串的

“{location}”

部分，因此您将无法执行此操作两次。如果您希望能够两次执行此操作，我建议您不要实际更新图像url字符串，而是制作一个getter，它可以随时为您构建一个带有自定义位置的新图像数组，如下所示：

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;
}

var locationValue=”“；
函数goToPage（）{
locationValue=document.getElementById（“位置”）.value；
}
函数getImages（）{
var成像检查=[]；
对于（var i=0；i


在这里，一切都在一起：
<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>

对不起，我使用location作为变量名，但这是保留的。我已经改变了这一点，并且在我的答案末尾添加了一段代码，向您展示了如何实现这一点。我已经测试过了，它对我有效。
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;
}

<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>