function fillBoxes() {
var s = ['data1', 'data2', 'data3'];
var v = ['box1', 'box2', 'box3'];
var lengtha = s.length;
var lengthb = v.length;
if (lengtha > lengthb) {
console.log("not enough objects to contain data.");
} else {
var resp = [];
var respb = [];
for (var i = 0; i < s.length; i++) {
resp.push(s[i]);
}
for (var j = 0; j < v.length; j++) {
respb.push(document.getElementById(v[j]).innerHTML = resp);
}
console.log(respb);
}
}
.testToggle {
background-color: green;
width: 100px;
height: 100px;
float: left;
display: none;
}
.pressme {
width: 200px;
height: 50px;
float: left;
background-color: gray;
}
.gen {
width: 200px;
height: 200px;
float: left;
border: thin #000000 solid;
}
<div onclick="fillBoxes();" id="pressme" class="pressme" title="yoooo">Click Me</div>
<div id="drop" class="testToggle">sdfgsdfg</div>
<div class="gen" id="box1"></div>
<div class="gen" id="box2"></div>
<div class="gen" id="box3"></div>
The result I get each container has the array in it. How can I split the array up so that box1 has only data1, box2 has only data2, and box3 has only data3 instead of box1 having data1,data2, and data3.
and please no jquery.
you already have the array, just add the index :
.innerHTML = resp[j]
^^^
function fillBoxes() {
var s = ['data1', 'data2', 'data3'];
var v = ['box1', 'box2', 'box3'];
var lengtha = s.length;
var lengthb = v.length;
if (lengtha > lengthb) {
console.log("not enough objects to contain data.");
} else {
var resp = [];
var respb = [];
for (var i = 0; i < s.length; i++) {
resp.push(s[i]);
}
for (var j = 0; j < v.length; j++) {
respb.push(document.getElementById(v[j]).innerHTML = resp[j]);
}
}
}
.testToggle {
background-color: green;
width: 100px;
height: 100px;
float: left;
display: none;
}
.pressme {
width: 200px;
height: 50px;
float: left;
background-color: gray;
}
.gen {
width: 200px;
height: 200px;
float: left;
border: thin #000000 solid;
}
<div onclick="fillBoxes();" id="pressme" class="pressme" title="yoooo">Click Me</div>
<div id="drop" class="testToggle">sdfgsdfg</div>
<div class="gen" id="box1"></div>
<div class="gen" id="box2"></div>
<div class="gen" id="box3"></div>
To achieve expected result, use index while assigning with document.getById for below line
respb.push(document.getElementById(v[j]).innerHTML = resp[j]);
working code for refernce:
function fillBoxes() {
var s = ['data1', 'data2', 'data3'];
var v = ['box1', 'box2', 'box3'];
var lengtha = s.length;
var lengthb = v.length;
if (lengtha > lengthb) {
console.log("not enough objects to contain data.");
} else {
var resp = [];
var respb = [];
for (var i = 0; i < s.length; i++) {
resp.push(s[i]);
}
for (var j = 0; j < v.length; j++) {
respb.push(document.getElementById(v[j]).innerHTML = resp[j]);
}
console.log(respb);
}
}
.testToggle {
background-color: green;
width: 100px;
height: 100px;
float: left;
display: none;
}
.pressme {
width: 200px;
height: 50px;
float: left;
background-color: gray;
}
.gen {
width: 200px;
height: 200px;
float: left;
border: thin #000000 solid;
}
<div onclick="fillBoxes();" id="pressme" class="pressme" title="yoooo">Click Me</div>
<div id="drop" class="testToggle">sdfgsdfg</div>
<div class="gen" id="box1"></div>
<div class="gen" id="box2"></div>
<div class="gen" id="box3"></div>
codepen- https://codepen.io/nagasai/pen/zYOPYzx
Not 100% sure what you're looking to do, except maybe add text to the dom. Try not to set innerHTML. This can be a source of vulnerability in some instances.
function fillBoxes(){
const ids = ['box1','box2','box3'];
const data = ['data1','data2','data3'];
if (ids.length !== data.length) {
console.log("not enough objects to contain data.");
} else {
for (let i = 0; i < ids.length; i++) {
let el = document.getElementById(ids[i]);
let content = document.createTextNode(data[i]);
el.appendChild(content);
}
}
}
Related
I have a simple function which change opacity of divs every x seconds.
When I click on "pause button", this one make a pause in this loop, and get the color of the current div. When I click a second time on this button, the loop restart to play after a setTimeout.
My problem is that when I multi click (fast) on button, there is a bug in the loop.
My condition doesn't work.
Is there a solution to stop effect of click during setTimeout with stopPropagation or e.preventDefault or something else?
var j = 0;
var myElements = document.querySelectorAll('.div_child');
var myButton = document.querySelector('.my_button');
var colorArray = []
for (let i = 0; i < myElements.length; i++) {
let currentColor = getComputedStyle(myElements[i]).backgroundColor;
colorArray[i] = currentColor;
}
function my_fonction() {
myElements[j].style.opacity = 1;
for (let k = 0; k < myElements.length; k++) {
if (k != j) {
myElements[k].style.opacity = 0;
}
}
j++;
if (j == myElements.length) {
j = 0
}
playForbidden = false;
}
function setIntervalAndExecuteFn(fn, t) {
fn();
return (setInterval(fn, t));
}
var myIndice = j;
var myIntervalId = setIntervalAndExecuteFn(my_fonction, 1000);
var play = true;
var playForbidden = false;
myButton.addEventListener('click', function() {
if (playForbidden == false) {
if (play == true) {
play = false;
clearInterval(myIntervalId);
if (j == 0) {
myIndice = myElements.length - 1;
} else {
myIndice = j - 1;
}
myButton.style.backgroundColor = colorArray[myIndice]
} else {
play = true;
myButton.style.backgroundColor = 'transparent';
setTimeout(function() {
myIntervalId = setIntervalAndExecuteFn(my_fonction, 1000);
}, 500);
}
playForbidden == true;
} else {
return;
}
});
.div_parent {
position: relative;
width: 500px;
height: 300px;
border: 1px solid black;
}
.my_button {
width: 300px;
height: 100px;
border: 1px solid black;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 20px;
padding: 20px;
color: black;
}
.div_child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 500px;
height: 300px;
}
.div_child_one {
opacity: 0;
background-color: red;
}
.div_child_two {
opacity: 0;
background-color: green;
}
.div_child_three {
opacity: 0;
background-color: violet;
}
.div_child_four {
opacity: 0;
background-color: rgb(104, 104, 104);
}
<div class="div_parent">
<div class="div_child div_child_one"></div>
<div class="div_child div_child_two"></div>
<div class="div_child div_child_three"></div>
<div class="div_child div_child_four"></div>
</div>
<div class="my_button">PAUSE BUTTON</div>
The problem in your code is the setTimeout function. When you execute your setTimeout, what you are saying is "Start the interval in 0.5 seconds". But the problem is that this command is not stopped if you click on pause again really fast (within 0.5 seconds). What you can do is clearing the timeout at every click of the button. This way, you can cancel the command "Start the interval in 0.5 seconds".
You can see a working snippet of what I mean here below:
var j = 0;
var myElements = document.querySelectorAll('.div_child');
var myButton = document.querySelector('.my_button');
var colorArray = []
for(let i=0; i<myElements.length; i++){
let currentColor = getComputedStyle(myElements[i]).backgroundColor;
colorArray[i] = currentColor;
}
function my_fonction(){
myElements[j].style.opacity = 1;
for(let k = 0; k < myElements.length; k++){
if(k!=j){
myElements[k].style.opacity = 0;
}
}
j++;
if(j == myElements.length){ j = 0}
playForbidden = false;
}
function setIntervalAndExecuteFn(fn, t){
fn();
return(setInterval(fn, t));
}
var myIndice = j;
var myIntervalId = setIntervalAndExecuteFn(my_fonction, 1000);
var myTimeoutId;
var play = true;
var playForbidden = false;
myButton.addEventListener('click', function(){
clearTimeout(myTimeoutId);
if(playForbidden == false){
if(play == true){
play = false;
clearInterval(myIntervalId);
if(j == 0){
myIndice = myElements.length-1;
}else{
myIndice = j-1;
}
myButton.style.backgroundColor = colorArray[myIndice]
}else{
play = true;
myButton.style.backgroundColor = 'transparent';
myTimeoutId = setTimeout(function() {
myIntervalId = setIntervalAndExecuteFn(my_fonction, 1000);
}, 500);
}
playForbidden == true;
}else{
return;
}
});
.div_parent{
position: relative;
width: 500px;
height: 300px;
border: 1px solid black;
}
.my_button{
width: 300px;
height: 100px;
border: 1px solid black;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 20px;
padding: 20px;
color: black;
}
.div_child{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 500px;
height: 300px;
}
.div_child_one{
opacity: 0;
background-color: red;
}
.div_child_two{
opacity: 0;
background-color: green;
}
.div_child_three{
opacity: 0;
background-color: violet;
}
.div_child_four{
opacity: 0;
background-color: rgb(104, 104, 104);
}
<div class="div_parent">
<div class="div_child div_child_one"></div>
<div class="div_child div_child_two"></div>
<div class="div_child div_child_three"></div>
<div class="div_child div_child_four"></div>
</div>
<div class="my_button">PAUSE BUTTON</div>
I'm building turn-based game in javascript and I have css grid and it is looped over to create the grid. I need to make each box clickable but when I try it it returns an error saying grid-item is null.
I tried to loop over the grid and added a click listener and I got an error every time. I managed only to make whole grid field to respond to click event and that's all.
<div id="game-container" class="game-container">
<div id="grid-container" class="grid-container"></div>
</div>
.grid-container {
display: grid;
max-width: 620px;
max-height: 620px;
grid-template: repeat(10, 1fr)/repeat(10, 1fr);
margin: 50px auto;
background-color: #16eeca;
}
.grid {
border: 1px solid #000;
width: 60px;
height: 60px;
}
let gridContainer = $('#grid-container');
let gridAccess = document.getElementsByClassName('grid');
let gridTile = document.getElementById('grid-tile-0');
// Function that draws the map
function drawGrid() {
for (let x = 0; x < 1; x++) {
for (let y = 0; y < 1; y++) {
for (let i = 0; gridAccess.length < 100; i++) {
gridContainer.append('<div id="grid-tile-' + i + '"' + ' class="grid"' + '>Hey</div>');
}
}
}
}
drawGrid();
I can't find why I got gridTile as a null.
I've moved your drawGrid() up a bit:
let gridAccess = document.getElementsByClassName('grid');
drawGrid();
let gridTile = document.getElementById('grid-tile-0');
Demo
When you run let gridTile = document.getElementById('grid-tile-0'); in your current code, the element grid-tile-0 has not been created.
let gridContainer = $('#grid-container');
let gridAccess = document.getElementsByClassName('grid');
drawGrid();
let gridTile = document.getElementById('grid-tile-0');
console.log(gridTile)
// Function that draws the map
function drawGrid() {
for (let x = 0; x < 1; x++) {
for (let y = 0; y < 1; y++) {
for (let i = 0; gridAccess.length < 100; i++) {
gridContainer.append('<div id="grid-tile-' + i + '"' + ' class="grid"' + '>Hey</div>');
}
}
}
}
.grid-container {
display: grid;
max-width: 620px;
max-height: 620px;
grid-template: repeat(10, 1fr)/repeat(10, 1fr);
margin: 50px auto;
background-color: #16eeca;
}
.grid {
border: 1px solid #000;
width: 60px;
height: 60px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="game-container" class="game-container">
<div id="grid-container" class="grid-container"></div>
</div>
The gridTile is null because you try to find it before create it. To get clickable all boxes change gridContainer.append to
gridContainer.append(`
<div onclick="clickBox(${x},${y},${i},this)" id="grid-tile-${i}" class="grid" >
Hey
</div>
`);
let gridContainer = $('#grid-container');
let gridAccess = document.getElementsByClassName('grid');
let gridTile = document.getElementById('grid-tile-0');
// Function that draws the map
function drawGrid() {
for (let x = 0; x < 1; x++) {
for (let y = 0; y < 1; y++) {
for (let i = 0; gridAccess.length < 100; i++) {
gridContainer.append(`<div onclick="clickBox(${x},${y},${i},this)" id="grid-tile-${i}" class="grid" >Hey</div>`);
}
}
}
}
drawGrid();
function clickBox(x,y,i,btn) {
console.log(i)
}
.grid-container {
display: grid;
max-width: 620px;
max-height: 620px;
grid-template: repeat(10, 1fr)/repeat(10, 1fr);
margin: 50px auto;
background-color: #16eeca;
}
.grid {
border: 1px solid #000;
width: 60px;
height: 60px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="game-container" class="game-container">
<div id="grid-container" class="grid-container"></div>
</div>
The following code looks daunting, but a lot of it is repetitive. Try clicking on the red buttons.
<body>
<ul id="carousel" class="carousel">
<button id="moveSlideLeft" class="moveSlide moveSlideLeft"></button>
<div id="track" class="track">
<li class="slide1" data-shown="true2" title="true2"><img src="https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fblogs-images.forbes.com%2Frajatbhageria%2Ffiles%2F2017%2F09%2Fcode-copy-1200x1200.jpg"></li>
<li class="slide2" data-shown="false3" title="false3"><img src="https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fblogs-images.forbes.com%2Frajatbhageria%2Ffiles%2F2017%2F09%2Fcode-copy-1200x1200.jpg"></li>
<li class="slide3" data-shown="false1" title="false1"><img src="https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fblogs-images.forbes.com%2Frajatbhageria%2Ffiles%2F2017%2F09%2Fcode-copy-1200x1200.jpg"></li>
</div>
<button id="moveSlideRight" class="moveSlide moveSlideRight"></button>
</ul>
</body>
<style>
.carousel {
list-style-type: none;
position: relative;
}
.moveSlideLeft {
left: 0px;
}
.moveSlideLeft>img {
width: 10px;
height: 10px;
transform: rotate(180deg);
}
.moveSlide {
margin: none;
padding: none;
width: 20px;
height: 20px;
background-color: red;
border: none;
float: left;
position: absolute;
z-index: 1;
}
.carousel>.track {
margin: none;
padding: none;
left: 0px;
width: 99px;
height: 100px;
overflow: hidden;
position: absolute;
}
.carousel>.track>li[data-shown="false1"] {
transform: translateX(-99px);
z-index: 0;
transition: transform 1s ease-out;
}
.carousel>.track>li[data-shown="true2"] {
transform: translateX(0px);
z-index: 2;
transition: transform 1s ease-out;
}
.carousel>.track>li[data-shown="false3"] {
transform: translateX(99px);
z-index: 0;
transition: transform 1s ease-out;
}
.carousel>.track>li>img {
float: left;
width: 99px;
height: 100px;
}
.moveSlideRight {
left: 80px;
}
.moveSlideRight>img {
width: 10px;
height: 10px;
}
</style>
<script>
const left = document.getElementById("moveSlideLeft");
const right = document.getElementById("moveSlideRight");
left.onclick = function() {
var carouselValues = [];
var tagReferences = document.getElementById("carousel").getElementsByTagName("li");
for (var i=0; i<=2; i++) {
carouselValues[i] = tagReferences[i].dataset.shown;
}
var placeholder;
for (var i=0; i<=2; i++) {
if (carouselValues[i] == "true2") {
placeholder = i;
break;
}
}
if (placeholder == 0) {
carouselValues[0] = "false3";
carouselValues[1] = "false1";
carouselValues[2] = "true2";
}
else if (placeholder == 1) {
carouselValues[0] = "true2";
carouselValues[1] = "false3";
carouselValues[2] = "false1";
}
else if (placeholder == 2) {
carouselValues[0] = "false1";
carouselValues[1] = "true2";
carouselValues[2] = "false3";
}
for (var i = 0; i<=2; i++) {
tagReferences[i].dataset.shown = carouselValues[i];
tagReferences[i].title = carouselValues[i];
}
}
right.onclick = function() {
var carouselValues = [];
var tagReferences = document.getElementById("carousel").getElementsByTagName("li");
for (var i=0; i<=2; i++) {
carouselValues[i] = tagReferences[i].dataset.shown;
}
var placeholder;
for (var i = 0; i<=2; i++) {
if (carouselValues[i] == "true2") {
placeholder = i;
break;
}
}
if (placeholder == 0) {
carouselValues[0] = "false1";
carouselValues[1] = "true2";
carouselValues[2] = "false3";
}
else if (placeholder == 1) {
carouselValues[0] = "false3";
carouselValues[1] = "false1";
carouselValues[2] = "true2";
}
else if (placeholder == 2) {
carouselValues[0] = "true2";
carouselValues[1] = "false3";
carouselValues[2] = "false1";
}
for (var i = 0; i<=2; i++) {
tagReferences[i].dataset.shown = carouselValues[i];
tagReferences[i].title = carouselValues[i];
}
}
</script>
I don't know why only one image is showing up. I'm trying to make a sliding carousel. Every time a button is clicked, the data-shown attribute is changed. Based on the value of the data-shown attribute, a new slide should slide in. Where is my error?
You just need to add position: absolute to carousel>.track>li>img to list them in one line because you position them floating to left but in top of each other
const left = document.getElementById("moveSlideLeft");
const right = document.getElementById("moveSlideRight");
left.onclick = function() {
var carouselValues = [];
var tagReferences = document.getElementById("carousel").getElementsByTagName("li");
for (var i=0; i<=2; i++) {
carouselValues[i] = tagReferences[i].dataset.shown;
}
var placeholder;
for (var i=0; i<=2; i++) {
if (carouselValues[i] == "true2") {
placeholder = i;
break;
}
}
if (placeholder == 0) {
carouselValues[0] = "false3";
carouselValues[1] = "false1";
carouselValues[2] = "true2";
}
else if (placeholder == 1) {
carouselValues[0] = "true2";
carouselValues[1] = "false3";
carouselValues[2] = "false1";
}
else if (placeholder == 2) {
carouselValues[0] = "false1";
carouselValues[1] = "true2";
carouselValues[2] = "false3";
}
for (var i = 0; i<=2; i++) {
tagReferences[i].dataset.shown = carouselValues[i];
tagReferences[i].title = carouselValues[i];
}
}
right.onclick = function() {
var carouselValues = [];
var tagReferences = document.getElementById("carousel").getElementsByTagName("li");
for (var i=0; i<=2; i++) {
carouselValues[i] = tagReferences[i].dataset.shown;
}
var placeholder;
for (var i = 0; i<=2; i++) {
if (carouselValues[i] == "true2") {
placeholder = i;
break;
}
}
if (placeholder == 0) {
carouselValues[0] = "false1";
carouselValues[1] = "true2";
carouselValues[2] = "false3";
}
else if (placeholder == 1) {
carouselValues[0] = "false3";
carouselValues[1] = "false1";
carouselValues[2] = "true2";
}
else if (placeholder == 2) {
carouselValues[0] = "true2";
carouselValues[1] = "false3";
carouselValues[2] = "false1";
}
for (var i = 0; i<=2; i++) {
tagReferences[i].dataset.shown = carouselValues[i];
tagReferences[i].title = carouselValues[i];
}
}
.carousel {
list-style-type: none;
position: relative;
}
.moveSlideLeft {
left: 0px;
}
.moveSlideLeft>img {
width: 10px;
height: 10px;
transform: rotate(180deg);
}
.moveSlide {
margin: none;
padding: none;
width: 20px;
height: 20px;
background-color: red;
border: none;
float: left;
position: absolute;
z-index: 1;
}
.carousel>.track {
margin: none;
padding: none;
left: 0px;
width: 99px;
height: 100px;
overflow: hidden;
position: absolute;
}
.carousel>.track>li[data-shown="false1"] {
transform: translateX(-99px);
z-index: 0;
transition: transform 1s ease-out;
}
.carousel>.track>li[data-shown="true2"] {
transform: translateX(0px);
z-index: 2;
transition: transform 1s ease-out;
}
.carousel>.track>li[data-shown="false3"] {
transform: translateX(99px);
z-index: 0;
transition: transform 1s ease-out;
}
.carousel>.track>li>img {
float: left;
width: 99px;
height: 100px;
position: absolute;
}
.moveSlideRight {
left: 80px;
}
.moveSlideRight>img {
width: 10px;
height: 10px;
}
<ul id="carousel" class="carousel">
<button id="moveSlideLeft" class="moveSlide moveSlideLeft"></button>
<div id="track" class="track">
<li class="slide1" data-shown="true2" title="true2"><img src="https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fblogs-images.forbes.com%2Frajatbhageria%2Ffiles%2F2017%2F09%2Fcode-copy-1200x1200.jpg"></li>
<li class="slide2" data-shown="false3" title="false3"><img src="https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fblogs-images.forbes.com%2Frajatbhageria%2Ffiles%2F2017%2F09%2Fcode-copy-1200x1200.jpg"></li>
<li class="slide3" data-shown="false1" title="false1"><img src="https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fblogs-images.forbes.com%2Frajatbhageria%2Ffiles%2F2017%2F09%2Fcode-copy-1200x1200.jpg"></li>
</div>
<button id="moveSlideRight" class="moveSlide moveSlideRight"></button>
</ul>
This is a card game I am making. The codepen is at LINK
I am currently working on the battle functionality of it but this happened. There are supposed to be 4 cards. This is what I want it to look like. Whenever I call the setup function, strange things happen. Please check the codepen for what I want see.
Link for what I want it to look like
var turn = true;
var enemyCards = document.getElementById('enemy-cards');
var friendlyCards = document.getElementById('friendly-cards');
var friendlyHealth = document.getElementById('friendly-health-value');
var enemyHealth = document.getElementById('enemy-health-value');
var enemyCardArray = [[2, 3], [2, 4]];
var friendlyCardArray = [[3, 3], [3,2]];
function initialSetup() {
for (var i=0; i < enemyCardArray.length; i++) {
var card = enemyCardArray[i]
var damage = card[0];
var health = card[1];
enemyCards.innerHTML += "<div class='card'><h1 class='damage'>"+damage+"</h1><h1 class='health'>"+health+"</h1></div>"
}
for (var i=0; i < friendlyCardArray.length; i++) {
var card = friendlyCardArray[i]
var damage = card[0];
var health = card[1];
friendlyCards.innerHTML += "<div class='card'><h1 class='damage'>"+damage+"</h1><h1 class='health'>"+health+"</h1></div>"
}
}
function setup() {
for (var i=0; i < enemyCardArray.length; i++) {
var card = enemyCardArray[i]
var damage = card[0];
var health = card[1];
enemyCards.innerHTML = "";
enemyCards.innerHTML+="<div class='card'><h1 class='damage'>"+damage+"</h1><h1 class='health'>"+health+"</h1></div>";
}
for (var i=0; i < friendlyCardArray.length; i++) {
var card = friendlyCardArray[i]
var damage = card[0];
var health = card[1];
friendlyCards.innerHTML = "";
friendlyCards.innerHTML += "<div class='card'><h1 class='damage'>"+damage+"</h1><h1 class='health'>"+health+"</h1></div>";
}
}
function battle() {
if (turn === true){
for (var i = 0; i<friendlyCardArray.length; i++) {
if (friendlyCardArray.length == enemyCardArray.length){
enemyCardArray[i][1] -= friendlyCardArray[i][0];
}else{
}
}
}else if (turn === false){
}
}
initialSetup();
battle();
setup();
body {
margin: 0;
font-family: sans-serif;
position: relative;
}
#enemy-cards{
background-color: #873a00;
width: 100%;
height: 270px;
}
#friendly-cards{
background-color: #873a00;
width: 100%;
height: 270px;
position: fixed;
bottom: 0;
}
.card {
width: 150px;
height: 250px;
background-color: #afafaf;
margin-top: 10px;
margin-left: 10px;
margin-bottom: 10px;
position: relative;
float:left;
}
.damage {
text-align: left;
position: absolute;
bottom:0;
left: 20px;
}
.health {
text-align: right;
position: absolute;
bottom:0;
right: 20px;
}
#friendly-health{
float:left;
width: 50%;
background-color: lightgreen;
height: 200px;
}
#friendly-health-value{
position: fixed;
left: 25%;
vertical-align: middle;
color: white;
}
#enemy-health-value{
position: fixed;
left: 75%;
vertical-align: middle;
color: white;
}
#enemy-health{
float:left;
width: 50%;
background-color: #f73f27;
height: 200px;
}
<div id="game">
<div id="enemy-cards">
</div>
<div id="health">
<div id="friendly-health">
<h1 id="friendly-health-value">20</h1>
</div>
<div id="enemy-health">
<h1 id="enemy-health-value">20</h1>
</div>
</div>
<div id="friendly-cards">
</div>
</div>
Looked at your setup function. It appears the problem is that you are setting innerHTML="" inside the for loop. Probably, you want to set it at the beginning of the setup() function like below:
function setup() {
enemyCards.innerHTML = "";//<--Set it to "" here, not in for loop
friendlyCards.innerHTML = "";//<--Set it to "" here, not in for loop
for (var i = 0; i < enemyCardArray.length; i++) {
var card = enemyCardArray[i]
var damage = card[0];
var health = card[1];
//enemyCards.innerHTML = "";
enemyCards.innerHTML += "<div class='card'><h1 class='damage'>" + damage + "</h1><h1 class='health'>" + health + "</h1></div>";
}
for (var i = 0; i < friendlyCardArray.length; i++) {
var card = friendlyCardArray[i]
var damage = card[0];
var health = card[1];
//friendlyCards.innerHTML = "";
friendlyCards.innerHTML += "<div class='card'><h1 class='damage'>" + damage + "</h1><h1 class='health'>" + health + "</h1></div>";
}
}
I have this simple jsfiddle example: https://jsfiddle.net/fLp74gnu/
As the example says, the onlclick function shows/hides the download-icon element. How to show on click and hide on hover out?
var divs = document.getElementsByTagName("div");
var parents = document.getElementsByClassName("main-cell");
for (var i = 0; i < parents.length; i++) {
parents[i].onclick = function () {
toggleChildren(this);
};
}
function toggleChildren(elem) {
for (var i = 0; i < divs.length; i++) {
if (divs[i] == elem) {
for (var ii = 1; ii <= 5; ii++) {
if (divs[i + ii].style.display == "none") {
divs[i + ii].style.display = "block";
} else {
divs[i + ii].style.display = "none";
}
}
}
}
}
.main-cell {
background: #bbb;
width: 200px;
height: 130px;
border-radius: 7%;
}
.main-cell:hover {
background: #999;
}
.download-icon {
background: rgba(0, 0, 0, .8);
width: 100%;
height: 100%;
border-radius: 7%;
display: none;
}
<div class="main-cell">
<div class="download-icon"></div>
</div>
It is very easy.
.main-cell {
background:transparent;/*set to transparent so the user can't see it but the element will still have height and width*/
width: 200px;
height: 130px;
border-radius: 7%;
}
.main-cell:hover {
background: #999;/*the element is visible but when the user hovers over it it will take a color and reappear*/
}
Do you mean something like following:
jsfiddle
var divs = document.getElementsByTagName("div");
var parents = document.getElementsByClassName("main-cell");
for (var i=0; i<parents.length; i++) {
parents[i].onclick = function() { toggleChildren(this); console.log(this);};
parents[i].onmouseleave = function(){
this.removeChild(document.getElementById('DELETEME'));
};
}
function toggleChildren(elem) {
for (var i=0; i<divs.length;i++) {
if (divs[i] == elem) {
for (var ii=1; ii<=5; ii++) {
if (divs[i+ii].style.display == "none") {
divs[i+ii].style.display = "block";
} else {
divs[i+ii].style.display = "none";
}
}
}
}
}
.main-cell {
background: #bbb;
width: 200px;
height: 130px;
border-radius: 7%;
}
.main-cell:hover {
background: #999;
}
.download-icon {
background: rgba(0,0,0,.8);
width: 100%;
height: 100%;
border-radius: 7%;
display: none;
}
<div class="main-cell"><div ID="DELETEME" class="download-icon"></div></div>
Is that the behaviour ? ( may be you only want to remove the class ? )
Edit:
parents[i].onmouseleave = function(){
var el = this.getElementsByTagName('div');
el[0].classList.remove('download-icon');
};
parents[i].onmouseover = function(){
var el = this.getElementsByTagName('div');
el[0].classList.add('download-icon');
// el[0].style.display = "none"; if you want ed to appear in that way
};
In this way you are not removing the element but the class. ( and adding it again ).