Question

所以这是我使用JavaScript的第二天，这是我到目前为止所做的：

http://jsbin.com/asale/52/edit?html,output

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

我在其中使用了YouTube徽标，因为您可以看到它在网上显示，如果您更改为链接（例如删除一封信），则背景会发生变化并显示为离线。

我的问题是文本框不起作用，我想通过在框中键入来更改“var url”图像链接（例如徽标）。（我将facebook logo图像链接粘贴到文本框中，单击Go！它应该说它在线）

提前致谢！

Answer 1

如果我理解正确，你想改变＆＃34; url＆＃34;的值。到文本框的内容。

将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)';
}

}

我认为你应该好好去！

Answer 2

一个简单的起点可能是给按钮添加一个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>

Answer 3

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

Answer 4

检查一下......

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

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

4 个答案: