Develop Reference

How to create element with absolute position

I want Date to appear above Second section. plz guide how to achieve it
var sectionTwo = document.getElementById("sectionTwo");
var x = sectionTwo.getBoundingClientRect();
var b = document.createElement("div");
b.style.position = 'fixed';
b.innerHTML = new Date();
document.body.appendChild(b);
b.style.top = (x.top - b.style.height) + 'px';
enter image description here

One way to do it is like this:
HTML code:
<div id="sectionTwo">
</div>
JS code:
var sectionTwo = document.getElementById("sectionTwo");
var b = document.createElement("div");
b.innerHTML = new Date();
sectionTwo.insertAdjacentElement("beforebegin", b);
CSS code (just to for visualization):
#sectionTwo {
width: 80%;
height: 50px;
background-color: gray;
}

<div>
<div style="height:800px;"></div>
<div id="sectionOne">First Section</div>
<div id="sectionTwo">Second Section</div>
<button onclick="showDate();">toggle</button></div>
<script> function showDate() {
var sectionTwo = document.getElementById("sectionTwo");
var x = sectionTwo.getBoundingClientRect();
var b = document.createElement("div");
b.style.position = 'absolute';
b.innerHTML = new Date();
document.body.appendChild(b);
b.style.bottom = 0;
b.style.top = (x.top - b.offsetHeight) + 'px';
}</script>
enter image description here

Maybe this could help you better.
var sectionTwo = document.getElementById("sectionTwo");
var b = document.createElement("div");
b.innerHTML = new Date();
sectionTwo.insertAdjacentElement("beforebegin", b);
#sectionTwo {
height: 35px; width:35px;
background-color: pink;
}
<div id="sectionTwo">
</div>

addEventListerner("click",function) - text will get appended to a div - but this does not work the second time around

Onclick dynamically created elements get added to list, but on the second click it does not work.
document.getElementById("add-comment").addEventListener("click",function(){
createComments();
});
function createComments(){
//append the new edit to comment list
var storeDiv = document.createElement("DIV");
var outerDiv = document.createElement("DIV");
var att = document.createAttribute("class");
att.value = "user-avatar-thumbnail left-position";
outerDiv.setAttributeNode(att);
var avatarImg = document.createElement("IMG");
avatarImg.src ="../1.jpg";
outerDiv.appendChild(avatarImg);
var attImg = document.createAttribute("class");
attImg.value = "left-position";
avatarImg.setAttributeNode(attImg);
var altAttr = document.createAttribute("alt");
altAttr.value = "avatar-thumbnail";
avatarImg.setAttributeNode(altAttr);
outerDiv.appendChild(avatarImg);
var avatarName = document.createElement("H5");
var avatarNameContent = document.createTextNode("Added newly");
var attImg = document.createAttribute("class");
attImg.value = "left-position";
avatarName.setAttributeNode(attImg);
avatarName.appendChild(avatarNameContent);
outerDiv.appendChild(avatarName);
var textRegion = document.createElement("TEXTAREA");
var textId = document.createAttribute("id");
textId.value = "comment-area";
textRegion.setAttributeNode(textId);
outerDiv.appendChild(textRegion);
var postCommentButton = document.createElement("BUTTON");
var postCommentButtonValue = document.createTextNode("Post");
postCommentButton.appendChild(postCommentButtonValue);
var createIDPost = document.createAttribute("id");
createIDPost.value="post-comment";
postCommentButton.setAttributeNode(createIDPost);
postCommentButton.appendChild(postCommentButtonValue);
postCommentButton.addEventListener("click",function(){
var commentsGiven = textRegion.value;
if (commentsGiven.length < 1){
alert("please enter your comment");
}
else {
document.getElementById("comment-section").appendChild(outerDiv);
document.getElementById("comment-section").style.display = "block";
document.getElementById("enter-comments").style.display = "none";
outerDiv.removeChild(cancelCommentButton);
outerDiv.removeChild(postCommentButton);
var commentPara = document.createElement("P");
commentPara.innerHTML = commentsGiven;
var attrComment = document.createAttribute("class");
attrComment.value = "left-position DescriptionExcerpt";
commentPara.setAttributeNode(attrComment);
outerDiv.appendChild(commentPara);
outerDiv.removeChild(textRegion);
}
});
outerDiv.appendChild(postCommentButton);
var cancelCommentButton = document.createElement("A");
cancelCommentButton.href = "#";
var createIDCancel = document.createAttribute("id");
createIDCancel.value="cancel-comment";
cancelCommentButton.setAttributeNode(createIDCancel);
var cancelCommentButtonValue = document.createTextNode("Cancel");
cancelCommentButton.appendChild(cancelCommentButtonValue);
outerDiv.appendChild(cancelCommentButton);
document.getElementById("enter-comments").appendChild(outerDiv);
};
#enter-comments, #comment-section {
border: dotted 1px #bfbfbf;
padding: 10px;
margin-top: 10px;
}
.user-avatar-thumbnail p{
background-color:#bfbfbf;
padding: 5px;
}
<div class="icon-details add-comments clearfix">
Add Comment...
</div>
<div id="enter-comments">
</div>
<div id="comment-section">
</div>
Here when you click the add comment the first time and enter some text in the text box and click on post button, that text will get appended to a div, but this does not work the second time around.

