Develop Reference

How to download image from another page HTML/JavaScript

I wrote a code where it displays only images from different website. I want to download them when i click their child download button. Problem is that it opens image it's self in separate page. Is there any awy to not make it open different page and download the parent image. Here's how I'm trying to download it:
<div class="container">
<div class="row">
<div class="col-sm">
<div id="image_container"></div>
</div>
</div>
</div>
</div>
<script>
for (let i = 0; i < 23; i++) {
Draw_Canvas(i);
document.querySelector("#image" + i).onclick = () => {
console.log(document.getElementById("image" + i).src);
localStorage.setItem("Image", document.getElementById("image" + i).src);
}
}
function Draw_Canvas(i) {
var div = document.createElement('div');
div.id = "image" + i;
div.style.borderRadius = "1%";
div.style.width = "200px";
div.style.height = "200px";
div.style.border = "1px solid";
div.style.padding = "0";
div.style.margin = "0";
var divParent = document.getElementById("image_container").appendChild(div);
var img = new Image();
img.src = "https://iynmemes.netlify.app/images_memes/meme" + i + ".jpg";
img.id = "image" + i;
img.loading = "lazy";
img.style.width = "100%";
img.style.height = "100%";
img.style.objectFit = "contain";
img.className = "img-fluid";
divParent.appendChild(img);
//Download Button Style
var downloadButton = document.createElement("button");
divParent.appendChild(downloadButton);
downloadButton.textContent = "💾";
downloadButton.style.borderRadius = "100%";
downloadButton.style.backgroundColor = "orange";
downloadButton.style.width = "50px";
downloadButton.style.height = "50px";
downloadButton.style.fontSize = "18px";
downloadButton.style.position = "relative";
downloadButton.style.float = "right";
downloadButton.style.bottom = "55px";
downloadButton.style.display = "none";
div.addEventListener("mouseover", function () {
downloadButton.style.display = "block";
});
div.addEventListener("mouseout", function () {
downloadButton.style.display = "none";
});
downloadButton.addEventListener("click", function () {
var a = document.createElement('a');
a.href = img.src;
a.download = "Meme (IYN)";
a.click();
});
}
</script>

trigger js alerts from es6 in iOS safari not working

I have a website that triggers an alert when items are added to the cart. I'm using javascript ES6, html5.
I'm dynamically creating bootstrap styled cards with menu items on the page and a add to cart button. when the add to cart button is pressed an alert is triggered.
The alert attempts to trigger on iOS 13.x.x safari but doesn't show. I attempted to set a timeout, but that didn't work. It has to be the way it's being called. I really don't know what to try next. I read that user navigation (back, forward) can break alerts. In the 'addEventListener' of the 'btn' towards the bottom of this horrific method is where the problem arises. Why is this not working on safari mobile?
createMenuCard(menu){
var heading = document.getElementById("concession-name");
heading.innerText = menu.menus.menu.concessionName;
var card = null;
var body = null;
var lsgroup = null;
for(var i = 0; i < menu.menus.menu.categories.length; i++){
for(var j = 0; j < menu.menus.menu.categories[i].menuItems.length; j++){
this.card = document.createElement('div');
this.card.className = 'card';
this.card.setAttribute('id', this.uuidv4());
this.card.setAttribute('style', 'width: 20rem;');
this.body = document.createElement('div');
this.body.className = 'card-body';
var title = document.createElement('div');
title.className = 'card-title';
title.innerText = menu.menus.menu.categories[i].menuItems[j].name;
this.body.appendChild(title);
this.lsgroup = document.createElement('div');
this.lsgroup.className = "list-group";
this.body.appendChild(this.lsgroup);
for(var k = 0; k < menu.menus.menu.categories[i].menuItems[j].subItems.length; k++){
if(menu.menus.menu.categories[i].menuItems[j].subItems[k].name === "")
{
var id = this.uuidv4();
var input = document.createElement("input");
input.setAttribute("type", "checkbox");
input.setAttribute("name", "");
input.setAttribute("id", id);
input.setAttribute("value", menu.menus.menu.categories[i].menuItems[j].name);
input.setAttribute("price", menu.menus.menu.categories[i].menuItems[j].subItems[k].price);
this.lsgroup.appendChild(input);
// label
var label = document.createElement("label");
label.className = "list-group-item";
label.setAttribute("for", id);
label.innerText = menu.menus.menu.categories[i].menuItems[j].subItems[k].price + " " + menu.menus.menu.categories[i].menuItems[j].name;
this.lsgroup.appendChild(label);
}
else
{
var id = this.uuidv4();
// input
var input = document.createElement("input");
input.setAttribute("type", "checkbox");
input.setAttribute("name", "");
input.setAttribute("id", id);
input.setAttribute("value", menu.menus.menu.categories[i].menuItems[j].subItems[k].name);
input.setAttribute("price", menu.menus.menu.categories[i].menuItems[j].subItems[k].price);
this.lsgroup.appendChild(input);
// label
var label = document.createElement("label");
label.className = "list-group-item";
label.setAttribute("for", id);
label.innerText = menu.menus.menu.categories[i].menuItems[j].subItems[k].price + " " +menu.menus.menu.categories[i].menuItems[j].subItems[k].name;
this.lsgroup.appendChild(label);
}
}
var btn = document.createElement('a');
btn.setAttribute("href", "#"); // javascript:toCart()
btn.addEventListener("click", (e)=> {
var inputs = e.path[2].querySelector("div > div.list-group").getElementsByTagName("input");
var description = e.path[2].querySelector("div > div.card-title").innerText;
for(var l = 0; l < inputs.length; l++){
if(inputs[l].checked === true){
var obj = {
option : inputs[l].value,
price : inputs[l].getAttribute("price")
};
setTimeout(function(){
window.alert("Added: " + description + " to cart");
}, 300);
//window.alert("Added: " + description + " to cart");
description += " " + obj.option;
var appItem = new AppItems(description, obj.price, 1);
cart.addItem(appItem);
}
}
});
btn.className = "btn btn-primary";
btn.innerText = "Add To Cart";
this.body.appendChild(btn);
this.card.appendChild(this.body);
var container = document.getElementById('cards');
container.appendChild(this.card);
}
}
var chk = document.getElementById("checkout");
chk.addEventListener("click", (e)=> {
cart.save();
window.open("./cart.html","_self");
});
}

