How to copy nodes from an existing div into another div Javascript - javascript

Im not sure what im doing wrong, but iv created 5 images placed at random positions in the left div and i want to copy all 5 - the firstchild and place them on the right side. So il have 5 images on the left and 4 on the right. I debugged my if with alert and it does run, but i cant figure out what wrong with my code? Why is it not print images to the right hand side? Any help is appreciated thank you
var theLeftSide = document.getElementById("leftside");
var theRightSide = document.getElementById("rightside");
facesNeeded = 5;
totalfFaces = 0;
function makeFaces() {
while(facesNeeded != totalfFaces) {
smiley = document.createElement("img");
smiley.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";
smiley.style.top = Math.random() * 401 + "px";
smiley.style.left = Math.random() * 401 + "px";
document.getElementById("leftside").appendChild(smiley);
totalfFaces++;
// alert(totalfFaces); used to debug
}
if (facesNeeded == totalfFaces){
alert("hi");
leftSideImages = theLeftSide.cloneNode(true);
leftSideImages.removeChild(leftSideImages.childNode[0]);
document.getElementById("rightside").appendChild(leftSideImages);
//alert("hi");
}
}
<!DOCTYPE html>
<html>
<head>
<style>
img{
position: absolute;
}
div {
position: absolute;
width:500px;
height:500px;
}
#rightside {
left: 500px;
border-left: 1px solid black;
}
</style>
<script src="script3.js"></script>
</head>
<body onload="makeFaces()">
<h1> Matching Game</h1>
<p> Click on the extra smiling face on the left</p>
<div id="leftside"></div>
<div id="rightside"></div>
</body>
</html>

You have a typo in this line:
leftSideImages.removeChild(leftSideImages.childNode[0]);
it should be:
leftSideImages.removeChild(leftSideImages.childNodes[0]);
Full code:
var theLeftSide = document.getElementById("leftside");
var theRightSide = document.getElementById("rightside");
facesNeeded = 5;
totalfFaces = 0;
function makeFaces() {
while(facesNeeded != totalfFaces) {
smiley = document.createElement("img");
smiley.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";
smiley.style.top = Math.random() * 401 + "px";
smiley.style.left = Math.random() * 401 + "px";
document.getElementById("leftside").appendChild(smiley);
totalfFaces++;
// alert(totalfFaces); used to debug
}
if (facesNeeded == totalfFaces){
alert("hi");
leftSideImages = theLeftSide.cloneNode(true);
leftSideImages.removeChild(leftSideImages.childNodes[0]);
document.getElementById("rightside").appendChild(leftSideImages);
//alert("hi");
}
}
<!DOCTYPE html>
<html>
<head>
<style>
img{
position: absolute;
}
div {
position: absolute;
width:500px;
height:500px;
}
#rightside {
left: 500px;
border-left: 1px solid black;
}
</style>
<script src="script3.js"></script>
</head>
<body onload="makeFaces()">
<h1> Matching Game</h1>
<p> Click on the extra smiling face on the left</p>
<div id="leftside"></div>
<div id="rightside"></div>
</body>
</html>

Related

Change DOM element onscroll not working

Im trying to change my nav when a user scrolls 50px down on the page. In my consol log i can see that it detects the scroll, but it only shows 0, and not the new new amount.. What am i doing wrong here?
<!DOCTYPE html>
<html>
<head>
<title>Scroll Test</title>
<script type="text/javascript">
window.onload = oppstart;
function oppstart() {
document.getElementById("doc").onscroll = scroll;
}
function scroll() {
var element = document.getElementById("doc");
var y = element.scrollTop;
console.log(y);
document.getElementById("utskrift").innerHTML = y + " px";
if (y === 50) {
document.getElementById("navigation").style.backgroundColor = "red";
}
}
</script>
<style type="text/css">
body {
overflow: auto;
}
#navigation {
height: 30vh;
background-color: black;
overflow: auto;
}
#main {
height: 200vh;
}
</style>
</head>
<body id="doc">
<nav id="navigation"></nav>
<div id="main">
<p id="utskrift"></p>
</div>
</body>
</html>
just change
element.scrollTop;
to
window.scrollY
<!DOCTYPE html>
<html>
<head>
<title>Scroll Test</title>
<script type="text/javascript">
window.onload = oppstart;
function oppstart() {
document.getElementById("doc").onscroll = scroll;
}
function scroll() {
var y = window.scrollY;
console.log(y);
document.getElementById("utskrift").innerHTML = y + " px";
if (y === 50) {
document.getElementById("navigation").style.backgroundColor = "red";
}
}
</script>
<style type="text/css">
body {
overflow: auto;
}
#navigation {
height: 30vh;
background-color: black;
overflow: auto;
}
#main {
height: 200vh;
}
</style>
</head>
<body id="doc">
<nav id="navigation"></nav>
<div id="main">
<p id="utskrift"></p>
</div>
</body>
</html>

appendChild removes style

