How to combine two filters - javascript

I have circle, triangle, square in four color, each this shape have own value
I want to make filter for shape, color and numerical range.
this is code for filter html:
<div class="searchColor" id="filterColor">
Color: <br/>
<input type="checkbox" id="Red" value="Red" />Red <br/>
<input type="checkbox" id="Blue" value="Blue"/>Blue <br/>
<input type="checkbox" id="Green" value="Green"/>Green <br/>
<input type="checkbox" id="Gold" value="Gold"/>Gold <p/>
</div>
<div class="searchColor" id="searchShape">
Shape:<br/>
<div class="paintSelect">
<input type="checkbox" id="triangle" value="triangle" />triangle <br/>
<input type="checkbox" id="circle" value="circle"/>circle <br/>
<input type="checkbox" id="square" value="square"/>square
</div>
</div>
<div class="searchSelectedNumber" id="searchNumber">
Number:<br/>
<input type="checkbox" id="number01" value="1" />10-30
<br/>
<input type="checkbox" id="number02" value="2"/>20-40
</div>
This code for JS.
var arrayNumber = [];
var arrayMax = [];
$("div[class='searchSelectedNumber'] input").change(function () {
arrayMax = $("[class^=number]");
for (i=0; i<arrayMax.length; i++){
arrayNumber[i] = arrayMax[i].innerHTML;
}
var firstIntervalStart = 0;
var firstIntervalEnd = 0;
var secondIntervalStart = 0;
var secondIntervalEnd = 0;
if ( $("#searchNumber input:checked").length == 0){
$('.color').show();
} else {
var oneChecked = $("#number01").is(':checked');
var twoChecked = $("#number02").is(':checked');
if (oneChecked) {
firstIntervalStart = 0;
firstIntervalEnd = 30;
if (twoChecked) {
firstIntervalEnd = 40;
}
}
else if (twoChecked) {
firstIntervalStart = 20;
firstIntervalEnd = 40;
}
for (i = 0; i < arrayMax.length; i++) {
if (arrayNumber[i] > firstIntervalStart && arrayNumber[i] <= firstIntervalEnd) {
$($(".color")[i]).show();
} else {
$($(".color")[i]).hide();
}
}
if (secondIntervalStart != 0) {
for (i = 0; i < arrayMax.length; i++) {
if (arrayNumber[i] > secondIntervalStart && arrayNumber[i] <= secondIntervalEnd) {
console.log("secondIntervalStart < arrayPrice[i] <= secondIntervalEnd " + $($(".color")[i]));
$($(".color")[i]).show();
} else {
$($(".color")[i]).hide();
}
}
}
}
});
$("div[class='searchColor'] input").change(function () {
if($("#filterColor input:checked").length == 0 && $("#searchShape input:checked").length == 0
){
$('.color').show();
}else if($("#filterColor input:checked").length == 0 && $("#searchShape input:checked").length > 0){
$('.color').show();
$("#searchShape input:not(:checked)").each(function() {
var k = $(this).val();
$('.' + k).hide();
});
}else if($("#filterColor input:checked").length > 0 && $("#searchShape input:checked").length == 0){
$('.color').show();
$("#filterColor input:not(:checked)").each(function() {
$('.' + $(this).attr('value')).hide();
});
}else{
$('.color').show();
$("#searchShape input:not(:checked)").each(function() {
$('.' + $(this).attr('value')).hide();
});
$("#filterColor input:not(:checked)").each(function() {
$('.' + $(this).attr('value')).hide();
});
}
});
Code is working, but the numerical range code works separately from color and shape. And I don't understand how to force this script to work together.
When I select numeric range and shape or color(or together color and shape) I want to see this shape or color in the numeric range. I try the many varients, but no one variant not work.
This link on example that I have
jsfiddle.net/this my code

