OK I have an easier solution for you - your attempt to hide and show the relative images set me thinking. When the 'print' button is clicked the script will go through each checkbox and see if its checked - if it is the 'product' div which houses each image remains visible, otherwise its not displayed, leaving you with only those that have been selected to print. If you can get your array back from your server in json format and into an array and loop through that adapting the code below I think youre good to go. At the moment this code example is still manually producing the array of images but its easy enough to adapt. I cant get the images from your API end point as there is a cross-browser-origin (CORS) error other wise I would just use the fetch API to bring them into the code directly. Test it out by creating a 'toy_images' folder and putting a few of your images in there then update the 'selectedToys' array so the images are the same as in your test 'toy_images' folder <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Print Images</title>
<style>
* {
box-sizing: border-box;
}
body {
position: relative;
}
.printPage, .selectionPage {
display: block;
margin: 50px auto;
}
.toySelection {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0 40px 40px 40px;
background-color: #fff;
}
img {
width: 100%;
max-width: 100%;
}
.product {
width: 22%;
margin: 0 0 30px 0;
display: grid;
place-items: center;
border: 1px solid #ccc;
}
.selectionPage {
display: none;
}
</style>
</head>
<body>
<button class="printPage" onclick="printImagesFunc()">Print</button>
<button class="selectionPage" onclick="selectionPageFunc()">Back</button>
<div class="toySelection"></div>
<script>
const toySelection = document.querySelector('.toySelection');
const printPage = document.querySelector('.printPage');
const selectionPage = document.querySelector('.selectionPage');
let selectedToys = [
'006.jpg',
'012.jpg',
'019.jpg',
'026.jpg',
'006.jpg',
'012.jpg',
'019.jpg',
'026.jpg',
'006.jpg',
'012.jpg',
'019.jpg',
'026.jpg',
'006.jpg',
'012.jpg',
'019.jpg',
'026.jpg',
'006.jpg',
'012.jpg',
'019.jpg',
'026.jpg',
'006.jpg',
'012.jpg',
'019.jpg',
'026.jpg',
'006.jpg',
'012.jpg',
'019.jpg',
'026.jpg',
'006.jpg',
'012.jpg',
'019.jpg',
'026.jpg',
]
// Loop through toys of page load
selectedToys.forEach((img , index) => {
toySelection.innerHTML += `
<div class="product">
<img src="toy_images/${img}" alt=""/>
<input class="checkedToy" type="checkbox" value="${index}" >
</div>
`
});
// Get all the product boxes
const product = document.querySelectorAll('.product');
// Print Images
function printImagesFunc() {
selectionPage.style.display = "block"
printPage.style.display = "none"
const checkedToy = document.querySelectorAll('.checkedToy')
checkedToy.forEach((checkedToy , index) => {
if(checkedToy.checked) {
product[index].style.display = "block";
}
else {
product[index].style.display = "none";
}
})
setTimeout(function() {
window.print();
}, 100)
}
// Go back to toy selection page
function selectionPageFunc() {
window.location.href = "toy_selection.html";
}
</script>
</body>
</html>
... View more