Creating a card matching game

I want to create a card matching game but I have an issue showing the images that are supposed to be hidden. When I click on a card, the path of the image shows instead of the actual image.
Here are all the codes that I have written:
div#card_board {
background: #ccc;
border: #999 1px solid;
width: 710px;
height: 600px;
padding: 24px;
margin: 0px auto;
}
div#card_board>div {
background: url(cardQtion.jpg) no-repeat;
background-size: 100%;
border: #000 1px solid;
width: 114px;
height: 132px;
float: left;
margin: 10px;
padding: 20px;
font-size: 64px;
cursor: pointer;
text-align: center;
}
<script>
var cardArray = new Array();
cardArray[0] = new Image();
cardArray[0].src = 'cardA.jpg';
cardArray[1] = new Image();
cardArray[1].src = 'cardA.jpg';
cardArray[2] = new Image();
cardArray[2].src = 'cardB.jpg';
cardArray[3] = new Image();
cardArray[3].src = 'cardB.jpg';
cardArray[4] = new Image();
cardArray[4].src = 'cardC.jpg';
cardArray[5] = new Image();
cardArray[5].src = 'cardC.jpg';
cardArray[6] = new Image();
cardArray[6].src = 'cardD.jpg';
cardArray[7] = new Image();
cardArray[7].src = 'cardD.jpg';
cardArray[8] = new Image();
cardArray[8].src = 'cardE.jpg';
cardArray[9] = new Image();
cardArray[9].src = 'cardE.jpg';
cardArray[10] = new Image();
cardArray[10].src = 'cardF.jpg';
cardArray[11] = new Image();
cardArray[11].src = 'cardF.jpg';
var cardVal = [];
var cardIDs = [];
var cardBackFace = 0;
Array.prototype.cardMix = function() {
var i = this.length,
j, temp;
while (--i > 0) {
j = Math.floor(Math.random() * (i + 1));
temp = this[j];
this[j] = this[i];
this[i] = temp;
}
}
function newBoard() {
cardBackFace = 0;
var output = "";
cardArray.cardMix();
for (var i = 0; i < cardArray.length; i++) {
output += '<div id="card_' + i + '" onclick="cardBackcard(this,\'' + cardArray[i].src + '\')"></div>';
}
document.getElementById('card_board').innerHTML = output;
}
function cardBackcard(tile, val) {
if (tile.innerHTML == "" && cardVal.length < 2) {
tile.style.background = '#FFF';
tile.innerHTML = val;
if (cardVal.length == 0) {
cardVal.push(val);
cardIDs.push(tile.id);
} else if (cardVal.length == 1) {
cardVal.push(val);
cardIDs.push(tile.id);
if (cardVal[0] == cardVal[1]) {
cardBackFace += 2;
cardVal = [];
cardIDs = [];
if (cardBackFace == cardArray.length) {
alert("Board cleared... generating new board");
document.getElementById('card_board').innerHTML = "";
newBoard();
}
} else {
function card2Back() {
var card_1 = document.getElementById(cardIDs[0]);
var card_2 = document.getElementById(cardIDs[1]);
card_1.style.background = 'url(cardQtion.jpg) no-repeat';
card_1.innerHTML = "";
card_2.style.background = 'url(cardQtion.jpg) no-repeat';
card_2.innerHTML = "";
cardVal = [];
cardIDs = [];
}
setTimeout(card2Back, 700);
}
}
}
}
</script>
<body>
<div id="card_board"></div>
<script>
newBoard();
</script>
</body>

