Bild Variable basierend auf Link über Überlauf

Question

Grundsätzlich habe ich viele Bild Links, und ich möchte diese Links einen festen Überlappungsstil auslösen, aber ein einzigartiges Bild basierend auf dem Bild Link geklickt.

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

^^ eine grundlegende Bild Link w/Onclick

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

^^ mein Java-Skript, wo das Problem, aber ich bin nicht sicher zu sein scheint, was Aspekt davon ist

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

alle meine CSS-Styling funktioniert perfekt, und wenn ich nur die document.get.element .... und entfernen Sie die var x und y das Overlay funktioniert.

Answer 1

variable Erklärung falsch war .use wie diese

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

nach der Variablendeklaration den Stil Nehmen.

die var x entfernen und y das Overlay funktioniert.

Da die Variable Erklärung falsch war so attributes wurde anhängen nicht in das neu erstellte Element

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')" />