Cześć i czołem
Chce stworzyć coś w stylu galerii zdjęć i mam problem ze stworzeniem jednego z elementów.
Kontener na zdjęcie stworzyłem, ale nie mogę do niego wstrzyknąć obiektu img.
Podpowie ktoś jak sobie z tym poradzić?
W konsolce dostaje taki błąd
pen.js:11 Uncaught TypeError: Cannot read property 'appendChild' of undefined
at HTMLDivElement.showFullRes
<div class="container">
<div class="image">
<div class="item"></div>
</div>
</div>
.container{
positioon: relative;
}
*{
box-sizing: border-box;
}
.image{
width: 450px;
height: 200px;
background: url('https://images.unsplash.com/photo-1542083131-a1e3fc8fc6c4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1267&q=80') center;
cursor: pointer;
}
.image:hover > .item{
background: crimson;
}
.item{
width: 100%;
height: 100%;
opacity: 0.5;
color: white;
}
.image-container{
width: 700px;
top: 0;
left: 300px;
height: 700px;
position: absolute;
border: 10px solid crimson;
}
.fullImage{
width: 250px;
height: 250px;
}
var image = document.querySelector('.image');
image.addEventListener("click", showFullRes);
function showFullRes(){
var imageContainer = document.createElement('div');
imageContainer.className = "image-container";
document.body.appendChild(imageContainer);
var testowa = document.createElement('div');
testowa.className = "test";
document.imageContainer.appendChild(testowa);
}
function getUrl(){
style = image.currentStyle || window.getComputedStyle(image, false),
bi = style.backgroundImage.slice(4,-1).replace(/"/g, "");
console.log(bi);
}