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>

how to change the img.src value in javascript

I have a code in JavaScript where it creates an HTML page, just a div and an image tag. The tricky part for me is I'm trying to generate/populate this image tag with img.src value with the help of an if statement.
The code goes something like this.
var propertyname;
var content = document.createElement('div');
var img = document.createElement('img');
if (propertyname == 'house') {
img.src = 'house.jpg';
}
content.appendChild(img);
How can I make this code better. Right now the image is not being inserted when I check in the developer tools for Chrome the img.src is undefined.
Thanks in advance.

var propertyname;
var url= 'url';
var content = document.createElement('div');
var $img = $('<img id='img12'>');
if (propertyname == 'house') {
$img.attr('src', url).css({ 'height': height, 'width': width });
}
content.appendChild($img);

var propertyname = "house";
var content = document.createElement('div');
var img = document.createElement('img');
if (propertyname == 'house') {
img.src = 'house.jpg';
}
content.appendChild(img);
document.getElementById("demo").appendChild(content);
<div id="demo"></div>

It's working fine when your propertyname variable has a value.
var propertyname = 'house';
var content = document.createElement('div');
var img = document.createElement('img');
if (propertyname == 'house') {
img.src = 'https://placehold.it/300x100';
}
content.appendChild(img);
document.getElementsByTagName('body')[0].appendChild(content);

Try this. This is working:-
var propertyname='house';
var content = document.createElement('div');
var img = document.createElement('img');
img.src="http://i1.wp.com/sourabhsomani.com/wp-content/uploads/2016/07/cropped-10407476_754773647911718_359758615924605603_n-1.jpg?fit=240%2C240"
if (propertyname == 'house') {
img.src = 'https://pbs.twimg.com/profile_images/718784555281309696/KRYC9gLU_400x400.jpg';
}
content.appendChild(img);
document.getElementById("myDiv").appendChild(content);
<div id="myDiv">
</div>

Try like this
var x = document.createElement("IMG");
x.setAttribute("src",'house.jpg');

Given code is working fine for me if propertyname == "house"
Check below example:-
var propertyname = "house";
var content = document.createElement('div');
var img = document.createElement('img');
if (propertyname == 'house') {
img.src = 'https://s-media-cache-ak0.pinimg.com/236x/bb/ce/4f/bbce4fcc3d8560b612e766704aba4dd2--tudor-cottage-tudor-house.jpg';
}
content.appendChild(img);
document.getElementsByTagName('body')[0].appendChild(content);

See: Documentation
Try
var propertyname;
var content = document.createElement('div');
var img = document.createElement('img');
if (propertyname == 'house') {
img.setAttribute('src', 'house.jpg');
}
content.appendChild(img);

How to Change the Source of an Image W/JS

I have to change the src of an image using java script and I am pretty sure i hit a road block, in the html I have 3 li elements and in the id is the source of the mouseenter img. I feel like I am close but so far. Heres my code so far. Thanks for any help!
Javascript:
var $ = function (id) {
return document.getElementById(id);};
window.onload = function () {
var links = document.getElementsByTagName("li"),
imgElements = document.getElementsByTagName("img"),
imgNode,
i,
URLone,
URLtwo,
link,
image;
for (i = 0; i < imgElements.length; i++) {
imgNode = imgElements[i];
}
imgNode.mouseenter = function () {
var img = this;
URLtwo = img.getAttribute('id');
img.src = URLtwo;
}
imgNode.mouseout = function () {
var img = this;
URLone = img.getAttribute('src');
img.src = URLone;
};
//preload
for (i = 0; i < links.length * 2; i++) {
link = links[i];
image = new Image();
image.src = link.src;
image = new Image();
image.src = link.id;
}};
HTML ::
<body>
<section>
<h1>Ram Tap Combined Test</h1>
<ul id="image_rollovers">
<li><img src="images/h1.jpg" alt="" id="images/h4.jpg"></li>
<li><img src="images/h2.jpg" alt="" id="images/h5.jpg"></li>
<li><img src="images/h3.jpg" alt="" id="images/h6.jpg"></li>
</ul>
</section>
Working jQuery :
$(document).ready(function() {
$("#image_rollovers img").each(function() {
var oldURL = $(this).attr("src"); // gets the src attribute
var newURL = $(this).attr("id"); // gets the id attribute
// preload images
var rolloverImage = new Image();
rolloverImage.src = newURL;
$(this).hover(
function() {
$(this).attr("src", newURL); // sets the src attribute
},
function() {
$(this).attr("src", oldURL); // sets the src attribute
}
); // end hover
}); // end each
}); // end ready

for (i = 0; i < imgElements.length; i++) {
(function(imgNode) {
imgNode.addEventListener("mouseenter", function () {
var img = this;
URLtwo = img.getAttribute('id');
img.src = URLtwo;
}, false);
imgNode.addEventListener("mouseout", function () {
var img = this;
URLone = img.getAttribute('src');
img.src = URLone;
}, false);
})(imgElements[i]);
}

