替换“;var url”;使用文本框输入

Replace "var url" using textbox input?

本文关键字：文本 输入 var url 替换      更新时间：2023-09-26

这是我使用JavaScript的第二天，这就是我迄今为止所做的：

http://jsbin.com/asale/52/edit?html，输出

它显示网站是否使用图像（var url）在线

我在这篇文章中使用了YouTube的标志，正如你所看到的，它说在线，如果你改为链接（例如删除一个字母），背景会改变，它说离线。

我的问题是文本框不起作用，我想通过在框中键入"var url"图像链接（例如徽标）来更改它。（我在文本框中粘贴了facebook标志的图片链接，点击Go！它应该会说它在线）

提前感谢！

一个简单的起点可以是给按钮添加一个id：

<input id="submitButton" type="button" value="Go!">

然后编辑一点脚本

<script type="text/javascript">
    function showImage(url)
    {
        var url = url || "http://s.ytimg.com/yts/img/pixel-vfl3z5WfW.gif";
        var img = new Image();
        img.src = url;
        img.onload = function()
        {
            document.body.parentNode.style.backgroundImage = 'url(http://i.imgur.com/Kkku0Q9.png)';
        }
        img.onerror = function()
        {
            document.body.parentNode.style.backgroundImage = 'url(http://i.imgur.com/AP8hxNL.png)';
        };
    }
    showImage();
    sub = document.getElementById('submitButton');
    sub.addEventListener('click', function(e)
    {
        // var url = document.getElementsByName('test')[1].value; as one of many alternatives
        var url = e.target.previousElementSibling.previousElementSibling.value;
        showImage(url);
    });
</script>

jsbin中提到的代码只适用于页面加载。您需要添加额外的功能来读取文本框值并将其显示在图像中。可能您的代码中缺少该部分。

检查这个。。。

<center>
  <form name="test">
    <H2>Check website:</H2>
    <p>
      <input type ="text" name="test" id="url_field"><BR>
      <input type="button" value="Go!" onClick="openURL(document.getElementById('url_field').value);">
    </p>
  </form>
</center>
<script type="text/javascript">
var url = "http://s.ytimg.com/yts/img/pixel-vfl3z5WfW.gif";
openURL();
function openURL(image)
  {
    if(image!=undefined)
      url = image;
    var img = new Image();
    img.src = url;
    img.onload = function()
    {
    // If the server is up, do this. 
    document.body.parentNode.style.backgroundImage = 'url(http://i.imgur.com/Kkku0Q9.png)';
    }
    img.onerror = function()
    {
    // If the server is down, do that.
    document.body.parentNode.style.backgroundImage = 'url(http://i.imgur.com/AP8hxNL.png)';
    }
  }
</script>

如果我理解正确，您需要将"url"的值更改为文本框中的值。

将html修改为：

<center>
  <form name="test">
    <H2>Check website:</H2>
    <p>
      <input type ="text" name="test" id="txtInput"><BR>
      <input type="button" value="Go!" onClick="changeImg()">
    </p>
  </form>
</center>

在脚本中有

function changeImg(){
var url = document.getElementById("textInput").value;
var img = new Image();
img.scr = url;
img.onload = function()
{
// If the server is up, do this. 
document.body.parentNode.style.backgroundImage = 'url(http://i.imgur.com/Kkku0Q9.png)';
}
img.onerror = function()
{
// If the server is down, do that.
document.body.parentNode.style.backgroundImage = 'url(http://i.imgur.com/AP8hxNL.png)';
}
}

我认为你应该好好地走！

相关文章：