텍스트 상자 입력을 사용하여 "var url"을 바꾸시겠습니까?

Question

는 그래서 자바 스크립트 내 두 번째 날이 내가 지금까지 무엇을했는지 있습니다 :

http://jsbin.com/asale/52/edit?html,output 웹 사이트가 온라인 이미지 (var에 URL)

나는 유튜브을 사용을 사용하는 경우를 보여줍니다

로고를 볼 수 있으며 온라인으로 표시되며 링크를 변경 (예 : 문자 삭제)하면 배경이 변경되어 오프라인으로 표시됩니다.

내 문제는 텍스트 상자가 작동하지 않는다는 것입니다. 상자에 입력하여 "var url"이미지 링크 (예 : 로고)를 변경하고 싶습니다. (페이스 북의 로고 이미지 링크를 텍스트 상자에 붙여넣고 Go!를 클릭하면 온라인이됩니다)

미리 감사드립니다!

Answer 1

단순한 시작점은 버튼에 ID를 추가 제공 할 수 있습니다 :

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

다음 jsbin에 언급 된 코드는 페이지에

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

제대로 이해했다면 "url"의 값을 텍스트 상자의 값으로 변경하고 싶을 것입니다. 당신이 갈 수 있어야한다고 생각

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

} 

이

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

그리고 스크립트에서 :

는에 HTML을 수정!

Answer 3

일을 조금에게 스크립트를 편집 하중. 텍스트 상자 값을 읽는 추가 기능을 추가하여 이미지에 표시해야합니다. 아마도 해당 섹션이 코드에 없습니다.

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>