Refactoring long if/else if statement with for loop - javascript - javascript

I know there is a way for me to refactor this code, but I can't figure it out and I could use some help. I created a tic tac toe game and created the functionality to declare a winner, it works, but it's way too long.
$(document).ready(function() {
var turn = 0;
// var winOptions = [['#1','#2','#3'], ['#4','#5','#6'], ['#7','#8','#9'], [1,5,9], [3,5,7], [1,4,7], [3,6,9], [2,4,8]];
$('td').on("click", function() {
if (turn % 2 === 0) {
$(this).text("0");
} else {
$(this).text("X");
}
$(this).off("click");
turn++;
checkForWinner()
});
function checkForWinner() {
if ($('#1').text()==='X' && $('#2').text()==='X' && $('#3').text()==='X')
alert('you win!');
else if ($('#4').text()==='X' && $('#5').text()==='X' && $('#6').text()==='X')
alert('you win!');
else if ($('#7').text()==='X' && $('#8').text()==='X' && $('#9').text()==='X')
alert('you win!');
else if ($('#1').text()==='X' && $('#5').text()==='X' && $('#9').text()==='X')
alert('you win!');
else if ($('#3').text()==='X' && $('#5').text()==='X' && $('#7').text()==='X')
alert('you win!');
else if ($('#1').text()==='X' && $('#4').text()==='X' && $('#7').text()==='X')
alert('you win!');
else if ($('#3').text()==='X' && $('#6').text()==='X' && $('#9').text()==='X')
alert('you win!');
else if ($('#2').text()==='X' && $('#4').text()==='X' && $('#8').text()==='X')
alert('you win!');
else if ($('#1').text()==='O' && $('#2').text()==='O' && $('#3').text()==='O')
alert('you win!');
else if ($('#4').text()==='O' && $('#5').text()==='O' && $('#6').text()==='O')
alert('you win!');
else if ($('#7').text()==='O' && $('#8').text()==='O' && $('#9').text()==='O')
alert('you win!');
else if ($('#1').text()==='O' && $('#5').text()==='O' && $('#9').text()==='O')
alert('you win!');
else if ($('#3').text()==='O' && $('#5').text()==='O' && $('#7').text()==='O')
alert('you win!');
else if ($('#1').text()==='O' && $('#4').text()==='O' && $('#7').text()==='O')
alert('you win!');
else if ($('#3').text()==='O' && $('#6').text()==='O' && $('#9').text()==='O')
alert('you win!');
else if ($('#2').text()==='O' && $('#4').text()==='O' && $('#8').text()==='O')
alert('you win!');
}
});
I started making the array variable win options to loop through, but it still isn't working.
FYI, those selectors are the id's for each td tag in my HTML.
Thanks for taking a look at this.

Some refactoring along the lines of Shilly's comment might be called for. However, without drastically changing your design, you could do something like the following:
var winConditions = [
['#1','#2','#3'], ['#4','#5','#6'], ['#7','#8','#9'], // rows
['#1','#4','#7'], ['#2','#5','#8'], ['#3','#6','#9'], // columns
['#1','#5','#9'], ['#3','#5','#7'] // diagonals
];
for (var i = 0, len = winConditions.length; i < len; i++) {
var text = $(winConditions[i][0]).text();
if (
(text === 'X' || text === 'O') &&
$(winConditions[i][1]).text() === text && $(winConditions[i][2]).text() === text
) {
alert('you win!');
break;
}
}

Related

How can I make this JS repetitive code shorter