I can only append 1 card element from the following Javascript

I can only append 1 card element from the following Javascript. Please Help.
var gb = document.getElementById('game-board');
var cardCount = document.getElementsByClassName('card');
var children = document.createElement('div');
var createCards = function() {
for (var i = 0; i < 5; i++) {
children.className = 'card';
gb.appendChild(children);
};
};
createCards();

you have only 1 "children" item that you keep moving inside the loop. One way to fix it is to clone it each time before appending:
var gb = document.getElementById('game-board');
var cardCount = document.getElementsByClassName('card');
var children = document.createElement('div');
var createCards = function() {
for (var i = 0; i < 5; i++) {
children.className = 'card';
gb.appendChild(children.cloneNode(true));
};
};
createCards();

Your code is attempting to append the same div (stored at the children variable) to gb on every iteration of the loop. Try creating a new element for each iteration instead:
var gb = document.getElementById('game-board');
var createCards = function() {
for (var i = 0; i < 5; i++) {
var children = document.createElement('div');
children.className = 'card';
gb.appendChild(children);
};
};
createCards();
.card{
width: 50px;
height: 50px;
border: 1px solid gray;
}
<div id="game-board" ></div>

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 fix these from moving

I recently asked how to use a progress bar, no one answered so I made up a custom progress bar, Its perfect but the [ ] expand out every new increment, is this due to the font width? or is it fixable? I used because it would have expanded in the first place.
<script type="text/javascript">
var imgsb = new Array("[/ ]","[// ]","[/// ]","[//// ]","[///// ]","[///// ]","[////// ]","[/////// ]","[//////// ]","[///////// ]","[///////// ]","[////////// ]","[/////////// ]","[//////////// ]","[///////////// ]","[////////////// ]","[/////////////// ]","[//////////////// ]","[///////////////// ]","[////////////////// ]","[/////////////////// ]","[//////////////////// ]","[///////////////////// ]","[////////////////////// ]","[///////////////////////]");
altb = new Array();
var currentAdb = 0;
var imgCtb = 25;
function cycleb() {
if (currentAdb == imgCtb) {
currentAdb = 0;
}
document.getElementById('adLinkb').innerHTML = imgsb[currentAdb];
currentAdb++;
}
window.setInterval("cycleb()",500);
</script>
<div style="font-size:12px;color:#fff;font-family:monospace;" id="adLinkb">[/ ]</div>

See how much cleaner this looks:
var currentAdb = 0;
var imgCtb = 25;
function cycleb() {
var output = '[';
for (var i = 0; i < imgCtb; i++) {
output += i > currentAdb ? ' ' : '/';
}
output += ']';
document.getElementById('adLinkb').innerHTML = output;
++currentAdb;
if(currentAdb == imgCtb) {
window.clearInterval(myInterval);
}
}
var myInterval = window.setInterval(cycleb, 500);
#adLinkb {
font-size: 12px;
color: #000;
font-family: monospace;
}
<div id="adLinkb"></div>

#Dave Goten answered this
Thank you all for helping me.
<script type="text/javascript">
var imgsb = new Array("[/ ]","[// ]","[/// ]","[//// ]","[///// ]","[///// ]","[////// ]","[/////// ]","[//////// ]","[///////// ]","[///////// ]","[////////// ]","[/////////// ]","[//////////// ]","[///////////// ]","[////////////// ]","[/////////////// ]","[//////////////// ]","[///////////////// ]","[////////////////// ]","[/////////////////// ]","[//////////////////// ]","[///////////////////// ]","[////////////////////// ]","[///////////////////////]");
altb = new Array();
var currentAdb = 0;
var imgCtb = 25;
function cycleb() {
if (currentAdb == imgCtb) {
currentAdb = 0;
}
document.getElementById('adLinkb').innerHTML = imgsb[currentAdb];
currentAdb++;
}
window.setInterval("cycleb()",500);
</script>
<div style="font-size:12px;color:#fff;font-family:monospace;" id="adLinkb">[/ ]</div>