As the number of filters increases you need to check various possibility as you have three filters here conditions is :
None of the filter is selected
Any one filter is selected
All the filter is selected
if(color.length == 0 && shape.length == 0 && number.length > 0){
showEle(number)
}else if(color.length == 0 && shape.length > 0 && number.length == 0){
showEle(shape)
}else if(color.length > 0 && shape.length == 0 && number.length == 0){
showEle(color)
}else if(color.length > 0 && shape.length > 0 && number.length == 0){
var temp = [];
color.forEach(function(oe){
shape.forEach(function(ie){
temp.push(oe +"."+ie);
});
});
showEle(temp);
}else if(color.length == 0 && shape.length > 0 && number.length > 0){
var temp = [];
shape.forEach(function(oe){
number.forEach(function(ie){
temp.push(oe +"."+ie);
});
});
showEle(temp);
}else if(color.length > 0 && shape.length == 0 && number.length > 0){
var temp = [];
color.forEach(function(oe){
number.forEach(function(ie){
temp.push(oe +"."+ie);
});
});
showEle(temp);
}else{
var temp = [];
color.forEach(function(oe){
number.forEach(function(ie){
shape.forEach(function(iie){
temp.push(oe +"."+ie + "." + iie);
});
});
});
showEle(temp);
}
See this fiddle for more info https://jsfiddle.net/y2b3qebr/23/

Related

Change checked radio button with button tag and js

I wanna change checked radio button with a click on another "button" element
html
<button onclick="slideMe(-1)"></button>
<input checked type="radio" name="slider" id="slide1">
<input type="radio" name="slider" id="slide2">
<input type="radio" name="slider" id="slide3">
<input type="radio" name="slider" id="slide4">
<input type="radio" name="slider" id="slide5">
<button onclick="slideMe(1)"></button>
JS
function slideMe(dir) {
var inputs, slides, i;
inputs = document.getElementsByName("slider");
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked == true) {
inputs[i].checked = 0;
if (i > 0 && i < 7 || dir == -1) {
inputs[i + dir].checked = true;
break;
} else if (i = 0) {
inputs[8].checked = true;
break;
} else {
inputs[0].checked = true;
break;
}
}
}
}
here is a JsFiddle example
I changed your slideMe function.
First, I obtain index of current checked input and assign it to a variable(currIndex).
After that, according to value of dir I increase(if dir==1) or decrease(if dir== -1) value of currIndex. And apply additional conditionals.
function slideMe(dir) {
var inputs, currIndex;
inputs = document.getElementsByName("slider");
for(var i=0; i<inputs.length;i++)
{
if(inputs[i].checked==true)
{
currIndex = i;
inputs[i].checked = false;
}
}
if(dir == 1)
{
currIndex++;
if(currIndex == (inputs.length))
currIndex = 0;
}
else
{
currIndex--;
if(currIndex == -1)
currIndex = (inputs.length-1);
}
inputs[currIndex].checked = true;
}
JS Fiddle example.
Try this code
function slideMe(dir) {
var inputs, slides, i;
inputs = document.getElementsByName("slider");
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked == true) {
inputs[i].checked = false;
if (i > 0 && i < inputs.length && i + dir < inputs.length) {
inputs[i + dir].checked = true;
break;
} else if (i == 0 && dir == 1) {
inputs[i + dir].checked = true;
break;
} else if (i == 0 && dir == -1) {
inputs[inputs.length - 1].checked = true;
break;
} else if (i + dir == inputs.length) {
inputs[0].checked = true;
break;
}
}
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<button onclick="slideMe(-1)"></button>
<input checked type="radio" name="slider" id="slide1">
<input type="radio" name="slider" id="slide2">
<input type="radio" name="slider" id="slide3">
<input type="radio" name="slider" id="slide4">
<input type="radio" name="slider" id="slide5">
<button onclick="slideMe(1)"></button>
</body>
</html>

jQuery search input