I just wrote this piece of code that does the thing it's supposed to do, although it's really messy and pretty repetitive and I'm wondering how can I make it much shorter and concise.
if(id==1 && player == "playerOne"){
Object.assign(playerOne, fighters[0])
}else if(id==1 && player =="playerTwo"){
Object.assign(playerTwo, fighters[0])
}
if(id==2 && player == "playerOne"){
Object.assign(playerOne, fighters[1])
}else if(id==2 && player =="playerTwo"){
Object.assign(playerTwo, fighters[1])
}
if(id==3 && player == "playerOne"){
Object.assign(playerOne, fighters[2])
}else if(id==3 && player =="playerTwo"){
Object.assign(playerTwo, fighters[2])
}
if(id==4 && player == "playerOne"){
Object.assign(playerOne, fighters[3])
}else if(id==4 && player =="playerTwo"){
Object.assign(playerTwo, fighters[3])
}
if(id==5 && player == "playerOne"){
Object.assign(playerOne, fighters[4])
}else if(id==5 && player =="playerTwo"){
Object.assign(playerTwo, fighters[4])
}
if(id==6 && player == "playerOne"){
Object.assign(playerOne, fighters[5])
}else if(id==6 && player =="playerTwo"){
Object.assign(playerTwo, fighters[5])
}
if(id==7 && player == "playerOne"){
Object.assign(playerOne, fighters[6])
}else if(id==7 && player =="playerTwo"){
Object.assign(playerTwo, fighters[6])
}
if(id==8 && player == "playerOne"){
Object.assign(playerOne, fighters[7])
}else if(id==8 && player =="playerTwo"){
Object.assign(playerTwo, fighters[7])
}
if(id==9 && player == "playerOne"){
Object.assign(playerOne, fighters[8])
}else if(id==9 && player =="playerTwo"){
Object.assign(playerTwo, fighters[8])
}
Thank you in advance!
Assuming
a) there are no more than two players
b) you don't care that this code handles id < 1 and id > 9
It looks to me like you could reduce this to a single line.
Object.assign(player == "playerOne" ? playerOne : playerTwo, fighters[id - 1])
What if you rewrite it to be something along the lines of
if (player == "playerOne") {
p = playerOne
} else if (player =="playerTwo") {
p = playerTwo
}
Object.assign(p, fighters[id - 1])
A for loop might be helpful:
for (let i = 1; i < 10; i++) {
if (id == i && player == "playerOne") {
Object.assign(playerOne, fighters[id - 1]);
} else if (id == i && player == "playerTwo") {
Object.assign(playerTwo, fighters[id - 1]);
}
}
Based on the assumptions in your example, that id must be between 1 and 9 and player can be anything, but must be playerOne or playerTwo:
for (var i = 1; i < 10; i++) {
if (id == i) {
if(player == "playerOne"){
Object.assign(playerOne, fighters[i - 1]);
} else if (player == "playerTwo") {
Object.assign(playerTwo, fighters[i - 1]);
}
}
}

How to remove edge cases for string and number expressions

