I've started to make a memory game but I have a problem:
let card = [];
function makeCards() {
let cardSymbol = [];
const scorePan = document.querySelector('section');
scorePan.insertAdjacentHTML('afterend', '<ul class="deck"></ul>');
const cardDeck = document.querySelector('.deck');
for (let i = 1; i < 17; i++) {
card[i] = document.createElement('li');
card[i].setAttribute('class', 'card');
cardSymbol[i] = document.createElement('i');
cardSymbol[i].setAttribute('class', `fa fa-${symbols[i]}`);
card[i].appendChild(cardSymbol[i]);
cardDeck.appendChild(card[i]);
}
}
makeCards();
So int the array card I've stored all the cards, and added the cards in function makeCards , the problem is I want to add an Event Listener in another function to every single card, but if I iterate over the elements
with a for loop and I console.log() every element it shows me undefined, and this happens either I write the loop in a function or outside any function, but If I console.log(card) ; it shows me an array that contains all the elements of the array. Why I can't loop over them since I have an array?? Or should I add the eventListerns to elements when I create them in the function makeCards?????
You need a live event listener. If you are using jQuery you can use this
or if you are using native js, you can implement this
We can set one element that is a common ancestor to all card elements to listen for a "click" event occuring on it and/or its descendants. This is possible because of how an event bubbles. For details on this procedure read this article about Event Delegation.
The following Demo creates 2 arrays of matched FA classes and shuffles them. The ancestor element is created as deck and its descendant elements are card, and face elements which are created on each iteration of a for loop. Only the basic function of flipping is provided for each card/face, the logic for matching is beyond the scope of the OP question and requires a separate question to be posted.
Demo
Details are commented in Demo
/* Hardcode FA classes in symbol array
== Clone symbol array
== Use shuffle() function on both arrays
== Merge both arrays into faces array
*/
var symbol = ['fa-pied-piper-alt', 'fa-heart', 'fa-star', 'fa-star-o', 'fa-paw', 'fa-leaf', 'fa-cube', 'fa-cubes', 'fa-rebel', 'fa-empire'];
var match = symbol.slice(0);
var topCut = shuffle(symbol);
var bottomCut = shuffle(match);
var faces = topCut.concat(bottomCut);
// Create and reference parent element
var stack = document.createElement('main');
stack.id = 'deck';
// for each loop...
for (let c = 0; c < match.length * 2; c++) {
// Create a card element and add attributes
var card = document.createElement('a');
card.href = '#/';
card.classList.add.apply(card.classList, ['card', 'cover']);
/* Create a face element and add attributes
|| Note: each face is assigned a FA icon but not .fa class
*/
var face = document.createElement('i');
face.classList.add('face');
face.classList.add(faces[c]);
// Add each face to a card and each card to the deck (stack)
card.appendChild(face);
stack.appendChild(card);
}
// When complete, add deck to DOM
document.body.appendChild(stack);
// Reference deck
var deck = document.getElementById('deck');
/* Register deck to click event
|| When deck and/or its descendant elements are clicked...
|| invoke callback function flip()
*/
deck.addEventListener('click', flip, false);
// Pass Event Object
function flip(event) {
// Prevent <a> from jumping to a location
event.preventDefault();
/* event.target: origin of click event (clicked element)
|| event.currentTarget: element that listens for click (#deck)
|| if the clicked element is NOT #deck...
*/
if (event.target !== event.currentTarget) {
//...and if that clicked element is an <a>...
if (event.target.tagName === "A") {
/* toggle clicked <a> class .cover and
|| its child <i> class .fa on/off
*/
event.target.classList.toggle('cover');
var trump = event.target.firstElementChild;
trump.classList.toggle('fa');
}
}
}
// Utility function uses Fisher-Yates algorithm to shuffle arrays
function shuffle(array) {
var i = 0;
var j = 0;
var temp = null;
for (i = array.length - 1; i > 0; i -= 1) {
j = Math.floor(Math.random() * (i + 1))
temp = array[i]
array[i] = array[j]
array[j] = temp
}
return array;
}
#deck {
display: flex;
flex-flow: row wrap;
width: 450px;
height: 300px;
border-radius: 6px;
border: 5px inset brown;
background: green;
}
.card {
text-decoration: none;
display: inline-block;
width: 48px;
height: 64px;
border-radius: 6px;
border: 3px solid #000;
background: #fff;
font-size: 40px;
text-align: center;
margin: 5px
}
.face {
transform: translateY(11px);
pointer-events: none;
color: inherit;
}
.cover {
color: transparent;
background: #fff;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
Related
I'm making a simple tic tac toe game as my introduction to JS and I ran into a problem almost immediately. I have a div with the class="container", and I use JS to create 9 more div elements inside it.
I have created the div elements with and put them in the cells[] array with no problem. The problem arrises when i try to access .style from the array elements.
const container = document.getElementById("container");
const cells = [];
for (let i = 0; i < 9;) {
cells[i] = document.createElement("div");
container.appendChild(cells[i]);
cells[i].onclick = function(){cells[i].style.backgroundColor = "red";} //this line is where the problem is
i++;
}
I have gone about this using addEventHandler() too, still with me not being able to access the .style property. When I type it in it doesn't show up on that autofill thing VSCode does.
Help?
Ps. I have noticed the cells[] array can't always access it's elements when inside a block.
This issue is due to how closures work in JavaScript.
Here's a demo with your current code (plus some CSS to make it clear what's happening):
const container = document.getElementById("container");
const cells = [];
for (let i = 0; i < 9;) { // actually, the problem is here...
cells[i] = document.createElement("div");
container.appendChild(cells[i]);
cells[i].onclick = function(){cells[i].style.backgroundColor = "red";} // ...here...
i++; // ...and here
}
div:not([class]) {
height: 20px;
border: 1px solid white;
background: cornflowerblue;
}
div:hover {
opacity: .5;
}
<container id="container"></container>
Note that the next div is always highlighted, not the one that was clicked.
Because you increment i within the block itself, that value is captured by the onclick callback, so it's always 1 higher than it should be.
Instead, you need to increment i within the parentheses as the third setup statement for the loop itself.
Here's the fix:
const container = document.getElementById("container");
const cells = [];
for (let i = 0; i < 9; ++i) { // increment here...
cells[i] = document.createElement("div");
container.appendChild(cells[i]);
cells[i].onclick = function() { cells[i].style.backgroundColor = "red"; }
// ...not here
}
div {
height: 20px;
border: 1px solid white;
background: cornflowerblue;
}
div:hover {
opacity: .5;
}
<container id="container"></container>
const container = document.querySelector('.container');
for (let i = 0; i < 9; ) {
const div = document.createElement('div');
container.appendChild(div);
div.addEventListener('click', chanegColor);
div.classList.add('setWidth');
i++;
}
function chanegColor() {
this.style.backgroundColor = 'red';
}
.setWidth {
width: 100px;
height: 100px;
border: 1px solid black;
}
<div class="container"></div>
const container = document.querySelector('.container');
for (let i = 0; i < 9; ) {
const div = document.createElement('div');
container.appendChild(div);
div.addEventListener('click', chanegColor);
div.classList.add('setWidth');
i++;
}
function chanegColor() {
this.style.backgroundColor = 'red';
}
I'm trying to print an element, in my case an hr tag some number of times according to the length of a word. This code is for a hangman game I'm trying to recreate. I have looked up similar questions and its not quite what I'm lookin for.
This is my javascript code so far.
var words = ['Quaffle', 'Bludger', 'Golden Snitch', 'Time-Turner',
'Pensieve', 'Mirror of Erised'];
function getRandomWord(){
var randomIndex = words[Math.floor(Math.random()* words.length)];
alert(randomIndex);
}
function printDashes(){
var dashes = document.getElementById("dash")
}
getRandomWord()
printDashes()
I'm not sure what to add after retrieving the element. Can someone guide me on how to go about this?
You can also create div's so you can enter letters when the user inputs a character. I've attached an example below.
UPDATE: Added example code to update the dashes with letters based on word
var elem = document.getElementById('container');
var guess = document.getElementById('guess');
var word = "Hello";
// draw empty dashes
var drawDashes = function(numberOfDashes) {
for (var i = 0; i < numberOfDashes; i++) {
var el = document.createElement('div');
el.classList = 'dash';
// we draw an empty character inside so that the element
// doesn't adjust height when we update the dash later with a
// letter inside
el.innerHTML = ' ';
elem.appendChild(el);
}
}
// update dash with a letter based on index
var updateDash = function(index, letter) {
elem.children[index].innerHTML = letter;
}
guess.addEventListener('keyup', function(evt) {
// split the word up into characters
var splitWord = word.split('');
// check to see if the letter entered matches any of the
// words characters
for (var i = 0; i < splitWord.length; i++ ) {
// it is important we convert them to lowercase or
// else we might get a mismatch because of case-sensitivity
if (evt.key.toLowerCase() === splitWord[i].toLowerCase()) {
// update dash with letter based on index
updateDash(i, evt.key.toLowerCase());
}
}
// clear out the value
this.value = '';
});
drawDashes(word.length);
body {
font-family: sans-serif;
}
.dash {
height: 50px;
width: 50px;
margin: 0 10px;
display: inline-block;
border-bottom: 2px solid black;
font-size: 32px;
font-weight: bold;
text-align: center;
}
#guess {
height: 50px;
width: 50px;
padding: 0;
font-size: 32px;
text-align: center;
}
<div id="container"></div>
<h4>Type a letter</h4>
<input id="guess" type="text"/>
Say your word is in some variable named myWord.
Get the length of the word by doing:
var myWordLen = myWord.length;
Then you can create HTML elements using Javascript createElement method and appending child elements, information etc as needed. But since you want as many elements as the length of a word, use a loop. Eg:
for(var i=0; i < myWordLen; i++)
{
var tr1 = document.createElement("hr");
var someEle = document.getElementById("someID");
someEle.appendChild(tr1);
}
What about this way?
myElement.innerHTML = `<...>`.repeat(words.length)
Fairly new to Javascript and trying a more complex script (to me, anyway).
The end-game for this script is the following:
Element tagged with onclick=(runscript) will prompt script to load a text file of site names/links, separated by commas.
Script loads text file into an array.
First loop iterates through array, separating the main array into two new arrays based on even/odd array position. (ex. Site name is 0, link is 1, name is 2, link is 3, etc.)
Second loop iterates through the site name array, creating a new div element for each value in the array.
Second loop also creates new anchor element, appending it to the div element.
Second loop sets div's class, anchor's href, and appends the new div to a container div.
I feel like I'm making a few noob mistakes and my lack of exposure to Javascript is keeping me from seeing them. I cut out the first two steps to test steps 3-6 instead.
This is what I've managed to come up with so far.. any nudge in the right direction would be awesome.
Thanks!
var main = ["Google", "http://google.com", 'Gmail', 'http://gmail.com', 'Hotmail', 'http://hotmail.com', 'Battle.net', 'http://battle.net', 'Steam', 'http://steampowered.com'];
function getSites() {
var site = new Array();
var link = new Array();
for (var i = 0; i <= main.length; i++) {
if (i % 2 == 0) {
link.push(main[i]);
} else {
site.push(main[i]);
}
}
for ($i = 1; i <= site.length; i++) {
var divElement = document.createElement("div");
var anchorElement = document.createElement("a");
divElement.appendChild(anchorElement);
divElement.className = "boxin";
anchorElement.href = link[i];
divElement.innerHTML = (site[i]);
linkContainer.appendChild(divElement);
}
}
getSites();
boxin {
height: 20px;
background-color: green;
}
#linkContainer div
{
border:solid 1px black;
margin:5px;
}
<div id="linkContainer"></div>
You have a bug in the second iteration, you are initializing a new variable $i, but the condition is checking for i<=site.length which will be false since the value of i is updated to main.length at the end of the first loop
But you really don't need to use 2 loop to solve the problem, you can use a single loop as below. Also you need to set the label text as the content of anchor element not of the div
var main = ["Google", "http://google.com", 'Gmail', 'http://gmail.com', 'Hotmail', 'http://hotmail.com', 'Battle.net', 'http://battle.net', 'Steam', 'http://steampowered.com'];
function getSites() {
for (var i = 0; i < main.length; i += 2) {
var divElement = document.createElement("div");
var anchorElement = document.createElement("a");
divElement.appendChild(anchorElement);
divElement.className = "boxin";
anchorElement.href = main[i + 1];
anchorElement.innerHTML = (main[i]);
linkContainer.appendChild(divElement);
}
}
getSites();
boxin {
height: 20px;
background-color: green;
}
#linkContainer div {
border: solid 1px black;
margin: 5px;
}
<div id="linkContainer"></div>
Do you really need them to be in an array? I think an object would work much better.
var sites = {
"Google": "http://google.co.uk",
"Gmail": "http://gmail.com"
};
Then you could loop through the object and achieve what you wanted.
Try it : i'm change your code little bit... below code 100% workable...
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="../js/jquery-1.7.1.min.js"></script>
<style type="text/css">
boxin {
height: 20px;
background-color: green;
}
#linkContainer div {
border: solid 1px black;
margin: 5px;
}
</style>
</head>
<body>
<div>
<div id="linkContainer"></div>
</div>
<script type="text/javascript">
var main = ["Google", "http://google.com", 'Gmail', 'http://gmail.com', 'Hotmail', 'http://hotmail.com', 'Battle.net', 'http://battle.net', 'Steam', 'http://steampowered.com'];
function getSites() {
var site = new Array();
var link = new Array();
for (var i = 0; i <= main.length; i++) {
if (i % 2 == 0) {
link.push(main[i]);
} else {
site.push(main[i]);
}
}
for (var i = 0; i < site.length; i++) {
var divElement = document.createElement("div");
var anchorElement = document.createElement("a");
divElement.appendChild(anchorElement);
divElement.className = "boxin";
anchorElement.href = link[i];
divElement.innerHTML = (site[i]);
document.getElementById("linkContainer").appendChild(divElement);
}
}
getSites();
</script>
</body>
</html>
I am trying to use JavaScript to update the CSS layout as the webpage loads. My code looks like so:
var container = 0; // Add Total UI
var containerTitle = 0; // Container Title
var article = 0;
var articleTitle = 0;
var divName = 0; // temp variable for article id names
var divNameT = 0; // temp variable for title id names
function setLayout(id) {
container = document.getElementById(id);
for(var x = 0; x < 18; ++x) {
// CREATE CONTAINER FOR ALL PANELS
divName = "articleCon"+ x;
article = document.createElement('div');
article.id = divName;
// SETUP CSS STYLE
article.style.cssText = 'height: 205px; width: 300px; background: red; margin-right: 20px; margin-bottom: 20px; display: block; float: left;';
setNewsTitle(count,divName); // Function Call to set Title Panel
container.appendChild(article);
}
}
function setNewsTitle(count,id) {
containerTitle = document.getElementById(id);
// CREATE CONTAINER FOR TITLE
divNameT = "articleTitle"+ count;
articleTitle = document.createElement('div');
articleTitle.id = divNameT;
// SETUP CSS STYLE
articleTitle.style.cssText = 'position: absolute; height: 45px; width: 100px; background: yellow; display: inline;';
containerTitle.appendChild(articleTitle);
}
When I compile my code without making the call to function setNewsTitle(count,id) all the CSS elements are working fine.
The issue I am facing here is whenever the function call is made, my page appears blank. Nothing displays on the screen.
I tried adding screenshots for better understanding, but i don't have the reputation yet.
Try ...
container.appendChild(article);
setNewsTitle(x,divName); // Function Call to set Title Panel
The article needs to be in place before setNewsTitle is run, since you are looking for the element by id. Also, you do not have count, you have x ...
jsFiddle: http://jsfiddle.net/rfornal/o1wyae74/
Try this, append child in DOM before call funtion setNewsTitle, replace count with x :
var container = 0; // Add Total UI
var containerTitle = 0; // Container Title
var article = 0;
var articleTitle = 0;
var divName = 0; // temp variable for article id names
var divNameT = 0; // temp variable for title id names
function setLayout(id) {
container = document.getElementById(id);
for(var x = 0; x < 18; ++x) {
// CREATE CONTAINER FOR ALL PANELS
divName = "articleCon"+ x;
article = document.createElement('div');
article.id = divName;
// SETUP CSS STYLE
article.style.cssText = 'height: 205px; width: 300px; background: red; margin-right: 20px; margin-bottom: 20px; display: block; float: left;';
container.appendChild(article);
setNewsTitle(x,divName); // Function Call to set Title Panel
}
}
function setNewsTitle(count,id) {
containerTitle = document.getElementById(id);
// CREATE CONTAINER FOR TITLE
divNameT = "articleTitle"+ count;
articleTitle = document.createElement('div');
articleTitle.id = divNameT;
// SETUP CSS STYLE
articleTitle.style.cssText = 'position: absolute; height: 45px; width: 100px; background: yellow; display: inline;';
containerTitle.appendChild(articleTitle);
}
You have 2 issues in your code:
You have not actually added the element to the DOM yet, so when you attempt document.getElementById in your function setNewsTitle() - it won't find anything.
You have an error in the method call to setNewsTitle(count,id). You are passing "count", but count doesn't exist. You need to call it as setNewsTitle(x, divName) but only AFTER you have made the call to container.appendChild(article).
The setLayout function would end up something like this:
function setLayout(id) {
container = document.getElementById(id);
for(var x = 0; x < 18; ++x) {
// CREATE CONTAINER FOR ALL PANELS
divName = "articleCon"+ x;
article = document.createElement('div');
article.id = divName;
// SETUP CSS STYLE
article.style.cssText = 'height: 205px; width: 300px; background: red; margin-right: 20px; margin-bottom: 20px; display: block; float: left;';
// Add it to the DOM first
container.appendChild(article);
// need to pass "X", not count
setNewsTitle(x,divName); // Function Call to set Title Panel
}
}
I am looking to create a grid of 3x3 text input boxes, relative to an existing square div, using pure JavaScript. Preferably I would like to construct the grid of a single 1D array that cycles through every third box (if not, then an array of an array of input boxes would do - I hope this makes sense). This is what my code looks like at the moment, but only three of the boxes show when I cycle the array length (if I don't then the array extends linearly across beyond the div confines):
var row0 = new Array(9);
for (var i = 0; i < 9; ++i)
{
row0[i] = document.createElement('input');
row0[i].style.position = "absolute";
row0[i].type = "text";
row0[i].style.marginLeft = 35px *i % 105 + "px";
row0[i].style.width = "35px";
row0[i].style.height = "35px";
document.getElementById('block1').appendChild(row0[i]);
}
How can I get the grid to display correctly?
I would use a combination of javascript and CSS
DEMO http://jsfiddle.net/x8dSP/3010/
JS
window.onload = function () {
var parent_div = document.createElement("div")
parent_div.id = "parent"
document.body.appendChild(parent_div);
var x = 0;
while (x < 9) {
var child_input = document.createElement("input")
child_input.className = "child"
document.getElementById(parent_div.id).appendChild(child_input);
x++;
}
}
CSS
div {
width: 150px;
}
input {
display: inline-block;
width: 30px;
height: 30px;
margin: 5px;
}