Develop Reference

Return image as an element's background

I have a JavaScript Function that creates an image:
var imageFoo = document.createElement("img");
imageFoo.src = dataUrl;
imageFoo.classList.add("waveform");
imageFoo.id = "wvf";
Now if I add:
document.body.appendChild(imageFoo);
Returns the image to the body of the page. All working.
But What I try to do is to return this image as the background of an element. I tried the following:
var x = document.getElementsByClassName("mejs-time-total");
x[0].style.backgroundImage = dataUrl; //I tried with imageFoo.src too
And it won't load the image.
If I link it to one of the images on my disk, it will load the image:
x[0].style.backgroundImage = "url(https://localhost:44384/Content/images/waveform.png);
How can I make this work?

var imageFoo = document.createElement("img");
imageFoo.src = "https://via.placeholder.com/350x150?text=1-3";
imageFoo.classList.add("waveform");
imageFoo.id = "wvf";
var x = document.getElementsByClassName("data");
x[0].style.backgroundImage = "url("+imageFoo.src+")"
<div class="data">
sample
</div>

I get an error on trying to get the img.src from my Html textfield

The following is my function that is called on click of a button.
The goal is to get the text value entered by the user and use it as an image source and finally display the image on the html body.
function ButtonClick() {
var link = document.createElement("a");
// create an image element.
var MyImg = document.createElement("img");
var MyImg.src = document.getElementById("textfield").value;
// append it to a list of elements.
link.appendChild(MyImg);
// append the newly added image to the html page body.
document.body.appendChild(link);
// clear textfield for next image src.
document.getElementById("textfield").value = "";
}
The error I receive is on line#7: "var MyImg.src = document.getElementById("textfield").value;"
SyntaxError: missing ; before statement example.js:19
*edited code after the fist suggestion.

MyImg.src = document.getElementById("textfield").value;

you should define variable once,
change
var MyImg = document.createElement("img");
var MyImg.src = document.getElementById("textfield").value;
to
var MyImg = document.createElement("img");
MyImg.src = document.getElementById("textfield").value;

Javascript timed downloads

So i'm trying to use a script to time downloads on my site and i've been having trouble changing what it does when the timer is at 0. This is the code:
else{
//After the counter download the file and end the timer
document.getElementById("time").innerText = "Now";
download();
return;
}
Now instead of it saying "Now" and auto downloading with "download();" how do i make it show a hyperlink instead of the "Now"?
All help is much appreciated. Thanks in advance!
-Matt.

Not quite sure what you are asking, but here goes...
var link = "http://link_to_download";
document.getElementById("time").innerHTML = "Now;

You can create a new a element, and set its onclick event to your download function:
var link = document.createElement("a");
link.onclick = download;
link.innerHTML = "Download";
link.href = "#";
var img = document.createElement("img");
img.src = "images/site_logo.gif";
img.height = 54;
img.onmouseover = function() { this.src = 'images/logo.png'; };
img.onmouseout = function() { this.src = 'images/site_logo.gif'; };
link.appendChild(img);
document.getElementById("time").appendChild(link);
Demo: http://jsfiddle.net/D5qr7/2/
With image: http://jsfiddle.net/D5qr7/4/

JavaScript method that preloads image before displaying it doesn't work

Within an object constructor there's a method named addToViewport(), which has the role of simply displaying an image after preloading it:
window.onload = function(){
function ViewportObject(){
this.src = "https://chart.googleapis.com/chart?cht=qr&chs=500x500&chl=asdasdasd&choe=UTF-8&chld=L|0";
this.addToViewport = function(){
// Determine the DOM object type to create
var DOM_elem = "img",
obj = $(document.createElement(DOM_elem)),
img = new Object();
obj.addClass("object");
obj.css({"z-index":"100","width":"300px","height":"auto"});
// Preload the image before rendering it and computing its size
img.src = this.src;
img.onload = function(){
obj.attr("src",this.src);
obj.appendTo("body");
}
}
}
var o = new ViewportObject();
o.addToViewport();
}
The problem I've come across is that the script doesn't enter the "onload" event handler block, so the image doesn't get displayed.
I put together a web page with the same script as above on http://picselbocs.com/test/ for you to check out live.
What is it that I'm doing wrong here?

Try this:
change this
img = new Object();
....
img.src = this.src;
img.onload = function(){
obj.attr("src",this.src);
obj.appendTo("body");
}
to
img = new Image();
....
img.onload = function(){
obj.attr("src",this.src);
obj.appendTo("body");
}
img.src = this.src;

Display image through html image element object

I have the following code :
function createImage(source) {
var pastedImage = new Image();
pastedImage.onload = function() {
}
pastedImage.src = source;
}
The function createImage contain the source parameter which contain the source of an image. After that I created the object pastedImage of class Image and after alerting that I am getting the html image element object like [object HTMLImageElement].
My question is how I can display image into my html page using that object. I want to display it after onload function.

Hiya : Working demo http://jsfiddle.net/wXV3u/
Api used = .html http://api.jquery.com/html/
In demo click on the click me button.
Hope this helps! Please lemme know if I missed anything! B-)
Code
$('#foo').click(function() {
createImage("http://images.wikia.com/maditsmadfunny/images/5/54/Hulk-from-the-movie.jpg");
});
function createImage(source) {
var pastedImage = new Image();
pastedImage.onload = function() {
}
pastedImage.src = source;
$(".testimonialhulk").html(pastedImage);
}​

Also you can do like this :
function createImage(source) {
var pastedImage = new Image();
pastedImage.onload = function() {
document.write('<br><br><br>Your image in canvas: <img src="'+pastedImage.src+'" height="100" width="200"/>');
}
pastedImage.src = source;
}​

Simple, and better, using javascript dom primitive (replaceChild):
Get the parent of the image, the div or span that contains it, and replace the old img tag with the new image object you created with your function
var domImgObj = document.getElementById("image");
var imgObj = createImage(src); // your function
imgObj.id = pageimgObj.id; // necessary for future swap-outs
document.getElementById("container").replaceChild(imgObj,domImgObj);

document.createRange().createContextualFragment(img.outerHTML)
Example
const img = new Image()
img.src = "https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico"
const frag = document.createRange().createContextualFragment(`${img.outerHTML}`)
document.querySelector(`body`).append(frag)