Я пытаюсь создать / написать обработчик событий JS, который выполняет что-то, когда изображение щелкает из списка изображений. Для этого я вставил div я нацеливаюсь и Js код в go вместе с ним. Я просто хочу, чтобы при нажатии на изображение отображалась его информация и ниже, при нажатии на второе изображение отображалась его информация (перезаписывая описание предыдущих изображений) и так далее. Мой код:
window.onload = function () {
var links = document.getElementsByClassName('a');
for (var i = 0; i < links.length; i++) {
links[i].addEventListener('click', function (e) {
// Hide results
document.getElementById('placeholder').style.display = 'none';
// Show loader
document.getElementById('loading').style.display = 'block';
if (document.getElementById('imagedescription')) {
// imagedescription = document.getElementById('imagedescription')
// placeholder.parentNode.removeChild(imagedescription)
document.getElementById('imagedescription').style.display = 'none'
}
setTimeout(() => showpic(this), 2000);
e.preventDefault();
});
}
function showpic(pic) {
document.getElementById('loading').style.display = 'none';
var imagedescription = document.createElement('div');
imagedescription.setAttribute('id', 'imagedescription');
var desctext = document.createTextNode('');
imagedescription.appendChild(desctext);
document.getElementById('placeholder').style.display = 'block';
var source = pic.getAttribute('href');
var placeholder = document.getElementById('placeholder');
placeholder.setAttribute('src', source);
if (pic.getAttribute('title')) {
var text = pic.getAttribute('title');
} else {
var text = '';
}
if (text == "1") {
prob = '1'
aces = 1
arks = 5
results = {
something:'55',
something1:'44',
something2:'556'
}
} else if (text == "2") {
prob = '1'
aces = 1
arks = 5
results = {
something:'55',
something1:'44',
something2:'556'
}
} else if (text == "3") {
prob = '1'
aces = 1
arks = 5
results = {
something:'55',
something1:'44',
something2:'556'
}
} else if (text == "4") {
prob = '1'
aces = 1
arks = 5
results = {
something:'55',
something1:'44',
something2:'556'
}
} else {
prob = 'Probability 95%'
faces = 1
landmarks = 5
results = {
nose: '(303, 131)',
mouth_right: '(313, 141)',
right_eye: '(314, 114)',
left_eye: '(291, 117)',
mouth_left: '(296, 143)'
}
}
test = `<button type="button" class="btn btn-primary" style="margin-right: 10px;"> <span class="badge">${prob}</span></button> <button type="button" class="btn btn-success" style="margin-right: 10px;">aces <span class="badge">${aces}</span></button><button type="button" class="btn btn-danger">arks <span class="badge">${arks}</span></button><br /> <span class="badge badge-info">something: ${results.something}</span> <br /> <span class="badge badge-info">something1: ${results.something1}</span> <span class="badge badge-info">something2: ${results.something2}</span> <br /> <span class="badge badge-info">something2: ${results.something2}</span> <span class="badge badge-info">Lefted: ${results.something}</span> <br />`
test1 = ``
var imageDescription_d = document.createElement('div');
imageDescription_d.setAttribute("id", "imageDescription_d");
var imageDescription_d2 = document.createElement('div');
imageDescription_d2.setAttribute("id", "imageDescription_d2");
if (imagedescription.firstChild.nodeType == 3) {
imagedescription.firstChild.nodeValue = text;
imageDescription_d.innerHTML = test
imageDescription_d2.innerHTML = test1
}
// imageDescription_d2.innerHTML = test1
placeholder.parentNode.appendChild(imagedescription);
imagedescription.parentNode.insertBefore(imageDescription_d, imagedescription.nextSibling);
imageDescription_d.parentNode.insertBefore(imageDescription_d2, imageDescription_d.nextSibling);
return false;
}
}
#loading {
display: none;
}
#imagegallery {
display: inline-block
}
#results {
display: none;
}
<div id="content">
<h3>Select Images Below</h3>
<ul id="imagegallery" , style="padding-bottom: 20px;">
<li>
<a class='a' href="./img/team/t1.jpg" title="Black Man in Glasses" onclick="" style="padding-right: 10px;
padding-left: 95px;">
<img src="./img/team/t1.jpg" height="75px" width="75px"
alt="the band in concert" />
</a>
</li>
<li>
<a class='a' href="./img/team/t2.jpg" title="White Man in Glasses"
style="padding-right: 10px;">
<img src="./img/team/t2.jpg" height="75px" width="75px" alt="the bassist" />
</a>
</li>
<li>
<a class='a' href="./img/team/t3.jpg" title="Brown Women"
style="padding-right: 10px;">
<img id='image' src="./img/team/t3.jpg" height="75px" width="75px"
alt="the guitarist" />
</a>
</li>
<li>
<a class='a' href="./img/team/t4.jpg" title="White Women"
style="padding-right: 10px;">
<img id='image' src="./img/team/t4.jpg" height="75px" width="75px"
alt="the audience" />
</a>
</li>
</ul>
<div>
<img id='placeholder' , src="./img/resources/neutral_1.jpg" , height="450px"
width="550px" alt="Image gooes here" , style="margin-bottom: 50px;padding: 10px;">
</div>
<div id="loading">
<img src="img/loading.gif" height="450px" width="550px" alt="">
</div>
<!-- <div id="show">
<h1 id='h'>It works</h1>
</div> -->
</div>
</div>
Все работает, за исключением того, что он добавляет детали, т.е. вместо замены imagedescription_d & imagedescription_d2 он создает новые и добавляет к ним. Я реализовал различные проверки, которые, если он выходит, удаляют его или очищают, но ни одна из них не работает. Любая помощь? Где я не прав?