I am currently working on a program that reads specific points of a JSON file that a user uploads and then displays the text and media based on the contents of the JSON file. For this, I have an HTML file that I am trying to add child elements to. To do this, I have used .appendChild. I tried using both .setAttribute and just .src (along with others) but neither yielded what I expected. When it comes across media it will display a video file but will not display images as I expect it to. It does enter the portion of the switch statement for images and enters the expected avenue of the if statement (in this case, it would be hitting the else portion on both videos and images). I know that my file paths are accurate and that the files exist. It seems that when I run this it does not actually append the child for the images, only the video files. I have looked around but have not found any solutions that helped me deal with this issues. [Online solution 1][1] [Online solution 2][2]
JS Code
//mediaArray is set earlier to be the number of images listed in the JSON file.
let test = document.getElementById("test");
for(var j = 0; j<mediaArray.length; j++){
switch (fileExtension) {
case 'png':
case 'jpeg':
case 'jpg':
case 'gif':
//Case for images
if (file_name.search("X.json") != -1) {
//elementMsg.find(".time").text(date);
var media = document.createElement("img");
media.setAttribute('src', 'X_media/' + mediaFile);
media.setAttribute('class', 'picture' + j);
media.setAttribute('id', 'thePic' + j);
test.appendChild(media);
} else{
//elementMsg.find(".time").text(date);
var media = document.createElement("img");
media.src = codeFile2 + 'media/' + mediaFile;
media.className = "picture" + j;
media.id = "thePic" + j;
media.width = "200";
media.height = "200";
media.alt = "Could Not Display Image";
test.appendChild(media);
console.log(media);
}
break;
default:
//Case for videos
if (file_name.search("X.json") != -1) {
//elementMsg.find(".time").text(date);
var video = document.createElement('video');
video.src = codeFile2 + 'X_media/' + mediaFile;
video.className = 'vid' + j;
video.id = 'theVid' + j;
video.controls = true;
test.appendChild(video);
} else {
//elementMsg.find(".time").text(date);
var video = document.createElement('video');
video.src = codeFile2 + 'media/' + mediaFile;
video.className = 'vid' + j
video.id = 'theVid' + j
video.controls = true;
test.appendChild(video);
}
}
}
HTML
<div class="col-8 p-0 chat">
<div class="d-flex h-100 flex-column">
<div class="p-2 data">
<div id="centralizeData" class="_2wUmf V-zSs focusable-list-item">
<div class="cvjcv EtBAv"><span id="dataContents" class="emoji-content i0jNr"></span></div>
</div>
<div id="template" class='contents'>
<span id = "test" class="test"></span>
<span class="time"></span>
</div>
</div>
<div class="mt-auto inputchat">
<div class="d-flex p-2 align-items-center">
<div class="col-auto align-items-center">
<span class="material-icons">insert_emoticon</span>
</div>
<div class="col-auto">
<span class="material-icons">attach_file</span>
</div>
<div class="col">
<div class="input-group">
<input class="form-control bg-dark shadow-none border-0 rounded-pill" type="search" value="search" id="example-search-input">
<span class="input-group-append">
<button class="btn rounded-pill border-0 ml-n5" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</div>
<div class="col-auto">
<span class="material-icons">mic</span>
</div>
</div>
</div>
</div>
</div>
[1]: https://stackoverflow.com/questions/70581034/javascript-appendchild-not-showing-the-correct-image
[2]: https://stackoverflow.com/questions/66992423/javascript-appendchild-not-working-when-i-try-to-add-image-on-click