Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script
    src="https://code.jquery.com/jquery-3.3.1.js"
    integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous"></script>
  <script>
    $(function(){
      $("#selfile2").on("change", function(evt){
        console.log(this.value);
        $("#hide").fadeIn(), $("#bg2").append("<img src='" + this.value + "'>");
      });
      
      $('#reset').click(function () {
        $('#hide').fadeOut();
        //resetすると表面上は消えますが、中身が消えてないためか
        //新しい画像URLを入力しても、前の画像が残ってしまいます。
        var obj = document.getElementById('selfile2');
        obj.value = "";
    });  
    });
  </script>
</head>
<body>
  <input type="text" id="selfile2"><br>
  <div id="hide">
    <div id="bg2"></div>
    <button id="reset">reset</butoon>
  </div>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers