URLから画像をギャラリーhtml jsを使用して追加します

Question

こんにちは、私はjavascriptを初めて使っていますが、私の問題を解決できないようです。 私は、ユーザーに画像のURLを尋ねて、htmlや別のjs文書を使って作成したギャラリーに追加しようとしています。ギャラリーは、内部にURLを持つ新しいimgタグを追加する方法を理解するだけでいいです。

これは私がこれまで持っているものです。

function getUrl() { 
var url = prompt('Enter image URL'); 

if (url) { // Do string and URL validation here and also for image type 
    return url; 
} else { 
    return getUrl(); 
}`.slider image.src = getUrl();` 



    <form action="" method="post" class="contact" id="contact" onsubmit="return getUrl()"> 
    <label for="name">Add Image url:</label> 
     <input type="submit" value="submit"> 
    </form> 

<div class="slider"> 
    <img src="gallery/img1.jpg" alt="image 1" /> 
    <img src="gallery/img2.jpg" alt="image 2" /> 
    <img src="gallery/img3.jpg" alt="image 3" /> 
    <img id="image"/> 

    <button class="prev">&#60;</button> 
    <button class="next">&#62;</button> 
</div> 

あなたは、おかげで素晴らしいことだというとにかくで助けることができます。

編集：私の質問は、既にHTMLコード内のギャラリーにimgタグを追加したかったのですが、既にそこにある写真のsrcを変更せず、写真が追加されるたびにタグを追加するだけでした。写真。

Answer 1

新しい画像タグを作成し、

var slider = document.getElementsByClassName("slider")[0]; 
     slider.insertBefore(img,document.getElementsByClassName("prev")[0]); 

注によりスライダーにPREVボタンの前に挿入します。 Javascriptがフォーム実行するために提出を必要としません。我々はonclickonmouseover

DEMOのような任意のイベントでそれRUを行うことができます - ：ちょうどリンクを追加することを忘れないでください

$('.slider').append(
        $('<img></img>'). 
        attr('src', yourUrl). 
        attr('alt', yourAlt) 
        ); 

function getUrl() { 
 
var url = prompt('Enter image URL'); 
 

 
if (url) { // Do string and URL validation here and also for image type 
 
    var img = document.createElement("img"); 
 
    img.src = url; 
 

 
    var slider = document.getElementsByClassName("slider")[0]; 
 
     slider.insertBefore(img,document.getElementsByClassName("prev")[0]); 
 
} else { 
 
    return getUrl(); 
 
}//`.slider image.src = getUrl();` 
 
}

<label for="name">Add Image url:</label> 
 
     <input type="submit" value="submit" onclick="getUrl();"> 
 

 
<div class="slider"> 
 
    <img src="https://www.gravatar.com/avatar/69cf2e00c81bc89731652db2b9ca1dbf?s=32&d=identicon&r=PG&f=1" alt="image 1" /> 
 
    <img src="https://www.gravatar.com/avatar/69cf2e00c81bc89731652db2b9ca1dbf?s=32&d=identicon&r=PG&f=1" alt="image 2" /> 
 
    <img src="https://www.gravatar.com/avatar/69cf2e00c81bc89731652db2b9ca1dbf?s=32&d=identicon&r=PG&f=1" alt="image 3" /> 
 
    <img id="image"/> 
 

 
    <button class="prev">&#60;</button> 
 
    <button class="next">&#62;</button> 
 
</div>

Answer 2

この意味は？

Var img = Document.createElement("img"); 
Img.src = 'your url'; 

Var div = document.getElementById("imagesDiv"); 
Div.appendChild(img); 

Answer 3

はこれを試してみてくださいあなたのhtmlページのヘッダーにあるjQueryには、次のようになります：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>