You have some less than optimal code and frankly mine is only a refactor of that and has much that can be improved - study up.
Given that, here is the refactor:
I really dislike event in markup SO I moved that click handler invocation right into the code.
I saw two sets of JavaScript in your page why? I simply put them both in one.(see the last line of this).
Your array of images thing was not working and verbose so I used an array of names and created an array of images from that.
Insertion of an element is different than text so I used tile.appendChild(cardArray[cardIndex]); instead
Code:
// create an array of card images
var cardArray = [];
var cards = ['cardA.jpg', 'cardB.jpg', 'cardC.jpg', 'cardD.jpg', 'cardE.jpg', 'cardF.jpg'];
for (var i = 0; i < cards.length; i++) {
var im = new Image();
im.src = cards[i];
im.alt = cards[i];
cardArray.push(im);
cardArray.push(im);
}
var cardVal = [];
var cardIDs = [];
var cardBackFace = 0;
Array.prototype.cardMix = function() {
var i = this.length,
j, temp;
while (--i > 0) {
j = Math.floor(Math.random() * (i + 1));
temp = this[j];
this[j] = this[i];
this[i] = temp;
}
}
function newBoard() {
cardBackFace = 0;
var output = "";
cardArray.cardMix();
for (var i = 0; i < cardArray.length; i++) {
output += '<div id="card_' + i + '" class="cardcontainer" data-card="' + i + '"></div>';
}
document.getElementById('card_board').innerHTML = output;
var classname = document.getElementsByClassName("cardcontainer");
for (var i = 0; i < classname.length; i++) {
classname[i].addEventListener('click', cardBackcard, false);
}
}
function card2Back() {
var card_1 = document.getElementById(cardIDs[0]);
var card_2 = document.getElementById(cardIDs[1]);
card_1.style.background = "url('cardQtion.jpg') no-repeat";
card_1.innerHTML = "";
card_2.style.background = "url('cardQtion.jpg') no-repeat";
card_2.innerHTML = "";
cardVal = [];
cardIDs = [];
}
function cardBackcard() {
// these used to be in the HTML as parameters, I refactored to pass `this`
// and then use the attribute which is the index of the card it had
var tile = this;
//multiply by 1 to get number, could use parseInt but I did not
var cardIndex = this.getAttribute("data-card") *1;
if (!(tile.innerHTML == "" && cardVal.length < 2)) return;
tile.style.background = '#FFF';
tile.appendChild(cardArray[cardIndex]);
if (!(cardVal.length == 0 && cardVal[0] == cardVal[1])) return;
cardVal.push(cardIndex);
cardIDs.push(tile.id);
if (cardVal.length == 1) {
if (cardVal[0] == cardVal[1]) {
cardBackFace += 2;
cardVal = [];
cardIDs = [];
if (cardBackFace == cardArray.length) {
alert("Board cleared... generating new board");
document.getElementById('card_board').innerHTML = "";
newBoard();
}
} else {
setTimeout(card2Back, 700);
}
}
}
newBoard();

How to add space between two images?

How to add space between two images in same cell in JavaScript? Below is the code, I want to add space between download and delete button.
var cell = row.insertCell();
var img = document.createElement('img');
img.src = '/ock/images/oess_images/item_download16.png';
img.alt = "Download document";
img.border = "0";
img.style.cursor = "pointer";
img.longDesc = "location.href='/download.php?docid=" + jsonData.suppdocs[i].docid + "'";
img.onclick = function () {
eval(this.longDesc)
};
cell.appendChild(img);
cell.align = "left";
cell.className = "field";
if (document.mainform.candeletedoc.value == 1) {
var img = document.createElement('img');
img.src = '/ock/images/oess_images/item_delete16.png';
img.alt = "Delete document";
img.border = "0";
img.style.cursor = "pointer";
img.longDesc = "deleteDocument(" + jsonData.suppdocs[i].docid + ")";
img.onclick = function () {
eval(this.longDesc)
};
cell.appendChild(img);
cell.align = "center";
cell.className = "field";
} //end if

Try adding a margin to one of the photos. Or make the boarder larger.
img.border = "5";
Hope this helps

Toggling div inside chrome extension content-script