I'm building a rock, paper, scissors game and working on excluding edge cases.
The function is setPlayerMoves(), which is supposed to set previously undefined global variables for player moves and give them a 'value' between 1-99. how do I excluded edge cases like wrong move type (eg. 'rok') or wrong value (eg. 100).
Here is my incorrect code:
function setPlayerMoves(player, moveOneType, moveOneValue, moveTwoType, moveTwoValue, moveThreeType, moveThreeValue) {
if (player === 'Player One' && (moveOneType && moveTwoType && moveThreeType === 'rock' || 'paper' || 'scissors') && (moveOneValue && moveTwoValue && moveThreeValue === (>= 1 && <= 99))) {
playerOneMoveOneType = 'rock';
playerOneMoveTwoType = 'paper';
playerOneMoveThreeType = 'scissors';
playerOneMoveOneValue = 11;
playerOneMoveTwoValue = 33;
playerOneMoveThreeValue = 55;
} else if (player === 'Player Two') {
playerTwoMoveOneType = 'rock';
playerTwoMoveTwoType = 'paper';
playerTwoMoveThreeType = 'scissors';
playerTwoMoveOneValue = 11;
playerTwoMoveTwoValue = 33;
playerTwoMoveThreeValue = 55;
}
}
Problem
Code for checking edge cases are wrong.
(player === 'Player One' && (moveOneType && moveTwoType && moveThreeType === 'rock' || 'paper' || 'scissors') && (moveOneValue && moveTwoValue && moveThreeValue === (>= 1 && <= 99)))
Also you are checking the edge cases for only 'player one'
Solution
Check the values seperately before assigning values and create a valid variable
let valid = false
let states = ['rock','paper','scissors'];
if((states.indexOf(moveOneType) != -1) && (states.indexOf(moveTwoType) != -1) && (states.indexOf(moveThreeType) != -1)){
// valid state
valid = true;
}else{
valid = false;
}
if((moveOneValue >=1 && moveOneValue <= 99) && (moveTwoValue >=1 && moveTwoValue <= 99) && (moveThreeValue >=1 && moveThreeValue <= 99)){
//valid value
valid = true;
}else{
valid = false
}
Then assign the values.
if ((player === 'Player One') && valid) {
playerOneMoveOneType = moveOneType;
playerOneMoveTwoType = moveTwoType;
playerOneMoveThreeType = moveThreeType;
playerOneMoveOneValue = moveOneValue;
playerOneMoveTwoValue = moveTwoValue;
playerOneMoveThreeValue = moveThreeValue;
} else if ((player === 'Player Two') && valid) {
playerTwoMoveOneType = moveOneType;
playerTwoMoveTwoType = moveTwoType;
playerTwoMoveThreeType = moveThreeType;
playerTwoMoveOneValue = moveOneValue;
playerTwoMoveTwoValue = moveTwoValue;
playerTwoMoveThreeValue = moveThreeValue;
}
Also if possible
Create an object each for player1 and player2 like below and use.
let player1 = {
moveOneType:'rock'
moveTwoType:'paper'
moveThreeType:'scissors'
moveOneValue: 23
moveTwoValue: 33
moveThreeValue: 98
}

HTML checkbox on/off detection in JavaScript

I have made a solar system simulation and have some 'settings' which the user can change. I have made it so the settings only update when the save button is pressed. This works and the bodies are hidden if a box is checked but say for example, i checked mercury and saved the changes then wanted to check Venus as well when i save the changes Venus is hidden but Mercury is shown again. how can i make it so that Mercury stays hidden until the box in uncheked.
(note the check boxes decide whether a planet should be hidden or not so hideMer for example when true would stop drawing mercury onto the canvas)
code which i think the issue applies to:
function animate() {
//clears canvas each new loop
if (showPath==false){
c.clearRect(-innerWidth/2,-innerHeight/2,innerWidth,innerHeight);
}
hideBodies = [hideMer, hideVen, hideEar, hideMar, hideJup, hideSat, hideUra, hideNep];
drawSun();
for (var i=0; i< xPosList.length; i++){
leapfrog(i);
if (hideBodies[i]==false){
drawBody(i);
}
}
}
function saveChanges() {
showPath=(document.getElementById("showPath").value=="True");
//Mercury
if (document.getElementById("mer").checked && hideMer == false){
hideMer = true;
} else if (document.getElementById("mer").checked && hideMer == true){
hideMer = false;
}
//Venus
if (document.getElementById("ven").checked && hideVen == false){
hideVen = true;
} else if (document.getElementById("ven").checked && hideVen == true){
hideVen = false;
}
//Earth
if (document.getElementById("ear").checked && hideEar == false){
hideEar = true;
} else if (document.getElementById("ear").checked && hideEar == true){
hideEar = false;
}
//Mars
if (document.getElementById("mar").checked && hideMar == false){
hideMar = true;
} else if (document.getElementById("mar").checked && hideMar == true){
hideMar = false;
}
//Jupiter
if (document.getElementById("jup").checked && hideJup == false){
hideJup = true;
} else if (document.getElementById("jup").checked && hideJup == true){
hideJup = false;
}
//Saturn
if (document.getElementById("sat").checked && hideSat == false){
hideSat = true;
} else if (document.getElementById("sat").checked && hideSat == true){
hideSat = false;
}
//Uranus
if (document.getElementById("ura").checked && hideUra == false){
hideUra = true;
} else if (document.getElementById("ura").checked && hideUra == true){
hideUra = false;
}
//Neptune
if (document.getElementById("nep").checked && hideNep == false){
hideNep = true;
} else if (document.getElementById("nep").checked && hideNep == true){
hideNep = false;
}
console.log(hideMer);
alert(hideMer);
}
whole code: https://jsfiddle.net/nczpod06/6/
In the function save changes for each planet I'm only changing the boolean value when it is checked and not when it is unchecked. To fix this (for example for mercury) I needed to add the not boolean logical operator and then it works... for example:
//Mercury
if (document.getElementById("mer").checked && hideMer == false){
hideMer = true;
} else if (!(document.getElementById("mer").checked) && hideMer == true){
hideMer = false;
}

