We Keep Coding

Can a function be inside another function?

I am working on a library project but my function called changeColor inside the readStatus function does not appear to be working.
I've tried separating it but having two event listeners on the same button does not appear to work. My goal is for readStatus function to allow a user to update the status of a book from no to yes when finished with the book.
Likewise, I want to change the background color of the div (class: card) when yes to be green and no to be red.
Can anyone tell me what I'm doing wrong?
let myLibrary = [];
function Book(title, author, pages, read) {
this.title = title;
this.author = author;
this.pages = pages;
this.read = read;
}
function addBookToLibrary(title, author, pages, read) {
let book = new Book(title, author, pages, read);
myLibrary.push(book);
displayOnPage();
}
function displayOnPage() {
const books = document.querySelector(".books");
const removeDivs = document.querySelectorAll(".card");
for (let i = 0; i < removeDivs.length; i++) {
removeDivs[i].remove();
}
let index = 0;
myLibrary.forEach((myLibrarys) => {
let card = document.createElement("div");
card.classList.add("card");
books.appendChild(card);
for (let key in myLibrarys) {
let para = document.createElement("p");
para.textContent = `${key}: ${myLibrarys[key]}`;
card.appendChild(para);
}
let read_button = document.createElement("button");
read_button.classList.add("read_button");
read_button.textContent = "Read ";
read_button.dataset.linkedArray = index;
card.appendChild(read_button);
read_button.addEventListener("click", readStatus);
let delete_button = document.createElement("button");
delete_button.classList.add("delete_button");
delete_button.textContent = "Remove";
delete_button.dataset.linkedArray = index;
card.appendChild(delete_button);
delete_button.addEventListener("click", removeFromLibrary);
function removeFromLibrary() {
let retrieveBookToRemove = delete_button.dataset.linkedArray;
myLibrary.splice(parseInt(retrieveBookToRemove), 1);
card.remove();
displayOnPage();
}
function readStatus() {
let retrieveBookToToggle = read_button.dataset.linkedArray;
Book.prototype = Object.create(Book.prototype);
const toggleBook = new Book();
if (myLibrary[parseInt(retrieveBookToToggle)].read == "yes") {
toggleBook.read = "no";
myLibrary[parseInt(retrieveBookToToggle)].read = toggleBook.read;
} else if (myLibrary[parseInt(retrieveBookToToggle)].read == "no") {
toggleBook.read = "yes";
myLibrary[parseInt(retrieveBookToToggle)].read = toggleBook.read;
}
let colorDiv = document.querySelector(".card");
function changeColor() {
for (let i = 0; i < length.myLibrary; i++) {
if (myLibrary[i].read == "yes") {
colorDiv.style.backgroundColor = "green";
} else if (myLibrary[i].read == "no") {
colorDiv.style.backgroundColor = "red";
}
}
}
displayOnPage();
}
index++;
});
}
let add_book = document.querySelector(".add-book");
add_book.addEventListener("click", popUpForm);
function popUpForm() {
document.getElementById("data-form").style.display = "block";
}
function closeForm() {
document.getElementById("data-form").style.display = "none";
}
let close_form_button = document.querySelector("#close-form");
close_form_button.addEventListener("click", closeForm);
function intakeFormData() {
let title = document.getElementById("title").value;
let author = document.getElementById("author").value;
let pages = document.getElementById("pages").value;
let read = document.getElementById("read").value;
if (title == "" || author == "" || pages == "" || read == "") {
return;
}
addBookToLibrary(title, author, pages, read);
document.getElementById("data-form").reset();
}
let submit_form = document.querySelector("#submit-form");
submit_form.addEventListener("click", function (event) {
event.preventDefault();
intakeFormData();
});
* {
margin: 0;
padding: 0;
background-color: rgb(245, 227, 205);
}
.books {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
text-align: center;
margin: 20px;
gap: 10px;
}
.card {
border: 1px solid black;
border-radius: 15px;
padding: 10px;
}
.forms {
display: flex;
flex-direction: column;
align-items: center;
}
form {
margin-top: 20px;
}
select,
input[type="text"],
input[type="number"] {
width: 100%;
box-sizing: border-box;
}
.buttons-container {
display: flex;
margin-top: 10px;
}
.buttons-container button {
width: 100%;
margin: 2px;
}
.add-book {
margin-top: 20px;
}
#data-form {
display: none;
}
.read_button {
margin-right: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<div class="container">
<div class="forms">
<button class="add-book">Add Book To Library</button>
<div class="pop-up">
<form id="data-form">
<div class="form-container">
<label for="title">Title</label>
<input type="text" name="title" id="title" />
</div>
<div class="form-container">
<label for="author">Author</label>
<input type="text" name="author" id="author" />
</div>
<div class="form-container">
<label for="pages">Pages</label>
<input type="number" name="pages" id="pages" />
</div>
<div class="form-container">
<label for="read">Read</label>
<select name="read" id="read">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div class="buttons-container">
<button type="submit" id="submit-form">Submit Form</button>
<button type="button" id="close-form">Close Form</button>
</div>
</form>
</div>
</div>
<div class="books"></div>
</div>
<script src="script.js"></script>
</body>
</html>

A couple things needed.
First, you should put the readStatus and removeFromLibrary functions outside of the foreach loop.
Then I think you are wanting changeColor to run whenever readStatus is run. Either put the changeColor code directly inside the readStatus or put changeColor() inside readStatus.

I think you want the Book to not be a function but a class.

Store draggable DIV's position in HTML Table to MySQL database

I'd like to know if/how i will be able to store the position of where I move a draggable div to on the table, so when the page is reloaded, it will return to were it was left (from MySQL database).
i read some articles about that but it was all about using jquery (event, ui) with AJAX.
here's my code :
var p = document.getElementsByTagName('p');
var choice = document.getElementsByClassName('choice');
var dragItem = null;
for(var i of p){
i.addEventListener('dragstart', dragStart);
i.addEventListener('dragend', dragEnd);
}
function dragStart(){
dragItem = this;
setTimeout(()=>this.style.display = "none", 0);
}
function dragEnd(){
setTimeout(()=>this.style.display = "block", 0);
dragItem = null;
}
for(j of choice){
j.addEventListener('dragover', dragOver);
j.addEventListener('dragenter', dragEnter);
j.addEventListener('dragleave', dragLeave);
j.addEventListener('drop', Drop);
}
function Drop(){
this.append(dragItem);
}
function dragOver(e){
e.preventDefault();
this.style.border = "2px dotted cyan";
}
function dragEnter(e){
e.preventDefault();
}
function dragLeave(e){
this.style.border = "none";
}
section{
width: 1000px;
height: 360px;
margin: 100px auto;
display: flex;
justify-content: space-around;
}
h1{
text-align: center;
}
div{
width: 200px;
height: 90%;
padding: 20px;
margin: 10px;
background: #fafafa;
box-sizing: border-box;
}
p{
font-weight: bold;
border-radius: 5px;
padding: 5px;
color: white;
background: red;
}
table, th, td {
border:1px solid black;
}
button{
width: 100px;
height: 15px;
padding: 15px;
margin: 10px;
background: gray;
box-sizing: border-box;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test drag & drop </title>
</head>
<body>
<h1> it's just a test for js </h1>
<section>
<div2>
<table style="width:100%">
<tr>
<th>time</th>
<th>DIM</th>
<th>LUN</th>
</tr>
<tr>
<td>8:00 - 9:00</td>
<td><div class="choice"></div> S1-1</td>
<td><div class="choice"></div>S1-2</td>
</tr>
<tr>
<td>9:00 - 10:00</td>
<td><div class="choice"></div>S2-1</td>
<td><div class="choice"></div>S2-2</td>
</tr>
</table>
<button>save</button>
</div2>
<div class="choice">
<p draggable="true">MODULE 1</p>
<p draggable="true">MODULE 2</p>
<p draggable="true">MODULE 3</p>
<p draggable="true">MODULE 4</p>
<p draggable="true">MODULE 5</p>
</div>
</section>
</body>
</html>

This may be an overcomplicated answer. But I feel the best way to go about this is to store an array of module objects inside your javascript. Each module would have a position attribute that would need to be updated every time a module is moved. You could also use the data html attribute to store the position of the element on the element itself(https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). Here is my code:
Javascript:
var dragItem = null;
let modules = loadDataFromServer();
//Initial UI
updateUI(modules);
function dragStart() {
console.log("Start")
dragItem = this;
setTimeout(() => this.style.display = "none", 0);
}
function dragEnd() {
console.log("End")
setTimeout(() => this.style.display = "block", 0);
dragItem = null;
}
function Drop() {
console.log("Drop")
console.log(dragItem)
this.append(dragItem);
moveModuleTo(modules.length - 1, modules[dragItem.dataset.position])
}
function dragOver(e) {
e.preventDefault();
this.style.border = "2px dotted cyan";
}
function dragEnter(e) {
e.preventDefault();
}
function dragLeave(e) {
this.style.border = "none";
}
//Added Code
function loadDataFromServer() {
//return an array of modules
return [
{
title: "Module 1",
position: 0
},
{
title: "Module 2",
position: 1
},
{
title: "Module 3",
position: 2
},
{
title: "Module 4",
position: 3
},
{
title: "Module 5",
position: 4
},
]
}
function moveModuleTo(position, module) {
if (module.position < position) {
//Module is moving down the list
console.log(position)
console.log(module.position)
for (let i = module.position; i < position; i++) {
modules[i] = modules[i + 1];
modules[i].position = i
}
} else {
//Module is moving up the list
for (let i = module.position - 1; i > position; i--) {
modules[i] = modules[i - 1]
modules[i].position = i + 1;
}
}
modules[position] = module
modules[position].position = position
console.log(modules)
//Update UI and database
updateUI(modules)
}
function updateUI(modules) {
let choice = document.getElementsByClassName('choice');
//Remove old Modules
const draggableContainer = document.getElementById("draggableContainer")
while (draggableContainer.firstChild) {
draggableContainer.removeChild(draggableContainer.lastChild)
}
//Add updated Modules
modules.forEach(item => {
console.log("yeet")
let newDraggableItem = document.createElement('p')
newDraggableItem.innerHTML = `${item.title}`
newDraggableItem.draggable = true
newDraggableItem.dataset.position = item.position
draggableContainer.appendChild(newDraggableItem);
});
//ReAdd Event listeners
var p = document.getElementsByTagName('p');
for (var i of p) {
i.addEventListener('dragstart', dragStart);
i.addEventListener('dragend', dragEnd);
}
for (j of choice) {
j.addEventListener('dragover', dragOver);
j.addEventListener('dragenter', dragEnter);
j.addEventListener('dragleave', dragLeave);
j.addEventListener('drop', Drop);
}
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<title>test drag & drop </title>
</head>
<body>
<h1> it's just a test for js </h1>
<section>
<div2>
<table style="width:100%">
<tr>
<th>time</th>
<th>DIM</th>
<th>LUN</th>
</tr>
<tr>
<td>8:00 - 9:00</td>
<td>
<div class="choice"></div> S1-1
</td>
<td>
<div class="choice"></div>S1-2
</td>
</tr>
<tr>
<td>9:00 - 10:00</td>
<td>
<div class="choice"></div>S2-1
</td>
<td>
<div class="choice"></div>S2-2
</td>
</tr>
</table>
<button>save</button>
</div2>
<div class="choice" id="draggableContainer"></div>
</section>
<script src="app.js"></script>
</body>
</html>
For updating a database you could make a write database call every time you move a module. Then every time the page is loaded just sort the array based on the position value. Hope this helps!

Problem with image 'rotations' within a div element

I'm using the code below to create a 'rotation' of images for display on a website. I wish for the images to display within a 'div' element...and i'm having trouble accomplishing that. It seems the problem is when I attempt to set each image as the 'background image' for the element (the line that reads "document.getElementById("rotation").style.backgroundImage = "url(toString(ImgName[number]))";). Only the initial image displays, without any 'rotation' of other images. Any help appreciated, this is becoming very frustrating.
<!DOCTYPE html>
<html>
<title>test page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<head>
<style>
div.rotation {
height: 256px;
width: 100%;
padding: 0px;
background-color: powderblue;
border-style: solid;
border-width: 5px;
border-radius: 25px;
}
</style>
</head>
<body>
<div class="w3-quarter">
<div class="w3-padding-small">
<div class="w3-center">
<div class="rotation">
<p>
<img src='images/rotation/LA_Panel.png' id='rotateImg0' alt='image rotation' />
<img src='images/rotation/McCulloch_256.png' id='rotateImg1' style='display:none;' alt='image rotation' />
<img src='images/rotation/MO_Panel.png' id='rotateImg2' style='display:none;' alt='image rotation' />
<img src='images/rotation/Rommel.png' id='rotateImg3' style='display:none;' alt='image rotation' />
</p>
</div>
</div>
</div>
</div>
</body>
</html>
<script type='text/javascript'>
var rotation = function () {
var currentImage,
images = [],
ImgName = [],
count,
hideImages,
showImage,
fn;
count = (function () {
// Figure out how many images we have on the rotation
var x = 0;
while (document.getElementById('rotateImg' + (x + 1).toString())) {
images[x] = document.getElementById('rotateImg' + x.toString());
ImgName[x] = document.getElementById('rotateImg' + x.toString()).src;
x++;
}
return images.length;
})();
hideImages = function () {
// Hide all the images
for (var i = 0; i < count; i++) {
images[i].style.display = 'none';
}
};
showImage = function (number) {
document.getElementById("rotation").style.backgroundImage = "url(toString(ImgName[number]))";
images[number].style.display = 'block';
};
fn = {};
fn.setupRotation = function () {
// Show the first image
currentImage = 0;
showImage(currentImage);
// Start the rotation
var interval = setInterval(rotation.advanceRotation, 4000);
};
fn.advanceRotation = function () {
if (currentImage + 1 == count)
currentImage = 0;
else
currentImage++;
hideImages();
showImage(currentImage);
};
return fn;
} ();
rotation.setupRotation();
</script>

One thought might be to pluck off the first child and slam him to the end of the line.
let images = document.querySelector('#images');
setInterval(() => {
let el = images.removeChild(images.childNodes[0]);
images.appendChild(el);
}, 1000);
#images {
font-size: 0;
}
.img {
display: inline-block;
width: 30px;
height: 30px;
}
<div id="images">
<div class="img" style="background-color: red"></div>
<div class="img" style="background-color: orange"></div>
<div class="img" style="background-color: yellow"></div>
<div class="img" style="background-color: green"></div>
<div class="img" style="background-color: blue"></div>
</div>

Changing Iframes HTML

I need a script to change the iframes src every certain amount of seconds. The time between the change is different between each one.
Example:
Page Loads
Google.com is loaded.
15 seconds later
Yahoo.com is loaded.
37 seconds later
Ask.com is loaded.
12 seconds later
Dogpile.com is loaded.
and so on and so forth.
I've tried that:
<html>
<head>
<meta charset="utf-8" />
<title>Monitor Presidência</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
</head>
<body>
<div style="width: 100%; display: flex;">
<div class="ui teal progress" data-percent="0" id="example1" style="width: 90%;margin-bottom: 0px">
<div class="bar"></div>
</div>
<div class="ui icon buttons" style="width: 10%">
<button class="ui button" style="width: 25%" onclick="menos_um()">
<i class="left chevron icon"></i>
</button>
<button class="ui button " style="width: 25%" onclick="inicia()">
<i class="play icon"></i>
</button>
<button class="ui button" style="width: 25%" onclick="para_aplicacao()">
<i class="pause icon"></i>
</button>
<button class="ui button" style="width: 25%" onclick="mais_um()">
<i class="right chevron icon"></i>
</button>
</div>
</div>
<iframe id="envase" class="frame_mon" style="width: 100%;height: 100%;" src="www.google.com.br"></iframe>
<iframe id="frete_hl" class="frame_mon" style="width: 100%;height: 100%;display: none;" src="www.yahoo.com.br"></iframe>
<iframe id="frete_hl_acum" class="frame_mon" style="width: 100%;height: 100%;display: none;" src="www.terra.com.br"></iframe>
</body>
<script>
var arr_monitores = ["envase", "frete_hl", "frete_hl_acum"];
var num_monitor = 0;
var progresso = 0;
var myVar;
var setintervalatualizaframe;
function mais_um() {
/* if (num_monitor === 2) {
num_monitor = 0;
} else {
num_monitor++;
}
$('.frame_mon').css('display', 'none');
document.getElementById(arr_monitores[num_monitor]).style.display = "";*/
progresso = 100;
myStopFunction();
inicia();
/* if (num_monitor === 2) {
num_monitor = 0;
} else {
num_monitor++;
}*/
};
function menos_um() {
//progresso = 100;
if (num_monitor === 0) {
num_monitor = 2;
} else {
num_monitor--;
}
$('.frame_mon').css('display', 'none');
document.getElementById(arr_monitores[num_monitor]).style.display = "";
progresso = 0;
myStopFunction();
inicia();
};
function inicia() {
clearInterval(setintervalatualizaframe);
myStopFunction();
myVar = setInterval(function () {
if (progresso === 100) {
progresso = 0;
if (num_monitor === 2) {
location.reload();
//num_monitor = 0;
} else {
num_monitor++;
}
$('.frame_mon').css('display', 'none')
document.getElementById(arr_monitores[num_monitor]).style.display = "";
};
progresso++;
progresso++;
$('#example1').data('percent', progresso);
$('#example1').progress();
}, 3800);
}
function myStopFunction() {
clearInterval(myVar);
//atualiza_frame();
}
inicia();
function para_aplicacao(){
clearInterval(myVar);
atualiza_frame();
}
function atualiza_frame() {
clearInterval(setintervalatualizaframe);
setintervalatualizaframe = setInterval(function () {
document.getElementById(arr_monitores[num_monitor]).src=document.getElementById(arr_monitores[num_monitor]).src;
},1);
}
</script>
</html>

The way you are using setInterval and setTimeout is not properly
handled, as it creates a timer id to schedule execution. 0
A much more efficient way is to use the Promises async library, which is displayed below. 1
For websites that won't work, they are using a response header that won't allow their pages to be framed. You can work around this with some back-end program, where the server loads the web files then forwards them. 2
<!DOCTYPE html>
<html>
<head>
<title> Hello </title>
<style>
iframe {
display: block;
width: 1000px;
height: 500px;
margin-left: auto;
margin-right: auto;
}
iframe:focus {
outline: none;
}
button {
display: block;
margin: auto auto;
}
label {
display: block;
margin-left: auto;
margin-right: auto;
}
input {
display: block;
margin: auto auto;
}
</style>
</head>
<body>
<div id='main'>
<button id='wait' onclick='wait()'>Wait</button>
<label>Seconds</label>
<input type='number' id='seconds' placeholder='milliseconds'>
<button id='switching' onclick='webSwitch()'>Switch sites</button>
<iframe id='switchMe' src='https://codepen.io'></iframe>
</div>
<script>
//Array of webpages
var webList = ["https://www.bing.com", "https://www.walmart.com","https://www.codepen.io"];
//For tracking position in array
var count = 0;
//Function to be ran by event
function webSwitch() {
console.log('I have been called');
if (count >= webList.length) {
count = 0;
}
//Setting new URL
document.getElementById('switchMe').src = webList[count];
//Make sure to use next URL
count++;
}
function wait() {
console.log('Click!');
var numMS = document.getElementById('seconds').value;
sleep(numMS).then(() => {
webSwitch();
})
}
function sleep (time) {
return new Promise((resolve) => setTimeout(resolve, time));
}
</script>
</body>
</html>

Function keeps executing piece of code even if changed

I'm currently having a problem making a Tic-Tac-Toe game where even if i change the "state" variable it keeps executing the code inside it, how can i solve this problem? Is there a easy way to keep executing constant code for making a game?
$(document).ready(function() {
gameManager();
});
$(document).ready(function() {
gameManager();
});
var playerSelect, aiSelect = "";
var state = "choose";
var turn = "player";
var gameOn = true;
function gameManager() {
if (state == "choose") {
chooseSide();
} else if (state == "play") {
createGrid();
if (turn == "player") {
playerChoose();
console.log("Player's turn");
} else {
playerChoose();
console.log("Enemy's turn");
}
}
}
function playerChoose() {
$('.gridElement').click(function() {
$(this).html('<div class="gridElement">' + playerSelect + '</div>');
});
}
function chooseSide() {
console.log(state);
$('#textContainer').html('<p> Choose Side: </p> <div class="chooseButton">X</div> <div class="chooseButton">O</div>');
$('.chooseButton').click(function() {
console.log(state);
playerSelect = $(this).html();
if (playerSelect == "X") {
aiSelect = "O";
} else {
aiSelect = "X";
}
state = "play"
console.log(state);
});
}
function createGrid() {
for (var i = 0; i < 9; i++) {
$('#gridContainer').append('<div class="gridElement"> </div>');
}
var gridElementSize = $('#gridContainer').width() / 3;
$('.gridElement').css({
'width': gridElementSize,
"height": gridElementSize
});
}
#gridContainer {
border: 2px solid blue;
width: 200px;
height: 200px;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
}
.gridElement {
display: inline-block;
vertical-align: top;
border: 1px solid black;
}
#textContainer {
margin-left: auto;
margin-right: auto;
}
.chooseButton {
display: inline-block;
}
<!DOCTYPE>
<!DOCTYPE html>
<html>
<head>
<!-- INITIALIZE -->
<link href="https://fonts.googleapis.com/css?family=Bungee+Shade" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Black+Ops+One" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://use.fontawesome.com/ca5f7b6f9a.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="stylesheet.css">
<script src="script.js"></script>
<!--CONTENT-->
<title>TicTacToe</title>
</head>
<body>
<div id="textContainer">
</div>
<div id="gridContainer">
</div>
</body>
</html>

As Bamar said, Javascript web applications are event-driven, meaning you need to create event handlers for user interactions with the web page. Events occur when the user interacts with the browser (clicks an element on the page, scrolls the view, etc.). Event handlers are Javascript functions. When binding event handlers, you should only bind them once to an event type. There are only two events in your application that need handling: choosing X or O, and clicking on a square in the grid.
I refactored your code to illustrate a better approach. The choosing of sides is bound once in initGame, and the grid-square-click is bound to the squares when they are created (each time the game is reset by choosing sides again). Note that it is necessary to bind the square click handler again each time the game is reset, because the previous gridElements are removed at the top of resetGrid, and the event handler binding to those removed elements is lost.
$(document).ready(function() {
initGame();
});
var playerSelect, aiSelect = "";
var turn;
var gameOn;
function initGame() {
$('#textContainer').html('<p> Choose Side: </p> <div class="chooseButton">X</div> <div class="chooseButton">O</div>');
$('.chooseButton').click(function(){
playerSelect = $(this).html();
if(playerSelect == "X"){
aiSelect = "O";
} else {
aiSelect = "X";
}
resetGame();
});
}
function resetGame(){
gameOn = true;
turn = "player";
resetGrid();
}
function resetGrid(){
// remove any existing grid elements
$('.gridElement').remove();
for(var i = 0; i < 9; i++){
$('#gridContainer').append('<div class="gridElement"></div>');
}
var gridElementSize = $('#gridContainer').width()/3;
$('.gridElement').css({'width': gridElementSize, "height": gridElementSize});
// bind the click handler to the new elements
$('.gridElement').click(function(e){ // e is the event
handlePlayerClick(e);
});
}
function checkForWinOrDraw() {
// check for win or draw
gameOn = true; // set to false if game is over
}
function handlePlayerClick(e) { // e is the click event
if( gameOn == false ) {
// the current game is over, so do nothing
return;
}
if(turn == "player"){
square = $(e.target);
if( square.html() == "") { // if the square is empty
$(e.target).html(playerSelect); // e.target is the grid element
turn = "enemy";
console.log("Player has made a move");
// the player has made a move
checkForWinOrDraw();
makeEnemyMove();
} else {
console.log("Square has already been taken.");
}
} else {
console.log("Player can't play. It's the enemy's turn");
}
}
function makeEnemyMove() {
if( gameOn == false ) {
// the current game is over, so do nothing
return;
}
// dumb AI picks first empty square. Replace with smart AI
els = $('.gridElement').toArray();
var i;
for( i = 0; i < els.length; i++ ) {
var el = $(els[i]);
if( el.html() == "" ) {
el.html(aiSelect);
console.log("Enemy has made a move");
turn = "player";
break;
}
}
checkForWinOrDraw();
}
#gridContainer{
border: 2px solid blue;
width: 200px;
height: 200px;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
}
.gridElement{
display: inline-block;
vertical-align:middle;
text-align: center;
padding-top: 20px;
border: 1px solid black;
}
#textContainer{
margin-left: auto;
margin-right: auto;
}
.chooseButton{
display: inline-block;
}
<!DOCTYPE>
<!DOCTYPE html>
<html>
<head>
<!-- INITIALIZE -->
<link href="https://fonts.googleapis.com/css?family=Bungee+Shade" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Black+Ops+One" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://use.fontawesome.com/ca5f7b6f9a.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="stylesheet.css">
<script src="script.js"></script>
<!--CONTENT-->
<title>TicTacToe</title>
</head>
<body>
<div id="textContainer">
</div>
<div id="gridContainer">
</div>
</body>
</html>