First mouse click gives me the expected 'x' marker but the next mouse click results in the alert ("Player o: tile has already been selected) even though the grid-item is blank. What am I doing wrong?
In the HTML body, I have created a 3x3 grid, 9 gridItems in total.
$(document).ready(function(){
let grid = $("#grid-container")
let gridItem = $(".grid-item")
function select(){
for (i = 0; i < gridItem.length; i++){
gridItem[i].addEventListener("click", function(){
if ($(this).html() == ""){
$(this).html("x");
nextSelect();
} else {alert ("Player X: tile has already been selected"); select()}
})
}
}
function nextSelect(){
for (i = 0; i < gridItem.length; i++){
gridItem[i].addEventListener("click", function(){
if ($(this).html() == ""){
$(this).html("o");
select();
} else {alert ("Player o: tile has already been selected"); nextSelect()}
})
}
}
select()
});
The addEventListener should be executed only once. Your problem is that you're adding multiple event handlers. A possible version in the snippet bellow.
The idea is that you only need one function and attach it to click event only once per cell, which is done with jQuery .click(callback). To manage the turns you can use a boolean variable (isTurnOfPlayerOne).
$(document).ready(function() {
let isTurnOfPlayerOne = true;
$(".grid-item").click(handleClick);
function handleClick() {
if ($(this).html() == " ") {
let symbol = (isTurnOfPlayerOne ? "x" : "o");
$(this).html(symbol);
} else {
alert("Tile has already been selected");
}
isTurnOfPlayerOne = !isTurnOfPlayerOne;
}
});
.grid-item {
width: 40px;
height: 40px;
display: inline-block;
border: solid 1px #000;
text-align: center;
margin-bottom: 3px;
line-height: 30px;
font-size: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="grid-container">
<div class="grid-item"> </div>
<div class="grid-item"> </div>
<div class="grid-item"> </div>
<br/>
<div class="grid-item"> </div>
<div class="grid-item"> </div>
<div class="grid-item"> </div>
<br/>
<div class="grid-item"> </div>
<div class="grid-item"> </div>
<div class="grid-item"> </div>
</div>
Related
I have three divs and I want that every single time I click on any div, it will be swapped with a second div which is meant to be at the center.
I have tried like this and it doesn't work:
function swapDiv(event, elem) {
elem.parentNode.insertBefore(elem, elem.parentNode.secondChild);
}
<div class="all-div-container">
<div class="div1" onclick="swapDiv(event,this);">
1
</div>
<div class="div2" onclick="swapDiv(event,this);">
2
</div>
<div class="div3" onclick="swapDiv(event,this);">
3
</div>
</div>
1 2 3 and when I click 3 the result must be 1 3 2 from this result and I click on 1 it's must be 3 1 2
function swapDiv(event, elem) {
// get all elements in .all-div-container
const allElements = [...elem.parentElement.children];
// get index of target elem
const targetIndex = allElements.indexOf(elem);
// get center element
const centerElem = allElements[1];
// exit from function if we clicked at center elem
if (elem === centerElem) return;
// move center element
if (targetIndex === 0) {
elem.parentElement.prepend(centerElem)
} else {
elem.parentElement.append(centerElem)
}
}
<div class="all-div-container">
<div class="div1" onclick="swapDiv(event,this);">
1
</div>
<div class="div2" onclick="swapDiv(event,this);">
2
</div>
<div class="div3" onclick="swapDiv(event,this);">
3
</div>
</div>
Consider the following.
$(function() {
$(".all-div-container > div").click(function(event) {
if ($(this).index() == 0) {
return false;
}
var $prev = $(this).prev();
var $self = $(this).detach();
$prev.before($self);
});
});
.all-div-container>div {
height: 2em;
width: 100%;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 3px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="all-div-container">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</div>
You did not clarify what should happen if the first item is clicked. This code will swap the clicked element and the previous element.
I have a few buttons across a site I am building, certain buttons have one class while others have another. What I am trying to do is find the best way to find the clicked button without having an event listener for each individual button. I have come up with the below 2 for loops to find all the buttons with class button-1 and class button-2. Being fairly new to javascript i just don't want to get into bad habits so would appreciate any advice on the best way to achieve this.
<section>
<div class="button--1"></div>
<div class="button--1"></div>
<div class="button--2"></div>
</section>
<section>
<div class="button--2"></div>
<div class="button--1"></div>
<div class="button--2"></div>
</section>
var button1 = document.querySelectorAll('.button--1');
var button2 = document.querySelectorAll('.button--2');
for (var a = 0; a < button1.length; a++) {
button1[a].addEventListener('click',function(){
//do something
});
}
for (var b = 0; b < button2.length; b++) {
button1[b].addEventListener('click',function(){
//do something
});
}
If you plan to have multiple other classes like button--3, …4 … …15,
You must want to target all div elements which class starts (^=) with "button":
(Note that you can do it in the CSS too!)
var allButtons = document.querySelectorAll('div[class^=button]');
console.log("Found", allButtons.length, "div which class starts with “button”.");
for (var i = 0; i < allButtons.length; i++) {
allButtons[i].addEventListener('click', function() {
console.clear();
console.log("You clicked:", this.innerHTML);
});
}
/* Some styling */
section {
margin: 8px 0;
border: 1px solid gray;
}
section div {
border: 1px solid lightgray;
display: inline-block;
margin-left: 8px;
padding: 4px 8px;
width: 30px;
}
section div[class^=button] {
background: lightgray;
cursor: pointer;
}
<span>You can click on the buttons:</span>
<section>
<div class="button--1">s1-1</div>
<div class="button--2">s1-2</div>
<div class="button--3">s1-3</div>
<div class="button--4">s1-4</div>
</section>
<section>
<div class="button--1">s2-1</div>
<div class="button--2">s2-2</div>
<div class="button--3">s2-3</div>
<div class="button--4">s2-4</div>
</section>
<section>
<div class="not-a-button">not1</div>
<div class="not-a-button">not2</div>
<div class="not-a-button">not3</div>
<div class="not-a-button">not4</div>
</section>
Hope it helps.
Try using event delegation
(function() {
document.body.addEventListener("click", clickButtons);
// ^ one handler for all clicks
function clickButtons(evt) {
const from = evt.target;
console.clear();
if (!from.className || !/button--\d/i.test(from.className)) { return; }
// ^check if the element clicked is one of the elements you want to handle
// if it's not one of the 'buttons', do nothing
console.log("you clicked " + from.classList);
}
}())
.button--1:before,
.button--2:before {
content: 'BTTN['attr(class)']';
}
.button--1,
.button--2 {
border: 1px solid #999;
background: #eee;
width: 220px;
padding: 3px;
text-align: center;
}
<section>
<div class="b1 button--1 section1"></div>
<div class="b2 button--1 section1"></div>
<div class="b3 button--2 section1"></div>
</section>
<section>
<div class="b4 button--2 section2"></div>
<div class="b5 button--1 section2"></div>
<div class="b6 button--2 section2"></div>
</section>
You can use multiple selectors in the string of querySelctorAll() by separating them with a ,
var button1 = document.querySelectorAll('.button--1');
var button2 = document.querySelectorAll('.button--2');
var allButtons = document.querySelectorAll('.button--1, .button--2');
console.log(button1.length);
console.log(button2.length);
console.log(allButtons.length);
<section>
<div class="button--1"></div>
<div class="button--1"></div>
<div class="button--2"></div>
</section>
<section>
<div class="button--2"></div>
<div class="button--1"></div>
<div class="button--2"></div>
</section>
My suggestion is to use jQuery so that you can do it something like this:
$(document).on('click', '.button--1', function() {
// Do something
});
$(document).on('click', '.button--1', function() {
// Do something
})
But a clean approach for pure Javascript is to create a function that binds a callback for the event.
function bindEvent(callback, eventType, targets) {
targets.forEach(function(target) {
target.addEventListener(eventType, callback);
});
};
var button1 = document.querySelectorAll('.button--1');
var button2 = document.querySelectorAll('.button--2');
bindEvent(function() {
// do something
}, 'click', button1);
bindEvent(function() {
// do something
}, 'click', button2);
The click event is fired when a pointing device button (usually a mouse's primary button) is pressed and released on a single element.
This documentation will help you to understand how it works MDN - Click event
I have a piece of code that adds an event listener to a number of buttons, when the user clicks a button a class is applied to the button container. How can I restrict this so the user can only select a maximum of three buttons. The code below is working to a point, when you get to three you cannot deselect. Can anyone help me achieve
var blocks = document.querySelectorAll(".block");
var btn = document.querySelectorAll("button");
var total = 0;
for (let i = 0; i < btn.length; i++) {
btn[i].addEventListener("click", function() {
if (total < 3 && blocks[i].classList.contains("active")) {
blocks[i].classList.remove("active");
total--;
} else if (total < 3 && !blocks[i].classList.contains("active")) {
blocks[i].classList.add("active");
total++;
}
});
}
.container{
display:flex;
}
.block{
padding: 50px;
border:1px solid;
max-width:
}
.block.active{
background:grey;
}
<div class="container">
<div class="block">
<button>click</button>
</div>
<div class="block">
<button>click</button>
</div>
<div class="block">
<button>click</button>
</div>
<div class="block">
<button>click</button>
</div>
</div>
this.
You simply need to remove this condition total < 3 && from your first if. The number of selected items is irrelevant if the element is already selected. You just want to de-select it.
var blocks = document.querySelectorAll(".block");
var btn = document.querySelectorAll("button");
var total = 0;
for (let i = 0; i < btn.length; i++) {
btn[i].addEventListener("click", function() {
if (blocks[i].classList.contains("active")) {
blocks[i].classList.remove("active");
total--;
} else if (total < 3 && !blocks[i].classList.contains("active")) {
blocks[i].classList.add("active");
total++;
}
});
}
.container{
display:flex;
}
.block{
padding: 50px;
border:1px solid;
max-width:
}
.block.active{
background:grey;
}
<div class="container">
<div class="block">
<button>click</button>
</div>
<div class="block">
<button>click</button>
</div>
<div class="block">
<button>click</button>
</div>
<div class="block">
<button>click</button>
</div>
</div>
HTML
<div class="container"> <-- div container -->
<div id="div1" onclick="canvasClicked(1);"></div>
<div id="div2" onclick="canvasClicked(2);"></div>
<div id="div3" onclick="canvasClicked(3);"></div>
<div id="div4" onclick="canvasClicked(4);"></div>
<div id="div5" onclick="canvasClicked(5);"></div>
<div id="div6" onclick="canvasClicked(6);"></div>
<div id="div7" onclick="canvasClicked(7);"></div>
<div id="div8" onclick="canvasClicked(8);"></div>
<div id="div9" onclick="canvasClicked(9);"></div>
</div> <-- div container end -->
Css
.container{ /*some css*/
border: 2px solid red;
width: 400px;
height: 400px;
margin: 0 auto;
margin-top: 10%;
}
.container div{
float: left;
height: 132px;
width: 131.3px;
border: 1px solid black;
}
JavaScript
var painted; //global variables
var content;
var winningCombinations;
var theCanvas;
var c;
var cxt;
var w;
var y;
var turn = 0;
var squaresFilled = 0; //global variables end
window.onload = function(){ //instantiating variables
painted = new Array(); //to check if the canvas contains something already
content = new Array(); //to see what the canvas contains 'X' or 'O'
winningCombinations = [[1,2,3],[4,5,6],[7,8,9],[1,4,7],[2,5,8],[3,6,9],
[1,5,9],[3,5,7]]; //all possible combinations :P
for(var i=0; i<=8; i++){
painted[i] = false;
content[i]=false;
}
}
function canvasClicked(number){
theCanvas = "div" + number; //takes the div Id from html
c = document.getElementById(theCanvas);
if(painted[number-1]==false){
if(turn%2==0){ //use X here
c.innerHTML = '<img src="cross image" alt="x" width=100%
height=100%>';
content[number-1] = 'X'; //storing value in content array
}else{ // user O here
c.innerHTML = '<img src=" O image" height="100%"
width="100%" alt="O">';
content[number-1] = 'O'; //storing value in content array
}
}
else{
alert('This block is already occupied, try another block');
turn--;
squaresFilled--;
}
turn++;
painted[number-1]= true;
squaresFilled++;
checkForWinner(content[number-1]);
if(squaresFilled == 9){
alert('It is a TIE');
playAgain();
}
}
function checkForWinner(symbol){ // This functions seems to be the problem
for(var a = 0; a < winningCombinations.length; a++){
if(content[winningCombinations[a][0]]==symbol &&
content[winningCombinations[a][1]]==symbol && content[winningCombinations[a]
[2]]==symbol){
console.log(symbol + ' won!!');
}
}
}
function playAgain(){ // just another function to reset the game
y=confirm("PLAY AGAIN?");
if(y==true){
location.reload(true);
}else{
alert('Good Bye Then!!');
}
}
It runs normally but the results are not expected. It sometimes randomly make anyone winner(i guess), i can't seem to find the bug, i used debugger as well but i just can't find the problem...any help would be appreciated.
Thanks
In the function checkForWinner change:
if(content[winningCombinations[a][0]]==symbol &&
content[winningCombinations[a][1]]==symbol &&
content[winningCombinations[a][2]]==symbol){
to:
if(content[winningCombinations[a][0]-1]==symbol &&
content[winningCombinations[a][1]-1]==symbol &&
content[winningCombinations[a][2]-1]==symbol){
It would make things easier if you numbered everything from 0 instead of 1. Then you don't need all those -1.
Check your indices.
Either content[0-8] or content[1-9]
winningCombination uses 1-9
but canvasClicked uses 0-8
That's why you getting some strange results
I know I should help you with your code, but I decided to use parts of your code and suggest you an approach:
HTML :
<div class="turnInfo" id="turnInfo">Turn : O</div>
<div class="container">
<div id="div1" cell="1" onclick="canvasClicked(this);"></div>
<div id="div2" cell="2" onclick="canvasClicked(this);"></div>
<div id="div3" cell="3" onclick="canvasClicked(this);"></div>
<div id="div4" cell="4" onclick="canvasClicked(this);"></div>
<div id="div5" cell="5" onclick="canvasClicked(this);"></div>
<div id="div6" cell="6" onclick="canvasClicked(this);"></div>
<div id="div7" cell="7" onclick="canvasClicked(this);"></div>
<div id="div8" cell="8" onclick="canvasClicked(this);"></div>
<div id="div9" cell="9" onclick="canvasClicked(this);"></div>
</div>
CSS :
.turnInfo{
text-align:center;
font-size:40px;
font-weight:bold;
margin-top: 6%;
margin-bottom:10px;
}
.container{ /*some css*/
border: 2px solid red;
width: 400px;
height: 400px;
margin: 0 auto;
}
.container div{
float: left;
height: 102px;
width: 131.3px;
border: 1px solid black;
text-align:center;
padding-top:30px;
font-size:50px;
}
JS :
Variables
var cells = [0,0,0,0,0,0,0,0,0,0]; // make it 10 for the sake of array index
var turn = 'O'; // first turn : O
var infoDiv = document.getElementById('turnInfo');
Toggle the Trun
function toggleTurn(){
turn = turn == 'O' ? 'X' : 'O';
infoDiv.innerHTML = 'Turn : '+turn;
return turn;
}
Canvas Click Handler
function canvasClicked(cell){
var cellIndex = cell.getAttribute('cell');
if(!cells[cellIndex]){
cells[cellIndex] = toggleTurn();
cell.innerHTML = turn; // you can add image here.
checkWinner();
}
}
Check Result function
function checkWinner(){
winningCombinations = [
[1,2,3],
[4,5,6],
[7,8,9],
[1,4,7],
[2,5,8],
[3,6,9],
[1,5,9],
[3,5,7]
]; //all possible combinations :P
for(var index=0; index < winningCombinations.length;index++){
winCond = winningCombinations[index];
if(cells[winCond[0]] != 0 &&
cells[winCond[0]] == cells[winCond[1]] &&
cells[winCond[1]] == cells[winCond[2]])
{
alert(turn + ' is winner');
playAgain();
return;
}
}
var allCellsFilled = 1;
for(var index =1; index < cells.length; index++){
if(!cells[index]){
allCellsFilled = 0;
break;
}
}
if(allCellsFilled){
alert('Game is draw!');
playAgain();
}
}
New Game function
function playAgain(){ // just another function to reset the game
y=confirm("PLAY AGAIN?");
if(y==true){
location.reload(true);
}else{
alert('Good Bye Then!!');
}
}
You can see it here : https://codepen.io/FaridNaderi/pen/awROjY
Hope it helps.
I am trying to work on writing a div swap with images using javascript. I have created two divs. One which is display block, and the second div which is display none. When the user clicks on the image, an onclick is supposed to hide the showing div and show the hidden div in it's place.
When the user clicks the same image location, the image shifts based on the xy value and the divs are supposed to swap out again. I cannot seem to get this to function correctly. I can get the click to swap out the divs when I don't set the display on either divs, but that leaves both divs showing stacked. I am almost there but cannot find what I am missing to only show one div at once. Is there a better way that I could be doing this? Please help?
<div class="row" style="margin-top: 15px;">
<div style="border:1px dashed #CCC;background:#fff;padding:10px 0px;">
<div style="text-align:center;">
<div id="lifehacks" onclick="lhtrial();">
<div id="trialarea">
<p style="background: url('images/LH_Trial.png') 0 0;background-repeat: no-repeat; height: 75px;"> </p>
<p><span id="lhtext"><span style="color:#999; font-size:12px;padding:20px 30px 0 30px;">(Click Above To Opt-In To LifeHacks)</span></span></p>
</div>
<div id="trialarea2">
<p style="background: url('images/LH_Trial.png') 0 -75px;background-repeat: no-repeat; height: 75px;"> </p>
<p><span id="lhtext"><span style="color:#999; font-size:12px;padding:20px 30px 0 30px;">(Click Above If You Want To Opt-Out Of LifeHacks)</span></span></p>
</div>
</div>
</div>
</div>
</div>
Here is my javascript:
<script>
ele = document.getElementById("trialarea");
function lhtrial(){
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
}
else {
ele.style.display = "block";
text.innerHTML = "hide";
}
}
</script>
The following code should work for you, although you are really better off attaching your events using addEventListener() instead of inline in the HTML. You also identified the id lhtext twice in your HTML, which is not allowed.
function lhtrial() {
ele = document.getElementById("trialarea");
ele2 = document.getElementById("trialarea2");
if (ele.style.display === "none") {
ele.style.display = "block";
ele2.style.display = "none";
} else {
ele.style.display = "none";
ele2.style.display = "block";
}
}
#lhimage1 {
background: url('http://lorempixel.com/400/200/sports/1/') 0 0;
background-repeat: no-repeat;
height: 75px;
}
#lhimage2 {
background: url('http://lorempixel.com/400/200/sports/2/') 0 0;
background-repeat: no-repeat;
height: 75px;
}
#trialarea2 {
display: none;
}
<div id="lifehacks" onclick="lhtrial();">
<div id="trialarea">
<p id="lhimage1"> </p>
<p><span id="lhtext1"><span style="color:#999; font-size:12px;padding:20px 30px 0 30px;">(Click Above To Opt-In To LifeHacks)</span></span></p>
</div>
<div id="trialarea2">
<p id="lhimage2"> </p>
<p><span id="lhtext2"><span style="color:#999; font-size:12px;padding:20px 30px 0 30px;">(Click Above If You Want To Opt-Out Of LifeHacks)</span></span></p>
</div>
</div>
function lhtrial(){
ele = document.getElementById("trialarea").style.display;
if(ele == "block") {
document.getElementById("trialarea").style.display = 'none';
document.getElementById("trialarea2").style.display = 'block';
text.innerHTML = "show";
}
else {
document.getElementById("trialarea").style.display = 'block';
document.getElementById("trialarea2").style.display = 'none';
text.innerHTML = "hide";
}
}
<div class="row" style="margin-top: 15px;">
<div style="border:1px dashed #CCC;background:#fff;padding:10px 0px;">
<div style="text-align:center;">
<div id="lifehacks" onclick="lhtrial();">
<div id="trialarea" style="display:block;">
<p style="background: url('images/LH_Trial.png') 0 0;background-repeat: no-repeat; height: 75px;"> </p>
<p><span id="lhtext"><span style="color:#999; font-size:12px;padding:20px 30px 0 30px;">(Click Above To Opt-In To LifeHacks)</span></span></p>
</div>
<div id="trialarea2"style="display:none;">
<p style="background: url('images/LH_Trial.png') 0 -75px;background-repeat: no-repeat; height: 75px;"> </p>
<p><span id="lhtext"><span style="color:#999; font-size:12px;padding:20px 30px 0 30px;">(Click Above If You Want To Opt-Out Of LifeHacks)</span></span></p>
</div>
</div>
</div>
</div>
<button onclick="lhtrial()">button</button><!-- option 2-->
</div>
Test here Solution
I added this <div id="trialarea" style="display:block;"> in html
and little change of js
function lhtrial(){
ele = document.getElementById("trialarea").style.display;
if(ele == "block") {
document.getElementById("trialarea").style.display = 'none';
document.getElementById("trialarea2").style.display = 'block';
text.innerHTML = "show";
}
else {
document.getElementById("trialarea").style.display = 'block';
document.getElementById("trialarea2").style.display = 'none';
text.innerHTML = "hide";
}
}
And i added button but u can set other click event
<button onclick="lhtrial()">button</button>