In which format should i enter IMG SRC to a Result in Javascript?
var result = document.getElementById('test');
result.innerHTML = price + "img src='catcoin.png'";
I'd suggest avoiding assigning to innerHTML generally unless it's the only decent option. You can append a new img element to a container like this:
result.appendChild(document.createElement('img')).src = 'catcoin.png';
document.getElementById('test').src = "catcoin.png";
var el = document.querySelector("#test")
var img = document.createElement("img");
img.setAttribute('src', 'catcoin.png');
el.appendChild(img)
Hey so don't use text to add elements in JavaScript.
var elem = document.createElement("img");
elem.src = 'test.png';
Then append this new image element to result:
document.getElementById("test").appendChild(elem);
With plain js:
var price = '$ 04.89';
var test = document.getElementById('test');
while (test.firstChild) {/* optional cleanup, faster than test.innerHTML = '' */
test.removeChild(test.firstChild);
}
test.appendChild(document.createTextNode(price));
test.appendChild(document.createElement('img')).src = 'caticon.png';
<div id='test'></div>
Related
I am trying to create a website with information of some students. Hence I need to create dynamic profile cards and append them to body. But DOM always gets me.
function student(src, name) {
this.src = src;
this.name = name;
}
var student1 = student(1, "ABC");
var card = document.createElement('div');
card.className = 'card';
var image = document.createElement('img');
image.src = 'images\/students\/' + student1.src + '.jpg';
card.appendChild(image);
var stuName = document.createElement('p');
stuName.className = 'name';
var stuNameText = document.createTextNode(student1.name);
stuName.appendChild(stuNameText);
card.appendChild(stuName);
However nothing is showing up on the screen. placeHere is the id of body. Any help will be appreciated.
Edit:
Apparently applying all necessary changes and moving my script tag to body helps.
the way you creating Student1 Object is wrong
var student1 = new student(1, "ABC");
you forget new keywork
function student(src, name) {
this.src = src;
this.name = name;
}
var student1 = new student(1, "ABC");
var card = document.createElement('div');
card.className = 'card';
var image = document.createElement('img');
image.src = 'images\/students\/' + student1.src + '.jpg';
card.appendChild(image);
var stuName = document.createElement('p');
stuName.className = 'name';
var stuNameText = document.createTextNode(student1.name);
stuName.appendChild(stuNameText);
card.appendChild(stuName);
var main=document.getElementById('main')
main.appendChild(card)
.card{ color: palevioletred;
background: yellow;}
<div id="main"></div>
You have to append all these newly created elements to a div already in the DOM or body tag will work too. Currently, the elements you created are not attached to DOM. So lets say you have a div
<div id="mydiv"></div>
you can append to that div you newly created elements like this:
ley mydiv = document.getElementById('mydiv');
mydiv.appendChild(card);
or you can append it to the body itself like so:
ley body= document.getElementByTagName('body');
body.appendChild(card);
You didn't append your code to any DOM element, create new div in body and append your code into that div.
<div id="stdCard"></div>
and then you can use innerHTML to append card into parent div created. document.getElementById("stdCard").innerHTML = card;
I want to move an image on another one. I saw on forum, the best way to do this is to use destination.appendChild(elementToMove). But when I use it, my elementToMove just disappears.
Here is a fiddle for what I want to do (but that's not working):
JS Fiddle
Here is my JS Code:
var body = document.getElementsByTagName("body")[0];
var td_sign = document.getElementById("sign");
var td_moon = document.getElementById("moon");
var sign = document.createElement("img");
sign.src="http://img11.hostingpics.net/thumbs/mini_723286sign.png";
var moon = document.createElement("img");
moon.src="http://img11.hostingpics.net/thumbs/mini_418048moon.png";
td_sign.appendChild(sign);
td_moon.appendChild(moon);
var testbutton = document.createElement('input');
testbutton.type='button';
testbutton.value='test';
testbutton.onclick = function(){
sign.appendChild(moon);
}
body.appendChild(testbutton);
I just want to use JavaScript.
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;
trying to add an image to my innerHTML.
Looked at a few prvious Q's
Why does my image not show up when I use Javascript innerHTML to call it?
Javascripts innerHTML not working for images, but works with text?
I cant get it working, in google dev tools throws the error:
Uncaught TypeError: Cannot set property 'innerHTML' of null
with this line:
var newImage = document.getElementById('img').innerHTML = "<img src='images/bg-main.png></img>";
my code looks like:
function showImage() {
var img = document.createElement('image');
//var newImage = document.getElementById('img').innerHTML = "<a href='#'><img src='http://mintywhite.com/wp-content/uploads/2012/10/fond-ecran-wallpaper-image-arriere-plan-hd-29-HD.jpg' border=0/></a>";
var newImage = document.getElementById('img').innerHTML = "<img src='images/bg-main.png></img>";
var div5 = document.createElement('div');
div5.appendChild(newImage);
return div5.innerHTML;
}
I know there are many other methods to display an image, but for the purpose of this exercise I want to return the image as an innerHTML
Try this :
var img = document.createElement("img");
img.setAttribute('src', 'http://www.domain.com/imgSrc');
var div5 = document.createElement('div');
div5.appendChild(newImage);
document.createElement('image') creates a new html tag: <image> i suspect you're trying to add a div and apply the image as inner html. you can fix this code like the following:
function showImage() {
var img = document.createElement('div');
document.body.appendChild(img)
img.innerHTML = "<img src='images/bg-main.png></img>";
}
What is the correct way to check if a particular element has a background-image associated with it, in pure Javascript?
Right now I have this:
var elementComputedStyle = window.getComputedStyle(element);
var hasBGImage = elementComputedStyle.getPropertyValue('background-image') !== 'none'
What you have works, but there are alternate ways of finding the property that you might find easier. I don't believe there is a single 'correct' way to do it, however.
Just javascript:
var hasBGImage = element.style.backgroundImage !== '';
Using jQuery:
var hasBGImage = $(element).css('background-image') !== 'none';
Make sure you declare the background image "inline", otherwise .style.backgroundImage won't work.
<script>
window.onload=function() {
var bg = document.getElementById('el').style.backgroundImage.length!=0;
alert(bg);
}
</script>
<div id='el' style="background-image: url('a.jpg');"></div>
If you can use inline CSS, that's the way. If, for some reason, you can't use that, let me know, I'll try to find out something else :)
I used this code in last one project and works perfect
// Check all background images exists
var imageURLs = $('.image-container ');
imageURLs.each(function(index, element){
var imageURL = $(element).css('background-image').replace('url("', '').replace('")', '');
var img = new Image();
img.onerror = function() { $(element).css('background-image','url(/build/images/missing-image.svg)'); };
img.src = imageURL;
});