A couple of problems in your code.
First for loop closing right away, instead should close after your
imgNode.mouseout function
for (i = 0; i < imgElements.length; i++) {
imgNode = imgElements[i];
imgNode.mouseenter = function () {
var img = this;
URLtwo = img.getAttribute('id');
img.src = URLtwo;
}
imgNode.mouseout = function () {
var img = this;
URLone = img.getAttribute('src');
img.src = URLone;
};
}
//preload
for (i = 0; i < links.length * 2; i++) {
link = links[i];
image = new Image();
image.src = link.src;
image = new Image();
image.src = link.id;
}};
Last for loop runs 6 times but there are only 3 tags in html. When it coming to loop no. 3 it doesn't get any value for link.src.
Also links variable provides a collection of 'li' tags and not 'img', last for loop requires src from link.src which doesn't have any value, need to change
var links = document.getElementsByTagName("li"),
to
var links = document.getElementsByTagName("img"),
Try that. Hopefully after correcting above errors your code should work.

How to add delay only when the function is called?

i am trying to call the function with delay.
window.setInterval(function(){
//$('.product-display').delay(3000).hide();
document.getElementById('product-list-display').style.display = "none";
},3000);
The above code hides the div after 3 seconds, the above snippet is called in show div function. what i need to do is, i want to invoke the the above delay function only when the show div function is called...right now the function executes every 3 secnds i.e i am using setInterval for hiding. but i want to hide after 3 seconds only when show div is called. how can i do this?
can i use jquery?
function showdiv(city, imagesrc, timeout)
{
window.setTimeout(function() {
document.getElementById('city-order').innerHTML = "";
document.getElementById('order-product').innerHTML = "";
$('.product-display').addClass("zoomin");
document.getElementById('product-list-display').style.display = "block";
var order_placed_city = document.getElementById('city-order');
var content = document.createTextNode(city);
order_placed_city.appendChild(content);
var product_order = document.getElementById('order-product');
var elem = document.createElement("img");
product_order.appendChild(elem);
elem.src = imagesrc;
},timeout);
window.setTimeout(function(){
//$('.product-display').delay(3000).hide();
document.getElementById('product-list-display').style.display = "none";
},3000);
}

Move the hide setTimeout 1 line up :
function showdiv(city, imagesrc, timeout)
{
window.setTimeout(function() {
document.getElementById('city-order').innerHTML = "";
document.getElementById('order-product').innerHTML = "";
$('.product-display').addClass("zoomin");
document.getElementById('product-list-display').style.display = "block";
var order_placed_city = document.getElementById('city-order');
var content = document.createTextNode(city);
order_placed_city.appendChild(content);
var product_order = document.getElementById('order-product');
var elem = document.createElement("img");
product_order.appendChild(elem);
elem.src = imagesrc;
window.setTimeout(function(){
//$('.product-display').delay(3000).hide();
document.getElementById('product-list-display').style.display = "none";
},3000);
},timeout);
}

Try using callback function to achieve this.
function showdiv(city, imagesrc, timeout)
{
window.setTimeout(function() {
document.getElementById('city-order').innerHTML = "";
document.getElementById('order-product').innerHTML = "";
$('.product-display').addClass("zoomin");
showDiv(function(){ window.setTimeout(function(){
//$('.product-display').delay(3000).hide();
document.getElementById('product-list-display').style.display = "none";
},3000);});
var order_placed_city = document.getElementById('city-order');
var content = document.createTextNode(city);
order_placed_city.appendChild(content);
var product_order = document.getElementById('order-product');
var elem = document.createElement("img");
product_order.appendChild(elem);
elem.src = imagesrc;
},timeout);
}
function showDiv(callback){
document.getElementById('product-list-display').style.display = "block";
callback();
}

Adding an Image to DOM Dynamically Using Range.insertNode()

How can I dynamically insert an IMG element into the DOM using Range.insertNode() ?
My HTML:
<div class="css_class_for_div" style="height: 250px;" contenteditable="true">
<img src="/path/to/my/image/myimage.png" alt="/myimage.png" title="/myimage.png" class="css_class_for_image" e_resid="/myimage.png" />
<br />
<br />
<span class="css_class_for_span"></span>
</div>
<input id="myButton" type="button" value="insert image" />
MY JS:
var button = document.getElementById("myButton");
button.addEventListener("click", function(e){
var src = "/path/to/my/other/image/image2.png";
var title = "/image2.png";
var cssClassname = "css_class_for_image";
var list = document.getElementsByClassName("css_class_for_div");
var el = list[0];
var selRanges = el.getSelection();
if (selRanges.rangeCount > 0) {
var curRange = selRanges.getRangeAt(0); // Range object
if (curRange.toString().length == 0) {
var imageNode = document.createElement('img');
imageNode.src = src;
imageNode.alt = title;
imageNode.title = title;
imageNode.className = cssClassname;
curRange.insertNode(imageNode);
}
}
},false);
[Link to fiddle]
The above code doesn't work. Any help is appreciated.

If you simply want to insert Image2 into the first occurrence of a div with classname = css_class_for_div using Range.InsertNode(), you can use the following code.
I had to use
var range = document.createRange();
range.selectNode(your div);
range.insertNode(your image);
Updated Fiddle
var button = document.getElementById("myButton");
button.addEventListener("click", function (e) {
debugger;
var range = document.createRange();
var list = document.getElementsByClassName("css_class_for_div");
if (list.length > 0) {
var el = list[0];
range.selectNode(el);
var imageNode = getImageNode();
range.insertNode(imageNode);
}
}, false);
function getImageNode() {
var src = "/path/to/my/other/image/image2.png";
var title = "/image2.png";
var cssClassname = "css_class_for_image";
var imageNode = document.createElement('img');
imageNode.src = src;
imageNode.alt = title;
imageNode.title = title;
imageNode.className = cssClassname;
return imageNode;
}