Check if last character is a question mark in javascript

function askQuestion(){
var Prompt = prompt("What yes or no question do you have?", "Type it here...");
var number = Math.floor((Math.random() * 8) + 1);
if(Prompt != null){
if (number == 1){
alert("Signs point yo yes.");
}else if(number == 2){
alert("Yes.");
}else if(number == 3){
alert("Reply hazy, try agian.");
}else if(number == 4){
alert("Doubtful.");
}else if(number == 5){
alert("All signs point to no.");
}else if(number == 6){
alert("Most Likely.");
}else if(number == 7){
alert("Absolutely.");
}else if(number == 8){
alert("It doesn't look good.");
}
}else{
alert("Please re-ask the Magic 8 Ball.")
}
}
<body bgColor="Black">
<center><img src="8ball.png" onClick="askQuestion()" style="cursor:pointer;"></center>
</body>
This is what I have. What I would like to know, is how to see the text typed in the prompt has a question mark at the end.
if Prompt is a string then it should just be as simple as
var lastChar = Prompt.slice(-1);
if(lastChar == '?') { .... }
if (Prompt.slice(-1) === "?") {
...
}
Old answer (substr()):
var lastChar = (Prompt.trim().substr(-1) === '?')
New answer (substring()):
var lastChar = (Prompt.trim().substring(Prompt.length - 1) === '?')
You can use the charAt() method:
var lastChar = Prompt.charAt(Prompt.length-1);
if (lastChar === "?") {
// your logic here
}

Form which redirects by achieved score