I have got this HTML:
<input type="text" placeholder="Type country name" class="Cinp">
<div class="contres"></div>
And this jQuery code:
var country_list= ["Argentina","Armenia","Aruba","Australia","Austria","Azerbaijan"];
var results = [];
var selected= [];
$(".Cinp").keyup(function(e) {
var value=$(this).val();
if (e.which >= 65 && e.which <= 90 || e.which==8) {
if (value.length!=0) {
function filter(letter) {
var len = country_list.length;
var i = 0;
while(i < len) {
if (country_list[i].indexOf(letter) == 0 || country_list[i].indexOf(letter.toUpperCase()) == 0 ) {
results.push(country_list[i]);
$(".contres").append(country_list[i]);
}
i++;
}
}
}
}
}
So it works perfectly when I type only first letter, but when I type Az it should return Azerbaijan only but it returns all countries that start with a.
$(".contres").clear(); /// whether need that?
while(i < len) {
if (country_list[i].indexOf(letter) == 0 || country_list[i].indexOf(letter.toUpperCase()) == 0 ){
results.push(country_list[i]);
$(".contres").append(country_list[i]);
}
i++;
}
}

jquery Image Puzzle

I am trying to make a puzzle using jQuery. I have followed this code
Create an image puzzle game using jQuery
<!DOCTYPE html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AnupPuzzle</title>
<script src="jquery-1.8.2.min.js"></script>
<style>
.main-container{background:#600; width:270px; height:270px; text-align:center;}
button{width:80px; height:80px; background:#CCC; float:left; margin:5px; color:#600; font-size:18px; }
button:hover{background:#9CF;}
span{width:100%; color:#900; font-family:"Comic Sans MS", cursive;}
</style>
</head>
<body>
<h3>Are you want to try your brain logics...</h3>
<div class="main-container">
<button alt="" name="1" value="1" id="1">5</button>
<button alt="" name="2" value="2" id="2">6</button>
<button alt="" name="3" value="3" id="3">8</button>
<button alt="" name="4" value="4" id="4">3</button>
<button alt="" name="5" value="5" id="5"></button>
<button alt="" name="6" value="6" id="6">7</button>
<button alt="" name="7" value="7" id="7">1</button>
<button alt="" name="8" value="8" id="8">2</button>
<button alt="" name="9" value="9" id="9">4</button>
</div>
<span>Anup</span>
</body>
</html>
<script>
$(document).ready(function(){
var upval, downval, leftval, rightval, txt, bVal;
$("button").click(function(){
txt = $(this).text();
bVal = $(this).val();
if(txt != ""){
if((bVal != 1) && (bVal != 2) &&(bVal != 3)){
upval = eval(eval(bVal)-eval(3));
var upTxt = $("#"+upval).text();
if(upTxt == ""){
$("#"+upval).text(txt);
$(this).text("");
}
}
if((bVal != 7) && (bVal != 8) &&(bVal != 9)){
downval = eval(eval(bVal)+ eval(3));
var downTxt = $("#"+downval).text();
if(downTxt == ""){
$("#"+downval).text(txt);
$(this).text("");
}
}
if((bVal != 1) && (bVal != 4) &&(bVal != 7)){
leftval = eval(eval(bVal)-eval(1));
var leftTxt = $("#"+leftval).text();
if(leftTxt == ""){
$("#"+leftval).text(txt);
$(this).text("");
}
}
if((bVal != 3) && (bVal != 6) &&(bVal != 9)){
rightval = eval(eval(bVal)+ eval(1));
var rightTxt = $("#"+rightval).text();
if(rightTxt == ""){
$("#"+rightval).text(txt);
$(this).text("");
}
}
var one = $("#1").text();
var two = $("#2").text();
var three = $("#3").text();
var four = $("#4").text();
var five = $("#5").text();
var six = $("#6").text();
var seven = $("#7").text();
var eight = $("#8").text();
var nine = $("#9").text();
if((one == "1")&&(two == "2")&&(three == "3")&&(four == "4")&&(five == "5")&&(six == "6")&&(seven == "7")&&(eight == "8")&&(nine == "")){
alert("Congratulations You Won The Game...");
$("button").attr("disabled", "disabled");
}
}
});
});
</script>
I am trying to make it so that instead of the numbers moving, the button background images do
If someone Could please help find a solution that would be greatly appreciated
https://jsfiddle.net/24jjwdxj/
this is what I have so far
However in this fiddle I am using background colors to demonstrate my
desired result.
The solution works as given. Here it is in a JSFiddle, where I've separated the external jQuery resource, the HTML, the CSS, and the JS. Below is the JavaScript portion:
(function() {
var upval, downval, leftval, rightval, txt, bVal;
$("button").click(function() {
txt = $(this).text();
bVal = $(this).val();
if (txt != "") {
if ((bVal != 1) && (bVal != 2) && (bVal != 3)) {
upval = eval(eval(bVal) - eval(3));
var upTxt = $("#" + upval).text();
if (upTxt == "") {
$("#" + upval).text(txt);
$(this).text("");
}
}
if ((bVal != 7) && (bVal != 8) && (bVal != 9)) {
downval = eval(eval(bVal) + eval(3));
var downTxt = $("#" + downval).text();
if (downTxt == "") {
$("#" + downval).text(txt);
$(this).text("");
}
}
if ((bVal != 1) && (bVal != 4) && (bVal != 7)) {
leftval = eval(eval(bVal) - eval(1));
var leftTxt = $("#" + leftval).text();
if (leftTxt == "") {
$("#" + leftval).text(txt);
$(this).text("");
}
}
if ((bVal != 3) && (bVal != 6) && (bVal != 9)) {
rightval = eval(eval(bVal) + eval(1));
var rightTxt = $("#" + rightval).text();
if (rightTxt == "") {
$("#" + rightval).text(txt);
$(this).text("");
}
}
var one = $("#1").text();
var two = $("#2").text();
var three = $("#3").text();
var four = $("#4").text();
var five = $("#5").text();
var six = $("#6").text();
var seven = $("#7").text();
var eight = $("#8").text();
var nine = $("#9").text();
if ((one == "1") && (two == "2") && (three == "3") && (four == "4") && (five == "5") && (six == "6") && (seven == "7") && (eight == "8") && (nine == "")) {
alert("Congratulations You Won The Game...");
$("button").attr("disabled", "disabled");
}
}
})
})();

Including specific property in loop

I have a bit of code that appends suffixes to inputs. So users have an easier time with em vs. px. I am running into a slight issue though.
I am including the properties with an array and looping through them to see what fields need suffixes and what suffixes they need. This was working fine until I needed to change a property "border-width" to px instead of em, but keep width em's. Does this make sense?
Basically, I need to include the border-width field in my exceptions without including width.
My jQuery looks like this
var valueArray = ["padding", "width", "Width", "height", "Height"];
for(var i = 0, ii = valueArray.length; i < ii; i++){
if ($("input[name*='" + valueArray[i] + "']").attr('name') === 'kiosk_height' || $("input[name*='" + valueArray[i] + "']").attr('name') === 'kiosk_width' || $("input[name*='" + valueArray[i] + "']").attr('name') === 'border-width'){
$("input[name*='" + valueArray[i] + "']").on("focusout", function() {
var value = $(this).val();
if(value.indexOf("em") <= 0 && value.indexOf("px") <= 0 && value.indexOf("%") <= 0 && $(this).val().length != 0){
var newVal = value + 'px';
$(this).val(newVal).trigger('change');
}
});
}else{
$("input[name*='" + valueArray[i] + "']").on("focusout", function() {
var value = $(this).val();
if (value.indexOf("em") <= 0 && value.indexOf("px") <= 0 && value.indexOf("%") <= 0 && $(this).val().length != 0) {
var newVal = value + 'em';
$(this).val(newVal).trigger('change');
}
});
}
}
And here is the jsFiddle I created that includes the html.
https://jsfiddle.net/q3b0t8af/2/
I cannot change the html around, I am stuck using the name field to call out specific fields.
Made this for you:
https://jsfiddle.net/q3b0t8af/3/
All you have to do is to use a array of exclusion:
var valueArray = ["padding", "width", "Width", "height", "Height"];
var exceptionArray = ['kiosk_height','kiosk_width','border-width'];
$.each($("input"), function(i,v){
if ($(v).attr('name') != undefined && $.inArray($(v).attr('name').trim(), exceptionArray) > -1) {
$(v).on("focusout", function() {
var value = $(this).val();
if (value.indexOf("em") <= 0 && value.indexOf("px") <= 0 && value.indexOf("%") <= 0 && $(this).val().length != 0) {
var newVal = value + 'px';
}
$(this).val(newVal).trigger('change');
});
} else {
$(v).on("focusout", function() {
var value = $(this).val();
if (value.indexOf("em") <= 0 && value.indexOf("px") <= 0 && value.indexOf("%") <= 0 && $(this).val().length != 0) {
var newVal = value + 'em';
$(this).val(newVal).trigger('change');
}
});
}
});
Is being more explicit with your "em" and "px" selectors an option? Then this would work (also cleaned up the code a bit).
var emArray = ["padding", "padding-left", "padding-right ",
"padding-bottom", "padding-top ", "width ", "height"];
var pxArray = ["border-width ", "kiosk_height", "kiosk_width"];
for (var i=0; i < emArray.length; i++)
$("input[name='" + emArray[i] + "']").on("focusout", {unit:'em'}, dostuff);
for (var i=0; i < pxArray.length; i++)
$("input[name='" + pxArray[i] + "']").on("focusout", {unit:'px'}, dostuff);
function dostuff(event) {
var value = $(this).val();
var unit = event.data.unit;
if (value.indexOf("em") <= 0 && value.indexOf("px") <= 0 &&
value.indexOf("%") <= 0 && $(this).val().length != 0) {
$(this).val(value + unit).trigger('change');
}
}

Game of life in JavaScript - using Table

I finished coding Conway's Game of Life in JavaScript and HTML table.
logic cells in a table will be assigned with unique id's and based on the id operations(based 4 rules) take place.
You can find the working code at Codepen or i have put the code below.
The thing is it works well with any number of rows and 9 columns and if more than 9 columns are given their wont be unique id's so it works in undesired manner.
Query Is their a way where i can assign the whole table with unique id's.
Code block tableInitialization is the initialization part.
(function(){
$(document).ready(function(){
var column = "", appendRow = "", inc = 1, selectedCells = [], toRemoveClass = [], toAddClass = [], maxValue;
var tableInitialization = function(noOfRow, noOfColumn){
for(var row=1; row<=noOfRow; row++){
for(var col=1; col<=noOfColumn; col++){
column += "<td id =" + inc+col + "> </td>";
}
appendRow += "<tr>"+column+"</tr>";
column= "";
inc++;
}
$(".table").append(appendRow);
};
$("#submit").click(function(data){
var noOfRow = parseInt($("#rowNo").val());
var noOfColumn = parseInt($("#columnNo").val());
maxValue = parseInt(noOfRow.toString() + noOfColumn.toString());
if(isNaN(noOfRow) || isNaN(noOfColumn)){
alert("Please enter number");
} else {
tableInitialization(noOfRow, noOfColumn);
$("#container").hide();
$("td").click( function(data){
selectedCells.push(parseInt(this.id));
$(this).addClass("valid");
});
}
});
var checkAgain = function(selectedCells){
var check = 0, toBeReplaced = [], inArray = [], livingCell;
var currentNumber = 0;
var north, northEast, East, southEast, south, southWest, west, northWest;
for(var i=0; i<selectedCells.length; i++){
check = 0;
currentNumber = parseInt(selectedCells[i]);
if($("#"+(currentNumber)).hasClass("valid")){
livingCell = true;
} else {
livingCell = false;
}
if(currentNumber > 0 && currentNumber < maxValue){
/*North*/
if((currentNumber-10) > 0 && (currentNumber-10) < maxValue){
if($("#"+(currentNumber-10)).hasClass("valid")){
check ++;
}
}
/*North East*/
if((currentNumber-9) > 0 && (currentNumber-9) < maxValue){
if($("#"+(currentNumber-9)).hasClass("valid")){
check ++;
}
}
/*East*/
if((currentNumber+1) > 0 && (currentNumber+1) < maxValue){
if($("#"+(currentNumber+1)).hasClass("valid")){
check ++;
}
}
/*South East*/
if((currentNumber+11) > 0 && (currentNumber+11) < maxValue){
if($("#"+(currentNumber+11)).hasClass("valid")){
check ++;
}
}
/*South*/
if((currentNumber+10) > 0 && (currentNumber+10) < maxValue){
if($("#"+(currentNumber+10)).hasClass("valid")){
check ++;
}
}
/*South West*/
if((currentNumber+9) > 0 && (currentNumber+9) < maxValue){
if($("#"+(currentNumber+9)).hasClass("valid")){
check ++;
}
}
/*West*/
if((currentNumber-1) > 0 && (currentNumber-1) < maxValue){
if($("#"+(currentNumber-1)).hasClass("valid")){
check ++;
}
}
/*North West*/
if((currentNumber-11) > 0 && (currentNumber-11) < maxValue){
if($("#"+(currentNumber-11)).hasClass("valid")){
check ++;
}
}
if(livingCell){
if(check === 0 || check === 1 ){
if(toRemoveClass.indexOf(currentNumber) == -1){
toRemoveClass.push(currentNumber);
}
}
if(check == 4 || check == 5 || check == 6 || check == 7 || check == 8 ){
if(toRemoveClass.indexOf(currentNumber) == -1){
toRemoveClass.push(currentNumber);
}
}
if(check == 2 || check == 3){
if(toAddClass.indexOf(currentNumber) == -1){
toAddClass.push(currentNumber);
}
}
} else {
if(check == 3){
if(toAddClass.indexOf(currentNumber) == -1){
toAddClass.push(currentNumber);
}
}
}
}
}
};
var gol = function(selectedCells){
var check = 0, inArray = [];
var currentNumber = 0, livingCell;
for(var i=0; i<selectedCells.length; i++){
toBeReplaced = [];
check = 0;
currentNumber = parseInt(selectedCells[i]);
if($("#"+(currentNumber)).hasClass("valid")){
livingCell = true;
} else {
livingCell = false;
}
if(currentNumber > 0 && currentNumber < maxValue){
/*North*/
if((currentNumber-10) > 0 && (currentNumber-10) < maxValue){
if($("#"+(currentNumber-10)).hasClass("valid")){
check ++;
}
if(toBeReplaced.indexOf((currentNumber-10)) == -1){
toBeReplaced.push(currentNumber-10);
}
}
/*North East*/
if((currentNumber-9) > 0 && (currentNumber-9) < maxValue){
if($("#"+(currentNumber-9)).hasClass("valid")){
check ++;
}
if(toBeReplaced.indexOf((currentNumber-9)) == -1){
toBeReplaced.push(currentNumber-9);
}
}
/*East*/
if((currentNumber+1) > 0 && (currentNumber+1) < maxValue){
if($("#"+(currentNumber+1)).hasClass("valid")){
check ++;
}
if(toBeReplaced.indexOf((currentNumber+1)) == -1){
toBeReplaced.push(currentNumber+1);
}
}
/*South East*/
if((currentNumber+11) > 0 && (currentNumber+11) < maxValue){
if($("#"+(currentNumber+11)).hasClass("valid")){
check ++;
}
if(toBeReplaced.indexOf((currentNumber+11)) == -1){
toBeReplaced.push(currentNumber+11);
}
}
/*South*/
if((currentNumber+10) > 0 && (currentNumber+10) < maxValue){
if($("#"+(currentNumber+10)).hasClass("valid")){
check ++;
}
if(toBeReplaced.indexOf((currentNumber+10)) == -1){
toBeReplaced.push(currentNumber+10);
}
}
/*South West*/
if((currentNumber+9) > 0 && (currentNumber+9) < maxValue){
if($("#"+(currentNumber+9)).hasClass("valid")){
check ++;
}
if(toBeReplaced.indexOf((currentNumber+9)) == -1){
toBeReplaced.push(currentNumber+9);
}
}
/*West*/
if((currentNumber-1) > 0 && (currentNumber-1) < maxValue){
if($("#"+(currentNumber-1)).hasClass("valid")){
check ++;
}
if(toBeReplaced.indexOf((currentNumber-1)) == -1){
toBeReplaced.push(currentNumber-1);
}
}
/*North West*/
if((currentNumber-11) > 0 && (currentNumber-11) < maxValue){
if($("#"+(currentNumber-11)).hasClass("valid")){
check ++;
}
if(toBeReplaced.indexOf((currentNumber-11)) == -1){
toBeReplaced.push(currentNumber-11);
}
}
if(livingCell){
if(check == 0 || check == 1 ){
if(toRemoveClass.indexOf(currentNumber) == -1){
toRemoveClass.push(currentNumber);
}
}
if(check == 4 || check == 5 || check == 6 || check == 7 || check == 8 ){
if(toRemoveClass.indexOf(currentNumber) == -1){
toRemoveClass.push(currentNumber);
}
}
if(check == 2 || check == 3){
if(toAddClass.indexOf(currentNumber) == -1){
toAddClass.push(currentNumber);
}
}
} else {
if(check == 3){
if(toAddClass.indexOf(currentNumber) == -1){
toAddClass.push(currentNumber);
}
}
}
}
checkAgain(toBeReplaced);
}
for(var i=0; i<toRemoveClass.length; i++){
$("#"+toRemoveClass[i]).removeClass("valid");
}
for(var i=0; i<toAddClass.length; i++){
$("#"+toAddClass[i]).addClass("valid");
}
toBeReplaced = toAddClass;
if(toAddClass.length == 0){
//exit
return;
} else {
setInterval(function(){
gol($.unique(toBeReplaced));
},1000);
}
selectedCells = [];
toAddClass =[];
toRemoveClass = [];
};
start = function(){
if(selectedCells.length == 0){
alert("select cell");
} else {
gol(selectedCells);
}
};
});
})();
body{
background: #BBDEFB ;
}
td {
width: 20px;
height: 20px;
background: #eee;
}
table {
cursor: default;
}
.valid {
background: #00BFA5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<title>Conways Game of Life</title>
<link rel="stylesheet" type="text/css" href="gameOfLife.css">
</head>
<body>
<h1><code>Conway's game of life</code></h1>
<div id="container">
<h2><code>enter row * columns</code></h2>
<form>
<code>row ★ column : </code>
<input id="rowNo" type="text"/> ★
<input id="columnNo" type="text"/>
</form>
<button id="submit"> Submit </button>
<br><br>
</div>
<table class="table"></table>
<br><br>
<button onClick="start()"> start </button>
<br><br>
<h2><code> Rules </code></h2>
<code>1. Any live cell with fewer than two live neighbours dies,
as if caused by underpopulation.</code><br>
<code>2. Any live cell with more than three live neighbours dies,
as if by overcrowding.</code><br>
<code>3. Any live cell with two or three live neighbours lives
on to the next generation.</code><br>
<code>4. Any dead cell with exactly three live neighbours becomes
a live cell.</code>
<script type="text/javascript" src="gameOfLife.js"></script>
</body>
</html>
Without digging really deep into your code. You build the IDs by using col and row index, so you'll get something like 11, 12, 13, 14, 15, ... 110, 111, 112 etc. for the first row. Without a delimiter the ID of the eleventh row first element would be 111 too. As soon as you use a kind of delimiter like '_' your IDs are unique: 1_1, 1_2 again.
for(var row=1; row<=noOfRow; row++){
for(var col=1; col<=noOfColumn; col++){
column += "<td id =" + inc+"_"+col + "> </td>";
/* you also could add data attributes:
data-row=\""+row+"\" data-col=\""+col+"\"
*/
}
appendRow += "<tr>"+column+"</tr>";
column= "";
inc++;
}
Looking into your code, I think you will get other problems, because there is a lot of code related to "10". For example: if((currentNumber-9) > 0 && (currentNumber-9) < maxValue){ - this won't work in case you'll have more than 9 rows. But fixing this would be a rewritten version of the complete game.

Categories