I am trying to toggle a div using a link in another, with all this being done through the content-script of a chrome extensions, but when I run the unpacked extension I am not able to toggle the div at all...any ideas?
Below is the code for the content script as it sits now.
function createHistoryDiv() {
var divHeight = 97;
var divMargin = 10;
var div = document.createElement("div");
div.id = "history";
var st = div.style;
st.display = "block";
st.zIndex = "10000000";
st.top = "0px";
st.left = "0px";
st.right = "0px";
st.height = divHeight + "%";
st.background = "rgba(255, 255, 255, .01)";
st.margin = divMargin + "px";
st.padding = "5px";
st.border = "5px solid black";
st.color = "black";
st.fontFamily = "sans-serif";
st.fontSize = "36";
st.position = "fixed";
st.overflow = "hidden";
st.boxSizing = "border-box";
st.pointerEvents = "none";
document.documentElement.appendChild(div);
var heightInPixels = parseInt(window.getComputedStyle(div).height);
st.height = heightInPixels + 'px';
//document.body.style.webkitTransform = "translateY("
//+ (heightInPixels + (2 * divMargin))+ "px)";
return div;
}
function buildDivContent(historyDiv, data) {
var ul = document.createElement('ul');
historyDiv.appendChild(ul);
for (var i = 0, ie = data.length; i < ie; ++i) {
var a = document.createElement('a');
a.href = data[i];
a.appendChild(document.createTextNode(data[i]));
var li = document.createElement('li');
li.style.color = "black";
li.style.display = "inline";
li.style.wordBreak = "break all";
li.appendChild(a);
a.style.color = "black";
a.style.fontSize = "24px";
a.style.fontFamily = "sans-serif";
a.style.linkDecoration = "none";
ul.appendChild(li);
}
}
chrome.runtime.sendMessage({ action: "buildTypedUrlList" }, function(data) {
var historyDiv = createHistoryDiv();
buildDivContent(historyDiv, data);
});
function logoDiv(){
var div2 = document.createElement("div");
div2.id = "logo";
var st = div2.style;
st.display = "block";
st.zIndex = "10000001";
st.bottom = "0px";
//st.left = "0px";
st.right = "0px";
//st.height = "42px";
//st.width = "210px";
st.background = "rgba(255, 255, 255,1)";
st.padding = "5px";
st.margin = "10px";
st.border = "5px solid black";
st.color = "black";
st.fontFamily = "sans-serif";
st.position = "fixed";
st.overflow = "hidden";
st.boxSizing = "border-box";
//st.pointerEvents = "none";
document.documentElement.appendChild(div2);
div2.innerHTML = div2.innerHTML + "TRANSPARENCY";
//div2.innerHTML = div2.innerHTML + "<p style = \"display:block;font-size:24px;font-family:sans-serif;margin:0;padding:5px;color:black;\">TRANSPARENCY</p>";
return div2;
function toggle_visibility(id) {
var e = document.getElementById("history");
if(e.style.display == "block")
e.style.display = "hidden";
else
e.style.display = "block";
}
}
chrome.runtime.sendMessage({ action: "buildTypedUrlList" }, function(data){
var titleDiv = logoDiv();
buildDivContent(titleDiv);
});

There are various problems with your code (e.g. display: hidden is not an allowed key-value pair).
So, in order to be functional, the content script should look like this (anything not included below should be removed):
function createHistoryDiv() {
/* No change here. Place the code exactly
* as it is in the code you posted */
}
function buildDivContent(historyDiv, data) {
/* No change here. Place the code exactly
* as it is in the code you posted */
}
function createToggleDiv(historyDiv) {
/* Create the toggle div */
var div = document.createElement("div");
div.textContent = "TRANSPARENCY";
/* Style the toggle div */
var st = div.style;
st.display = "block";
st.zIndex = "10000001";
st.bottom = "0px";
st.right = "0px";
st.background = "rgb(255, 255, 255)";
st.padding = "10px";
st.margin = "10px";
st.border = "5px solid black";
st.color = "black";
st.fontFamily = "sans-serif";
st.fontSize = "24px";
st.position = "fixed";
st.overflow = "hidden";
st.boxSizing = "border-box";
st.cursor = "pointer";
/* Make the toggle div behave
* (i.e. toggle `historyDiv` upon 'click') */
div.addEventListener("click", function(evt) {
evt.preventDefault();
var st = historyDiv.style;
st.display = (st.display == "block") ? "none" : "block";
});
/* Insert the toggle div into the DOM */
document.documentElement.appendChild(div);
}
chrome.runtime.sendMessage({ action: "buildTypedUrlList" }, function(data) {
var historyDiv = createHistoryDiv();
var toggleDiv = createToggleDiv(historyDiv);
buildDivContent(historyDiv, data);
});