0

フォームに画像URLを入力すると画像をプレビューするのと同時に、フォームのテキストとプレビューを消すリセットボタンが表示されるサイトを制作しています。

現状リセットボタンを押すと上記の条件は満たせるのですが、続けてフォームに画像URLを入力すると前の画像も一緒に表示されてしまいます。
入力すればするほど、前の画像、前の画像+前の前の画像…と、ページを更新するまで一度に表示される画像が増えていきます。

リセットボタンを押すことで、表面上だけでなく中身(?)も一緒に消すか、フォームの入力の際に前の画像を読み込まないようにしたいのですが、どのように修正したらよいでしょうか。

下記サンプルです。
https://jsbin.com/pigusahiwi/edit?html,console,output

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

1 件の回答 1

0

ソースは何かを参考にどこかから持ってきたけど、その動作が理解できないので改造できない、といった状態でしょうか。

appendは「付け加える、付加する、付け足す」という意味ですね。
img要素を動的に(=JavaScriptで)作成する必要はなくて
最初からhtmlにimg要素を配置しておいてsrcだけ差し替えるようにすればいいと思います。

本題とは違う部分で指摘したいところは色々ありますが、提示されているソースを最小限の改造で動作させるなら以下のような感じかと思います。

<!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);
        $("#img").prop("src", this.value);
        $("#hide").fadeIn();
      });

      $('#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">
      <img id="img">
    </div>
    <button id="reset">reset</butoon>
  </div>
</body>
</html>
2
  • 回答ありがとうございます。私が希望している通りの挙動が確認できました。おっしゃる通り外部サイトやスタックオーバーフローでいただいた回答を基にコードを書いています。 本題と違う部分でも気になる点や修正した方が良い点がありましたら、ご指摘いただけないでしょうか。私としてはシンプルなコードにしたいと考えています。
    – C.V.Alkan
    Commented 2019年2月24日 13:23
  • 現状で動作はするので指摘はお作法的なものになりますが、説明が長くなりそうなのでヒントだけ。getElementByIdをjQueryで書くと?
    – urin
    Commented 2019年2月27日 23:05

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。