ボタンの表示方法画像ファイル

Question

私はウェブページ上で作業していますが、まだHTML/CSS/Javascriptを学習しています。私は自分のコンピュータやデータベースからランダムなイメージファイルを表示するようなボタンを作成しようとしていますが、それを書く方法についてはわかりません。それはする必要がdoesntの、また

<img src="img_1.jpg" id="img" /> 

：

function display() { 
 
    var popup = document.getElementById("img").src = "img_1.jpg"; 
 
}

<button class="popup" onclick="display()">ITERATION. 
 
    <span class="popupimg" id="img">img_1.jpg</span> 
 
</button>

Answer 1

これは、imgタグ:)そのよう

<span class="popupimg" id="img">img_1.jpg</span> 

次のようになります。ここに私のコードですボタンの内側に。 あなたのコードは、あなたが画像を表示したい場合は代わりに<span>の<img>を使用する必要が

<button class="popup" onclick="display()">ITERATION.</button> 
<img src="img_1.jpg" id="img" /> 

Answer 2

ようになるはずです。

function display() { 
 
    var popup = document.getElementById("img").src = "img_1.jpg"; 
 
}

<button class="popup" onclick="display()"><!-- What is this ? => ITERATION. --> 
 
    <img id="img" src=""> 
 
</button>

Answer 3

次のような何かを行うことができます。しかし、jQueryもチェックアウトする必要があります。

function display(imagepath) { 
 
    var img = document.getElementById("img"); 
 
    img.src = imagepath; 
 
    img.style.display = 'block'; 
 
}

<img src='' style='display:none' id='img' width='120'> 
 
<button class="popup" onclick="display('https://i.imgur.com/avAMfAu.jpg')">Show Image</button>

jsfiddle