オーバーフローによるリンクに基づく画像変数

Question

基本的に、私は画像リンクをたくさん持っています。これらのリンクは固定オーバーラップスタイルをトリガーするが、クリックされた画像リンクに基づいてユニークな画像を生成します。

<img src="../Images/square 300/Drawing/angel face300.jpg" style='height: 300px; width: 300px;' onclick="imageurls(this, '../Images/A4/drawing/angel face.jpg')" /> 

^^ 1つの基本的な画像リンク問題が

<div id="Imagediv" class="overlay"> 
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
</div> 

であることの何側面のようですが、イムわからない私のJavaスクリプト、^^

<script> 
function imageurls(elem, imgurl) { 
    var y = document.createElement("DIV").style.width = "100%"; 
     y.class = "overlay-content" 
    var x = document.createElement("IMG").style.width = "100%"; 
     x.setAttribute("src", imgurl); 
     x.setAttribute("width", "900"); 
     x.setAttribute("height", "900"); 
     x.setAttribute("alt", "_blank"); 
     y.appendChild(x); 
    document.getElementById("Imagediv").appendChild(y).style.width = "100%"; 
} 

function closeNav() { 
    document.getElementById("Imagediv").style.width = "0%"; 
} 
</script> 

のonclick/Wすべての私のCSSのスタイリングは完全に動作し、もし私がdocument.get.elementを使うだけで、var xとyを取り除くとオーバーレイが機能します。

Answer 1

変数宣言は、変数の宣言の後にスタイルを適用し、この

 var x = document.createElement("IMG") 
    var y = document.createElement("DIV") 

のような間違った.USEました。

オーバーレイを削除します。変数宣言が間違っていたので

のでattributesは、私はそれが何もしない画像をクリックすると

function imageurls(elem, imgurl) { 
 
    var y = document.createElement("DIV") 
 
      y.style.width = "100%"; 
 
     y.class = "overlay-content" 
 
    var x = document.createElement("IMG") 
 
     x.style.width = "100%"; 
 
     x.setAttribute("src", imgurl); 
 
     x.setAttribute("width", "900px"); 
 
     x.setAttribute("height", "900px"); 
 
     x.setAttribute("alt", "_blank"); 
 
      y.appendChild(x); 
 
    document.getElementById("Imagediv").appendChild(y).style.width = "100%"; 
 

 
    console.log(document.getElementById('Imagediv').innerHTML) 
 
} 
 

 
function closeNav() { 
 
    document.getElementById("Imagediv").style.width = "0%"; 
 
}

<div id="Imagediv" class="overlay"> 
 
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
 
</div> 
 
<img src="../Images/square 300/Drawing/angel face300.jpg" style='height: 300px; width: 300px;' onclick="imageurls(this, '../Images/A4/drawing/angel face.jpg')" />