I tried to use appendChild function in order to create a new image node with some style properties. After using it, all properties vanishes. The images supposed to be randomly positioned on the leftSide div, however, actually, they are put align in a row.
<html>
<head>
<title>Matching Game</title>
<style>
#rightSide {
position: absolute;
left: 700px;
border-left: 1px solid black;
width:700px;
height:700px;
}
#leftSide {
width:700px;
height:700px;
position: absolute;
}
</style>
</head>
<body onload="generateFaces()">
<h1>Matching Game</h1>
<p>Click on the extra smiling face on the left</p>
<div id='leftSide'>
</div>
<div id='rightSide'>
</div>
<script>
var numberOfFaces = 5;
var theLeftSide = document.getElementById('leftSide');
var generateFaces = function() {
for(var i = 0; i < numberOfFaces; i++)
{
var img = document.createElement('img');
img.src = 'smile.png';
img.style.top = Math.floor(Math.random()*600);
img.style.left = Math.floor(Math.random()*600);
theLeftSide.appendChild(img);
}
}
</script>
</body>
</html>
http://i.stack.imgur.com/fZaYA.png
Math.floor(Math.random()*600); is going to return a number. Unless the value is 0, the CSS left and top properties require a length. Lengths have units.
Additionally, you haven't changed the position property away from static, so the left and top properties will have no effect as they apply only to positioned elements.
that should solve your problem.
var img = document.createElement('img');
img.style.top = Math.floor(Math.random()*600) + 'px';

Issue with displaying images in JavaScript(DOM)

My task is to add 5 images (smile.png) to 5 randomly positions in the left half of the page which is a div with id="leftSide" and size 500x500px
so here is my code
var numberOfFaces = 5;
var theLeftSide = document.getElementById("leftSide");
var count = 0;
function generateFaces(){
while(count < numberOfFaces) {
var this_img=createElement("img");
this_img.src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";
var toppos = Math.random() * 400;
var top_pos = Math.floor(toppos);
var leftpos = Math.random() * 400;
var left_pos = Math.floor(leftpos);
this_img.style.left=left_pos + "px";
this_img.style.top=top_pos + "px";
theLeftSide.appendChild(this_img);
count+=1;
}
}
img {
position:absolute
}
div {
position:absolute;
width:500px;
height:500px;
}
#rightSide {
left: 500px;
border-left: 1px solid black;
}
<body onload="generateFaces()">
<h1>Matching game</h1>
<p>Click on the extra smiling face on the left.</p>
<div id="leftSide"></div>
<div id="rightSide"></div>
</body>
It should do
this
But instead it shows just a white page.
Change createElement to new Image();
var this_img=new Image();

Line up image with the bottom edge of the window

I've done some work with parallax scrolling and resizing my image using javascript, but I cannot figure out how to getting a homepage to line up perfectly with the edge of the window.
The code I have does not line up with the bottom edge of the webpage.
If I do a fix value I can get it to line up; however, depending on whether or not someone has a toolbar it messes up the alignment.
<!doctype html>
<html>
<head>
<title>ParallecScrolling</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#image {
position: relative;
z-index: -1
}
#content {
height: 2700px;
width: 100%;
margin-top:-10px;
background-color:#4dbbac;
position: relative;
z-index:1;
}
</style>
</head>
<body onresize="myFunction()">
<img id="image" src="IMG.JPG" style="margin:;" />
<div id="content"></div>
<script>
function myFunction() {
var w = window.outerWidth;
var h = window.outerHeight;
var yourImg = document.getElementById('image');
yourImg.height = h;
yourImg.width = w;
}
</script>
<script type="text/javascript">
var ypos, image;
function parallex () {
ypos = window.pageYOffset;
image = document.getElementById('image');
image.style.top = ypos * .5 + 'px';
}
window.addEventListener('scroll', parallex);
</script>
</body>
</html>
i'm not sure if i got your question right but why you dont use bottom property?
image.style.bottom = 0;

Make image randomly move onclick

I am attempting to make a image move randomly using plain javascript.
Upon the event onclick the image location should move according to the random number that is generated.
Here is my code:
<html>
<head><title> Move Image </title>
<style type="text/css">
#smiley { position: relative; top: 0px; left: 0px; }
</style>
<script type="text/javascript">
function changeImg()
{
var x = Math.floor(Math.random()*300);
var y = Math.floor(Math.random()*300);
var obj = document.getElementById("emotion");
obj.style.top = x + "px";
obj.style.left = y + "px";
obj.onclick= "changeImg();"
}
</script>
</head>
<body>
<img id="emotion"
src="http://www.google.com/images/srpr/logo4w.png"
width="42" height="42">
</body>
</html>
Any idea?
Thank you!
This one works without inline script in all browsers
Codepen demo
var object = document.getElementById('item');
object.onclick=function(){
var x = Math.floor(Math.random()*300);
var y = Math.floor(Math.random()*300);
object.style.top = x + 'px';
object.style.left = y + 'px';
};
HTML
<img id="item" src="http://...png" />
CSS
#item {
cursor: pointer;
position: absolute;
top: 0px;
left: 0px;
transition: all 1s;
}
You're never assigning changeImg() to the <img>
<img ... onclick="changeImg()">
The element must be position: absolute if you plan on using top and left.
The <img> tag has the ID of emotion, not smiley.
You don't need to set the <img>'s onclick property each time the changeImg() function is called. Once is enough.
You never set the position of the image object. Instead, you set "smiley" to relative, but the image is "emotion".
Try
#emotion{ position: relative; top: 0px; left: 0px; }
I would suggest you to call the function rather than the string literal.
example:
obj.onclick = changeImg;
<html>
<head><title> Move Image </title>
<style type="text/css">
#emotion { position: absolute; top: 0px; left: 0px; border:1px solid red;}
</style>
<script type="text/javascript">
function changeImg()
{
var x = Math.floor(Math.random()*300);
var y = Math.floor(Math.random()*300);
var obj = document.getElementById("emotion");
obj.style.top = x + "px";
obj.style.left = y + "px";
}
</script>
</head>
<body>
<img id="emotion"
src="http://www.google.com/images/srpr/logo4w.png"
width="150" height="42" onclick="changeImg()"/>
</body>
</html>

Categories