I have a html form that has 16 questions that have radio buttons to answer "Yes or No" each having a different value, after q16 the user clicks next and depending on the score the user is taken to the right page ! of 3 pages
Here is the code that I have done was working upto q9 but cannot see where I have gone wrong
function submitForm(){
var totalScore = 0;
if(document.myform.username.value.length == 0){ //make sure a name has been entered
alert('Please enter a name.');
}else if(document.myform.q1[0].checked == false && document.myform.q1[1].checked == false){// make sure q1 has been answered
alert('Please answer question 1.');
}else if(document.myform.q2[0].checked == false && document.myform.q2[1].checked == false){// make sure q2 has been answered
alert('Please answer question 2.');
}else if(document.myform.q3[0].checked == false && document.myform.q3[1].checked == false){// make sure q3 has been answered
alert('Please answer question 3.');
}else if(document.myform.q4[0].checked == false && document.myform.q4[1].checked == false){// make sure q4 has been answered
alert('Please answer question 4.');
}else if(document.myform.q5[0].checked == false && document.myform.q5[1].checked == false){// make sure q5 has been answered
alert('Please answer question 5.');
}else if(document.myform.q6[0].checked == false && document.myform.q6[1].checked == false){// make sure q6 has been answered
alert('Please answer question 6.');
}else if(document.myform.q7[0].checked == false && document.myform.q7[1].checked == false){// make sure q7 has been answered
alert('Please answer question 7.');
}else if(document.myform.q8[0].checked == false && document.myform.q8[1].checked == false){// make sure q8 has been answered
alert('Please answer question 8.');
}else if(document.myform.q9[0].checked == false && document.myform.q9[1].checked == false && document.myform.q9[2].checked == false){// make sure q9 has been answered
alert('Please answer question 9.');
}else if(document.myform.q10[0].checked == false && document.myform.q10[1].checked == false && document.myform.q10[2].checked == false){// make sure q10 has been answered
alert('Please answer question 10.');
}else if(document.myform.q11[0].checked == false && document.myform.q11[1].checked == false){// make sure q11 has been answered
alert('Please answer question 11.');
}else if(document.myform.q12[0].checked == false && document.myform.q12[1].checked == false){// make sure q12 has been answered
alert('Please answer question 12.');
}else if(document.myform.q13[0].checked == false && document.myform.q13[1].checked == false){// make sure q13 has been answered
alert('Please answer question 13.');
}else if(document.myform.q14[0].checked == false && document.myform.q14[1].checked == false){// make sure q14 has been answered
alert('Please answer question 14.');
}else if(document.myform.q15[0].checked == false && document.myform.q15[1].checked == false && document.myform.q15[2].checked == false){// make sure q15 has been answered
alert('Please answer question 15.');
}else if(document.myform.q16[0].checked == false && document.myform.q16[1].checked == false && document.myform.q16[2].checked == false){// make sure q16 has been answered
alert('Please answer question 16.');
}else{ //everything has been entered
var q1Score = 0 //work out the value of q1
if(document.myform.q1[0].checked == true){
q1Score=document.myform.q1[0].value;
}else if(document.myform.q1[1].checked == true){
q1Score=document.myform.q1[1].value;
}
var q2Score = 0 //work out the value of q2
if(document.myform.q2[0].checked == true){
q2Score=document.myform.q2[0].value;
}else if(document.myform.q2[1].checked == true){
q2Score=document.myform.q2[1].value;
}
var q3Score = 0 //work out the value of q3
if(document.myform.q3[0].checked == true){
q3Score=document.myform.q3[0].value;
}else if(document.myform.q3[1].checked == true){
q3Score=document.myform.q3[1].value;
}
var q4Score = 0 //work out the value of q4
if(document.myform.q4[0].checked == true){
q4Score=document.myform.q4[0].value;
}else if(document.myform.q4[1].checked == true){
q4Score=document.myform.q4[1].value;
}
var q5Score = 0 //work out the value of q5
if(document.myform.q5[0].checked == true){
q5Score=document.myform.q5[0].value;
}else if(document.myform.q5[1].checked == true){
q5Score=document.myform.q5[1].value;
}
var q6Score = 0 //work out the value of q6
if(document.myform.q6[0].checked == true){
q6Score=document.myform.q6[0].value;
}else if(document.myform.q6[1].checked == true){
q6Score=document.myform.q6[1].value;
}
var q7Score = 0 //work out the value of q7
if(document.myform.q7[0].checked == true){
q7Score=document.myform.q7[0].value;
}else if(document.myform.q7[1].checked == true){
q7Score=document.myform.q7[1].value;
}
var q8Score = 0 //work out the value of q8
if(document.myform.q8[0].checked == true){
q8Score=document.myform.q8[0].value;
}else if(document.myform.q8[1].checked == true){
q8Score=document.myform.q8[1].value;
}
var q9Score = 0 //work out the value of q9
if(document.myform.q9[0].checked == true){
q9Score=document.myform.q9[0].value;
}else if(document.myform.q9[1].checked == true){
q9Score=document.myform.q9[1].value;
}else if(document.myform.q9[2].checked == true){
q9Score=document.myform.q9[2].value;
}
var q10Score = 0 //work out the value of q10
if(document.myform.q10[0].checked == true){
q10Score=document.myform.q10[0].value;
}else if(document.myform.q10[1].checked == true){
q10Score=document.myform.q10[1].value;
}else if(document.myform.q10[2].checked == true){
q10Score=document.myform.q10[2].value;
}
var q11Score = 0 //work out the value of q11
if(document.myform.q11[0].checked == true){
q11Score=document.myform.q11[0].value;
}else if(document.myform.q11[1].checked == true){
q11Score=document.myform.q11[1].value;
}
var q12Score = 0 //work out the value of q12
if(document.myform.q12[0].checked == true){
q12Score=document.myform.q12[0].value;
}else if(document.myform.q12[1].checked == true){
q12Score=document.myform.q12[1].value;
}
var q13Score = 0 //work out the value of q13
if(document.myform.q13[0].checked == true){
q13Score=document.myform.q13[0].value;
}else if(document.myform.q13[1].checked == true){
q13Score=document.myform.q13[1].value;
}
var q14Score = 0 //work out the value of q14
if(document.myform.q14[0].checked == true){
q14Score=document.myform.q14[0].value;
}else if(document.myform.q14[1].checked == true){
q14Score=document.myform.q14[1].value;
}
var q15Score = 0 //work out the value of q15
if(document.myform.q15[0].checked == true){
q15Score=document.myform.q15[0].value;
}else if(document.myform.q15[1].checked == true){
q15Score=document.myform.q15[1].value;
}else if(document.myform.q15[2].checked == true){
q15Score=document.myform.q15[2].value;
}
var q16Score = 0 //work out the value of q16
if(document.myform.q16[0].checked == true){
q16Score=document.myform.q16[0].value;
}else if(document.myform.q16[1].checked == true){
q16Score=document.myform.q16[1].value;
}else if(document.myform.q16[2].checked == true){
q16Score=document.myform.q16[2].value;
}
//add the scores together
totalScore=parseInt(q1Score)+parseInt(q2Score)+parseInt(q3Score)+parseInt(q4Score)+parseInt(q5Score)+parseInt(q6Score)+parseInt(q7Score)+parseInt(q8Score)+parseInt(q9Score)+parseInt(q10Score)+parseInt(q11Score)+parseInt(q12Scorce)+parseInt(q13Score)+parseInt(q14Score)+parseInt(q15Score)+parseInt(q16Score);
if(totalScore<=15){ //if it's less than or equal to 15 go to this page...
window.location.href='greenzonePage.html?name='+document.myform.username.value+'&score='+totalScore;
}else if (totalScore >=16 && totalScore <30){ //go to this page
window.location.href='yellowzonePage.html?name='+document.myform.username.value+'&score='+totalScore;
}else {
window.location.href='redzonePage.html?name='+document.myform.username.value+'&score='+totalScore;
}
}
}
To avoid this kind of repetitive code, you might want to use loops as Bergi pointed out in his comment. You could do something like this for example: (NOTE - untested!)
function submitForm() {
if(document.myform.username.value.length == 0) { //make sure a name has been entered
alert('Please enter a name.');
return;
}
var totalScore = 0;
var threeAnswerQuestions = [9, 10, 15, 16];
var numberOfQuestions = 16;
for(var i = 1; i <= numberOfQuestions; i++) {
var numerOfAnswers = threeAnswerQuestions.indexOf(i) != -1 ? 3 : 2;
var answerChecked = false;
for(var j = 0; j < numerOfAnswers; j++) {
if(document.myform['q'+i][j].checked) {
answerChecked = true;
totalScore += parseInt(document.myform['q'+i][j].value);
break;
}
}
if(!answerChecked) {
alert('Please answer question ' + i + '.');
return;
}
}
if(totalScore <= 15) { //if it's less than or equal to 15 go to this page...
window.location.href='greenzonePage.html?name='+document.myform.username.value+'&score='+totalScore;
} else if (totalScore >= 16 && totalScore < 30) { //go to this page
window.location.href='yellowzonePage.html?name='+document.myform.username.value+'&score='+totalScore;
} else {
window.location.href='redzonePage.html?name='+document.myform.username.value+'&score='+totalScore;
}
}

Categories