I continuously get an error while trying to call a function in javascript. The code is as follows:
<!DOCTYPE html>
<html>
<head>
<title>Tic Tac Toe</title>
<SCRIPT TYPE="TEXT/JAVASCRIPT">
var xTurn = true;
var gameOver = false;
var numMoves = 0;
function squareclicked(square) {
// squareclicked is a function that is called whenever a button is clicked.
var status = document.getElementById('status');
var value = square.value;
if (gameOver) {
alert("The game is already over.");
return;
}
if (value != 'X' && value != 'O') {
if (xTurn) {
numMoves++;
square.value = 'X';
xTurn = false;
status.innerHTML = 'O\'s turn';
} else {
numMoves++;
square.value = 'O';
xTurn = true;
status.innerHTML = 'X\'s turn';
} else
alert('That square has already been played.');
}
var winner = checkWin();
if (!winner) {
//check to see if there is a tie
if (numMoves == 9)
status.innerHTML = 'Tie Game!';
} else
gameOver = true;
}
function newgame() {
var status = document.getElementById('status');
xTurn = true;
status.innerHTML = 'X\'s turn';
for (var x = 0; x < x++) {
for (var y = 0; y < y++) {
document.getElementById(x + '_' + y).value = ' ';
}
}
}
function checkWin() {
var status = document.getElementById('status');
var val0;
var val1;
var val2;
// check columns
for (var y = 0; y < y++) {
val0 = document.getElementById('0_' + y).value;
val1 = document.getElementById('1_' + y).value;
val2 = document.getElementById('2_' + y).value;
if (val0 == 'X' && val1 == 'X' && val2 == 'X') {
status.innerHTML = "X WINS!";
return true;
} else if (val0 == 'O' && val1 == 'O' && val2 == 'O') {
status.innerHTML = "O WINS!";
return true;
}
}
// check rows
for (var x = 0; x < x++) {
val0 = document.getElementById(x + '_0').value;
val1 = document.getElementById(x + '_1').value;
val2 = document.getElementById(x + '_2').value;
if (val0 == 'X' && val1 == 'X' && val2 == 'X') {
status.innerHTML = "X WINS!";
return true;
} else if (val0 == 'O' && val1 == 'O' && val2 == 'O') {
status.innerHTML = "O WINS!";
return true;
}
}
// check top left to lower right diagonal
val0 = document.getElementById('0_0').value;
val1 = document.getElementById('1_1').value;
val2 = document.getElementById('2_2').value;
if (val0 == 'X' && val1 == 'X' && val2 == 'X') {
status.innerHTML = "X WINS!";
return true;
} else if (val0 == 'O' && val1 == 'O' && val2 == 'O') {
status.innerHTML = "O WINS!";
return true;
}
// check lower left to top right diagonal
val0 = document.getElementById('2_0').value;
val1 = document.getElementById('1_1').value;
val2 = document.getElementById('0_2').value;
if (val0 == 'X' && val1 == 'X' && val2 == 'X') {
status.innerHTML = "X WINS!";
return true;
} else if (val0 == 'O' && val1 == 'O' && val2 == 'O') {
status.innerHTML = "O WINS!";
return true;
}
// no winner yet return false;
}
</script>
</head>
<body>
<h1 style="text-align:center">Tic Tac Toe</h1>
<p style="text-align:center">Tic-tac-toe is a paper-and-pencil game for two players, X and O, who take turns marking the spaces in a 3×3 grid.</p>
<p style="text-align:center">The player who succeeds in placing three of their marks in a horizontal, vertical, or diagonal row wins the game.</p>
<p style="text-align:center">Now YOU can play the classic game, but with a twist... Your opponent... IS A COMPUTER!</p>
<INPUT TYPE="BUTTON" ID="NEWGAME" VALUE="New Game" ONCLICK="newgame();">
<INPUT TYPE="BUTTON" ID="0_0" VALUE=" " ONCLICK="squareclicked(this);">
<INPUT TYPE="BUTTON" ID="1_0" VALUE=" " ONCLICK="squareclicked(this);">
<INPUT TYPE="BUTTON" ID="2_0" VALUE=" " ONCLICK="squareclicked(this);">
<BR>
<INPUT TYPE="BUTTON" ID="0_1" VALUE=" " ONCLICK="squareclicked(this);">
<INPUT TYPE="BUTTON" ID="1_1" VALUE=" " ONCLICK="squareclicked(this);">
<INPUT TYPE="BUTTON" ID="2_1" VALUE=" " ONCLICK="squareclicked(this);">
<BR>
<INPUT TYPE="BUTTON" ID="0_2" VALUE=" " ONCLICK="squareclicked(this);">
<INPUT TYPE="BUTTON" ID="1_2" VALUE=" " ONCLICK="squareclicked(this);">
<INPUT TYPE="BUTTON" ID="2_2" VALUE=" " ONCLICK="squareclicked(this);">
<BR>
<INPUT TYPE="BUTTON" ID="0_0" VALUE="Click for a cookie" ONCLICK="alert('Cookie');">
<P ID="status">X's turn</P>
</body>
</html>
If you press any of the buttons on the attached code, you get an unhandled error. The error i am getting according to Chrome Inspect Element
If it matters, I am running this on Appache2, on the operating system Rasbian (latest version) being ran on a Raspberry Pi Model B
Thank you in advance
first your if else statement is wrong .
Second according to the error there is some problem in calling this function . Please check that too .
The problem is you're not writing your for loops correctly:
They should be written as:
for (var x = 0; x < 2; x++)
var xTurn = true;
var gameOver = false;
var numMoves = 0;
function squareclicked(square) {
// squareclicked is a function that is called whenever a button is clicked.
var status = document.getElementById('status');
var value = square.value;
if (gameOver) {
alert("The game is already over.");
return;
}
if (value != 'X' && value != 'O') {
if (xTurn) {
numMoves++;
square.value = 'X';
xTurn = false;
status.innerHTML = 'O\'s turn';
} else {
numMoves++;
square.value = 'O';
xTurn = true;
status.innerHTML = 'X\'s turn';
}
} else
alert('That square has already been played.');
var winner = checkWin();
if (!winner) {
//check to see if there is a tie
if (numMoves == 9)
status.innerHTML = 'Tie Game!';
} else
gameOver = true;
}
function newgame() {
var status = document.getElementById('status');
xTurn = true;
status.innerHTML = 'X\'s turn';
for (var x = 0; x < 2; x++) {
for (var y = 0; y < 2; y++) {
document.getElementById(x + '_' + y).value = ' ';
}
}
}
function checkWin() {
var status = document.getElementById('status');
var val0;
var val1;
var val2;
// check columns
for (var y = 0; y <2; y++) {
val0 = document.getElementById('0_' + y).value;
val1 = document.getElementById('1_' + y).value;
val2 = document.getElementById('2_' + y).value;
if (val0 == 'X' && val1 == 'X' && val2 == 'X') {
status.innerHTML = "X WINS!";
return true;
} else if (val0 == 'O' && val1 == 'O' && val2 == 'O') {
status.innerHTML = "O WINS!";
return true;
}
}
// check rows
for (var x = 0; x < 2; x++) {
val0 = document.getElementById(x + '_0').value;
val1 = document.getElementById(x + '_1').value;
val2 = document.getElementById(x + '_2').value;
if (val0 == 'X' && val1 == 'X' && val2 == 'X') {
status.innerHTML = "X WINS!";
return true;
} else if (val0 == 'O' && val1 == 'O' && val2 == 'O') {
status.innerHTML = "O WINS!";
return true;
}
}
// check top left to lower right diagonal
val0 = document.getElementById('0_0').value;
val1 = document.getElementById('1_1').value;
val2 = document.getElementById('2_2').value;
if (val0 == 'X' && val1 == 'X' && val2 == 'X') {
status.innerHTML = "X WINS!";
return true;
} else if (val0 == 'O' && val1 == 'O' && val2 == 'O') {
status.innerHTML = "O WINS!";
return true;
}
// check lower left to top right diagonal
val0 = document.getElementById('2_0').value;
val1 = document.getElementById('1_1').value;
val2 = document.getElementById('0_2').value;
if (val0 == 'X' && val1 == 'X' && val2 == 'X') {
status.innerHTML = "X WINS!";
return true;
} else if (val0 == 'O' && val1 == 'O' && val2 == 'O') {
status.innerHTML = "O WINS!";
return true;
}
// no winner yet return false;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1 style="text-align:center">Tic Tac Toe</h1>
<p style="text-align:center">Tic-tac-toe is a paper-and-pencil game for two players, X and O, who take turns marking the spaces in a 3×3 grid.</p>
<p style="text-align:center">The player who succeeds in placing three of their marks in a horizontal, vertical, or diagonal row wins the game.</p>
<p style="text-align:center">Now YOU can play the classic game, but with a twist... Your opponent... IS A COMPUTER!</p>
<INPUT TYPE="BUTTON" ID="NEWGAME" VALUE="New Game" ONCLICK="newgame();">
<INPUT TYPE="BUTTON" ID="0_0" VALUE=" " ONCLICK="squareclicked(this);">
<INPUT TYPE="BUTTON" ID="1_0" VALUE=" " ONCLICK="squareclicked(this);">
<INPUT TYPE="BUTTON" ID="2_0" VALUE=" " ONCLICK="squareclicked(this);">
<BR>
<INPUT TYPE="BUTTON" ID="0_1" VALUE=" " ONCLICK="squareclicked(this);">
<INPUT TYPE="BUTTON" ID="1_1" VALUE=" " ONCLICK="squareclicked(this);">
<INPUT TYPE="BUTTON" ID="2_1" VALUE=" " ONCLICK="squareclicked(this);">
<BR>
<INPUT TYPE="BUTTON" ID="0_2" VALUE=" " ONCLICK="squareclicked(this);">
<INPUT TYPE="BUTTON" ID="1_2" VALUE=" " ONCLICK="squareclicked(this);">
<INPUT TYPE="BUTTON" ID="2_2" VALUE=" " ONCLICK="squareclicked(this);">
<BR>
<INPUT TYPE="BUTTON" ID="0_0" VALUE="Click for a cookie" ONCLICK="alert('Cookie');">
<P ID="status">X's turn</P>
</body>
</html>
var winner = checkWin();
if (!winner) {
//check to see if there is a tie
if (numMoves == 9)
status.innerHTML = 'Tie Game!';
} else
gameOver = true;
}
You forgot the brackets around the inner if:
var winner = checkWin();
if (!winner) {
//check to see if there is a tie
if (numMoves == 9){
status.innerHTML = 'Tie Game!';
}
} else
gameOver = true;
}
Also, you have if...else...else which does not make sense:
if (value != 'X' && value != 'O') {
if (xTurn) {
numMoves++;
square.value = 'X';
xTurn = false;
status.innerHTML = 'O\'s turn';
} else {
numMoves++;
square.value = 'O';
xTurn = true;
status.innerHTML = 'X\'s turn';
} else
alert('That square has already been played.');
}
I think this is what you mean:
if (value != 'X' && value != 'O') {
if (xTurn) {
numMoves++;
square.value = 'X';
xTurn = false;
status.innerHTML = 'O\'s turn';
} else {
numMoves++;
square.value = 'O';
xTurn = true;
status.innerHTML = 'X\'s turn';
}
} else {
alert('That square has already been played.');
}
You are writing your for-loops wrong.
for (var x = 0; x < x++) {
for (var y = 0; y < y++) {
document.getElementById(x + '_' + y).value = ' ';
}
}
}
should be
for (var x = 0; x < <number>; x++) {
for (var y = 0; y < <number>; y++) {
document.getElementById(x+"_"+y).value=" ";
}
}
<!DOCTYPE html>
<html>
<head>
<title>Tic Tac Toe</title>
<SCRIPT TYPE="TEXT/JAVASCRIPT">
var xTurn = true;
var gameOver = false;
var numMoves = 0;
function squareclicked(square) {
// squareclicked is a function that is called whenever a button is clicked.
var status = document.getElementById('status');
var value = square.value;
if (gameOver) {
alert("The game is already over.");
return;
}
if (value != 'X' && value != 'O') {
if (xTurn) {
numMoves++;
square.value = 'X';
xTurn = false;
status.innerHTML = 'O\'s turn';
} else {
numMoves++;
square.value = 'O';
xTurn = true;
status.innerHTML = 'X\'s turn';
} else { // <=======================maybe?======================
alert('That square has already been played.');
}
var winner = checkWin();
if (!winner) {
//check to see if there is a tie
if (numMoves == 9)
status.innerHTML = 'Tie Game!';
} else
gameOver = true;
}
function newgame() {
var status = document.getElementById('status');
xTurn = true;
status.innerHTML = 'X\'s turn';
for (var x = 0; x < x++) {
for (var y = 0; y < y++) {
document.getElementById(x + '_' + y).value = ' ';
}
}
}
function checkWin() {
var status = document.getElementById('status');
var val0;
var val1;
var val2;
// check columns
for (var y = 0; y < y++) {
val0 = document.getElementById('0_' + y).value;
val1 = document.getElementById('1_' + y).value;
val2 = document.getElementById('2_' + y).value;
if (val0 == 'X' && val1 == 'X' && val2 == 'X') {
status.innerHTML = "X WINS!";
return true;
} else if (val0 == 'O' && val1 == 'O' && val2 == 'O') {
status.innerHTML = "O WINS!";
return true;
}
}
// check rows
for (var x = 0; x < x++) {
val0 = document.getElementById(x + '_0').value;
val1 = document.getElementById(x + '_1').value;
val2 = document.getElementById(x + '_2').value;
if (val0 == 'X' && val1 == 'X' && val2 == 'X') {
status.innerHTML = "X WINS!";
return true;
} else if (val0 == 'O' && val1 == 'O' && val2 == 'O') {
status.innerHTML = "O WINS!";
return true;
}
}
// check top left to lower right diagonal
val0 = document.getElementById('0_0').value;
val1 = document.getElementById('1_1').value;
val2 = document.getElementById('2_2').value;
if (val0 == 'X' && val1 == 'X' && val2 == 'X') {
status.innerHTML = "X WINS!";
return true;
} else if (val0 == 'O' && val1 == 'O' && val2 == 'O') {
status.innerHTML = "O WINS!";
return true;
}
// check lower left to top right diagonal
val0 = document.getElementById('2_0').value;
val1 = document.getElementById('1_1').value;
val2 = document.getElementById('0_2').value;
if (val0 == 'X' && val1 == 'X' && val2 == 'X') {
status.innerHTML = "X WINS!";
return true;
} else if (val0 == 'O' && val1 == 'O' && val2 == 'O') {
status.innerHTML = "O WINS!";
return true;
}
// no winner yet return false;
}
</script>
</head>
<body>
<h1 style="text-align:center">Tic Tac Toe</h1>
<p style="text-align:center">Tic-tac-toe is a paper-and-pencil game for two players, X and O, who take turns marking the spaces in a 3×3 grid.</p>
<p style="text-align:center">The player who succeeds in placing three of their marks in a horizontal, vertical, or diagonal row wins the game.</p>
<p style="text-align:center">Now YOU can play the classic game, but with a twist... Your opponent... IS A COMPUTER!</p>
<INPUT TYPE="BUTTON" ID="NEWGAME" VALUE="New Game" ONCLICK="newgame();">
<INPUT TYPE="BUTTON" ID="0_0" VALUE=" " ONCLICK="squareclicked(this);">
<INPUT TYPE="BUTTON" ID="1_0" VALUE=" " ONCLICK="squareclicked(this);">
<INPUT TYPE="BUTTON" ID="2_0" VALUE=" " ONCLICK="squareclicked(this);">
<BR>
<INPUT TYPE="BUTTON" ID="0_1" VALUE=" " ONCLICK="squareclicked(this);">
<INPUT TYPE="BUTTON" ID="1_1" VALUE=" " ONCLICK="squareclicked(this);">
<INPUT TYPE="BUTTON" ID="2_1" VALUE=" " ONCLICK="squareclicked(this);">
<BR>
<INPUT TYPE="BUTTON" ID="0_2" VALUE=" " ONCLICK="squareclicked(this);">
<INPUT TYPE="BUTTON" ID="1_2" VALUE=" " ONCLICK="squareclicked(this);">
<INPUT TYPE="BUTTON" ID="2_2" VALUE=" " ONCLICK="squareclicked(this);">
<BR>
<INPUT TYPE="BUTTON" ID="0_0" VALUE="Click for a cookie" ONCLICK="alert('Cookie');">
<P ID="status">X's turn</P>
</body>
</html>
Related
I'm making a puzzle game where the user uses WASD to move a character up, left, down, right respectively. It works fine at the moment but I was wondering if there was a way to break the code down into more intuitive functions. Below is my code:
function move(e)
{
for (var y = 0; y < mapHeight; y++) {
for (var x = 0; x < mapWidth; x++) {
if (map[y][x] == "#" || map[y][x] == "+") {
break;
}
}
if (map[y][x] == "#" || map[y][x] == "+") {
break;
}
}
var player_x = x;
var player_y = y;
if (e.key == 'w') {
var player_new_x = player_x;
var player_new_y = player_y - 1;
if (moveBox(player_new_x, player_new_y, "up") === false) {
return;
}
if (map[player_new_y][player_new_x] == " " ||
map[player_new_y][player_new_x] == ".") {
if (map[player_new_y][player_new_x] == " ") {
map[player_new_y][player_new_x] = "#";
} else if (map[player_new_y][player_new_x] == ".") {
map[player_new_y][player_new_x] = "+";
}
if (map[player_y][player_x] == "#") {
map[player_y][player_x] = " ";
} else if (map[player_y][player_x] == "+") {
map[player_y][player_x] = ".";
}
}
} else if (e.key == 's') {
var player_new_x = player_x;
var player_new_y = player_y + 1;
if (moveBox(player_new_x, player_new_y, "down") === false) {
return;
}
if (map[player_new_y][player_new_x] == " " ||
map[player_new_y][player_new_x] == ".") {
if (map[player_new_y][player_new_x] == " ") {
map[player_new_y][player_new_x] = "#";
} else if (map[player_new_y][player_new_x] == ".") {
map[player_new_y][player_new_x] = "+";
}
if (map[player_y][player_x] == "#") {
map[player_y][player_x] = " ";
} else if (map[player_y][player_x] == "+") {
map[player_y][player_x] = ".";
}
}
} else if (e.key == 'a') {
var player_new_x = player_x - 1;
var player_new_y = player_y;
if (moveBox(player_new_x, player_new_y, "left") === false) {
return;
}
if (map[player_new_y][player_new_x] == " " ||
map[player_new_y][player_new_x] == ".") {
if (map[player_new_y][player_new_x] == " ") {
map[player_new_y][player_new_x] = "#";
} else if (map[player_new_y][player_new_x] == ".") {
map[player_new_y][player_new_x] = "+";
}
if (map[player_y][player_x] == "#") {
map[player_y][player_x] = " ";
} else if (map[player_y][player_x] == "+") {
map[player_y][player_x] = ".";
}
}
} else if (e.key == 'd') {
var player_new_x = player_x + 1;
var player_new_y = player_y;
if (moveBox(player_new_x, player_new_y, "right") === false) {
return;
}
if (map[player_new_y][player_new_x] == " " ||
map[player_new_y][player_new_x] == ".") {
if (map[player_new_y][player_new_x] == " ") {
map[player_new_y][player_new_x] = "#";
} else if (map[player_new_y][player_new_x] == ".") {
map[player_new_y][player_new_x] = "+";
}
if (map[player_y][player_x] == "#") {
map[player_y][player_x] = " ";
} else if (map[player_y][player_x] == "+") {
map[player_y][player_x] = ".";
}
}
} else {
return;
}
render();
}
Is it possible to make four functions, one for each of the movement keys? Any help would be much appreciated
Yes
It´s possible to do what you want, 4 different functions
But ... you should intercept the events keydown (when the user presses the key) and keyup (when the user releases the key)
As long as the key is "pressed" you do the movement
You can create an object like this
let move = { moveH : 0 , moveV :0 }
When the keydown event is detected for "a" -> {moveH : -1, moveV :0}
"s" -> { moveH :0 , moveV :1 }
"w" -> { moveH :0 , moveV :-1 }
"d" -> { moveH :1 , moveV :0 }
When the keyup event is detected .. for any key -> {moveH :0 , moveV:0 }
Meanwhile
apply the move to the object on the screen
something like
stuff.position = { x : stuff.position.x + move.moveH , y: stuff.position.y + move.moveV }
when checking one of the language,degree or car options and fill out their corresponding inputs the form gets gets stuck on the Cage() function(it displays the message but doesnt progress further) and I dont know why any clues?I also find out by removing the upper functions (Cemail,Cuser,Checkpassword) one by one that they all get stuck and don't let the button get enabled.Is it because too many boolean functions are in the enableMe() if?
I am a student and still learning so, sorry for the headache in advance.
function Cuser() {
var Us = document.getElementById("User").value;
if (Us.length < 7 || Us.length > 15) {
l1.innerHTML = "The username must be at least 7 characters and up to 15";
return false;
}
else if (Us == "" || Us == " " || Us == " " || Us == " " || Us == null) {
l1.innerHTML = "The username must be filled with at least 7 characters";
return false;
}
else {
l1.innerHTML = "Username is Valid";
return true
}
}
function Cemail() {
var Em = document.getElementById("mail").value;
var patt = /^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if (Em == "" || Em == " " || Em == " " || Em == " " || Em == null) {
l1.innerHTML = "Please fill out the email";
return false;
}
else if (!patt.test(Em)) {
l1.innerHTML = "Please fill out the email correctly";
return false;
}
else {
l1.innerHTML = "email is valid";
return true;
}
}
function CheckPassword() {
var p = document.getElementById("pass1").value;
var p1 = document.getElementById("pass2").value;
var pattent = /[A-Z]/;
if (p == "" || p == " " || p == " " || p == " " || p == null) {
l1.innerHTML = "The password must be filled with at least 6 characters";
return false;
}
else if (p.length < 6 || p1.length > 12) {
l1.innerHTML = "Password min chars:6 Max chars:12";
return false;
}
else if (!p.match(pattent)) {
l1.innerHTML = "please include at least one capital letter"
return false;
}
else if (p1 != p) {
l1.innerHTML = "Passwords must be identical.";
return false;
}
else {
l1.innerHTML = "password is valid";
return true;
}
}
function checkPasswordStrenght() {
var x = document.getElementById("pass1").value;
if (x.length == 6) {
document.getElementById("strenght").value = "0";
}
if (x.length == 7) {
document.getElementById("strenght").value = "15";
}
if (x.length == 8) {
document.getElementById("strenght").value = "30";
}
if (x.length == 9) {
document.getElementById("strenght").value = "45";
}
if (x.length == 10) {
document.getElementById("strenght").value = "65";
}
if (x.length == 11) {
document.getElementById("strenght").value = "80";
}
if (x.length == 12) {
document.getElementById("strenght").value = "100";
}
}
function Cage() {
var Ag = document.getElementById("Age").value;
if (isNaN(Ag) == true || Ag == " " || Ag == "" || Ag == " ") {
l1.innerHTML = "Age must be a number.";
return false;
}
else if (Ag < 18) {
l1.innerHTML = "You must be an Adult to use this form";
return false;
}
else {
l1.innerHTML = "Age is valid";
return true;
}
}
function DisableMe() {
document.getElementById("butt").disabled = true;
}
function myCar() {
var checkBox = document.getElementById("myCheck");
var text = document.getElementById("text");
if (checkBox.checked == true) {
text.style.display = "block";
} else {
text.style.display = "none";
}
}
function myDegree() {
var checkBox = document.getElementById("myDeg");
var text = document.getElementById("Ddeg");
if (checkBox.checked == true) {
text.style.display = "block";
} else {
text.style.display = "none";
}
}
function myLangu() {
var checkBox = document.getElementById("myLang");
var text = document.getElementById("Llang");
if (checkBox.checked == true) {
text.style.display = "block";
} else {
text.style.display = "none";
}
}
function Checker() {
if (document.getElementById("GF").checked == false && document.getElementById("GM").checked == false) {
l1.innerHTML = "Please select your gender";
return false;
}
else {
return true;
}
}
function CChecker() {
var Cheddar = document.getElementById("myCheck").checked;
var Ham = document.getElementById("TypeOfCar").value;
if (Cheddar == true) {
if (Ham == "" || Ham == " " || Ham == " " || Ham == " " || Ham == null) {
l1.innerHTML = "Please Fill in the type of car you own";
}
}
else {
return true;
}
}
function LChecker() {
var Lettuce = document.getElementById("myLang").checked;
var Tomato = document.getElementById("TypeOfLang").value;
if (Lettuce == true) {
if (Tomato == "" || Tomato == " " || Tomato == " " || Tomato == " " || Tomato == null) {
l1.innerHTML = "Please Fill in at least one foreign language that you know";
}
}
else {
return true;
}
}
function DChecker() {
var Bread = document.getElementById("myDeg").checked;
var Mayo = document.getElementById("TypeOfDeg").value;
if (Bread == true) {
if (Mayo == "" || Mayo == " " || Mayo == " " || Mayo == " " || Mayo == null) {
l1.innerHTML = "Please Fill in at least one degree you own";
}
}
else {
return true;
}
}
function enableMe() {
if (Cuser() && Cemail && CheckPassword && Cage() && Checker() && CChecker() && LChecker() && DChecker()) {
document.getElementById("butt").disabled = false;
l1.innerHTML = "All credentials are valid";
return true;
}
else {
document.getElementById("butt").disabled = true;
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<meta name="description" content="Form signup and php">
<meta name="keywords" content="Signup,html,php,react">
<meta name="author" content="Filippos Karagiannis">
<link href="StyleSheet.css" rel="stylesheet" />
<title>Exclusive Signup</title>
<script src="JavaScript.js"></script>
</head>
<body style="background-color:powderblue; text-align:center;" onload="DisableMe()">
<center>
<form action="react.html" display: inline - block;">
<fieldset class="center" style="width:50%; font-size:x-large; color:#383838;font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif">
<legend><b>Sign up form</b></legend>
<p>
<input type="text" id="User" name="Username" onchange="return Cuser()" placeholder="Type Username" />
</p>
<p>
<input type="email" id="mail" name="Email" onchange="return Cemail()" placeholder="e-Mail" />
</p>
<p>
<input type="password" id="pass1" name="Pass1"
placeholder="Password" onkeyup="checkPasswordStrenght(pass1), CheckPassword()" />
<input type="password" id="pass2" name="Pass2"
placeholder="Confirm Password" />
</p>
<div class="Strng">Password strenght:</div> <progress max="100" value="0" id="strenght" style="width:230px"></progress>
<p> <input type="text" id="Age" onchange="return Cage()" name="Age" placeholder="Type Age" /> </p>
<div class="Strng">
Male<input type="radio" id="GM" name="gender" value="male">
<input type="radio" id="GF" name="gender" value="female"> Female
</div>
<div class=" Strng">Do you own a car?<input type="checkbox" id="myCheck" onclick="myCar()"></div>
<div id="text" style="display:none"><input type="text" id="TypeOfCar" placeholder="Please inlcude the type of car" /></div>
<div class=" Strng">Do you know any other Languages<input type="checkbox" id="myLang" onclick="myLangu()"></div>
<div id="Llang" style="display:none"><input type="text" id="TypeOfLang" placeholder="Please inlcude the Languages" /></div>
<div class=" Strng">Do you own any postgraduate degrees<input type="checkbox" id="myDeg" onclick="myDegree()"></div>
<div id="Ddeg" style="display:none"><input type="text" id="TypeOfDeg" placeholder="Please inlcude the type of Degrees" /></div>
<p><div onmouseover="return enableMe()">Click Bellow to register your credentials</div></p>
<div onmouseover="return enableMe()">
<input class="button" id="butt" type="submit" value="Register">
</div>
<label class="Labbel" id="l1"></label>
</fieldset>
</form>
</center>
</body>
</html>
As well as some syntax errors Burham mentions in the comments.
Why the button won't enable is due to your CChecker(), LChecker() and DChecker() functions, you never return true if one is selected and a value is filled.
Example of where to add return (view comment, add to other functions in same place):
function CChecker() {
var Cheddar = document.getElementById("myCheck").checked;
var Ham = document.getElementById("TypeOfCar").value;
if (Cheddar == true) {
if (Ham == "" || Ham == " " || Ham == " " || Ham == " " || Ham == null) {
l1.innerHTML = "Please Fill in the type of car you own";
}
// else return true
else {
return true;
}
}
else {
return true;
}
}
Ok so my code is below. Once the calculate price button is clicked, I want it to display the results beneath the button. ie. number of cars = CarNumber, type of car = CarType and the price of the car = CarPrice. I know this is probably super easy to do but I just cant get it to work.
HTML:
<!DOCTYPE html>
<html>
<body>
<form name="Cars">
<h1>Car Sales</h1>
<p>Which type of car would you like (A, B or C)</p>
<input type="text" name="CarType"><br>
<p>how many cars would you like (1-100)</p>
<input type="text" name="CarNumber"><br>
<br>
<button onclick="return beginfunction()">Calculate Price</button>
<p id="message"></p>
<script src="car.js"> </script>
</form>
</body>
</font>
JavaScript:
function beginfunction() {
var CarType = document.forms["Cars"]["CarType"].value;
var CarNumber = document.forms["Cars"]["CarNumber"].value;
var CarPrice;
if ( !( CarType == 'A' || CarType == 'B' || CarType == 'C' ) ) {
CarTypeError = "Invalid Car Type";
document.getElementById("message").innerHTML = CarTypeError;
return false;
}
{
if (isNaN(CarNumber)) {
CarNumberError = "Invalid Quantity Entered";
document.getElementById('message').innerHTML = CarNumberError;
return false;
}
}
{
if (CarNumber >0 && CarNumber <10)
{
}
else
CarError = "Invalid";
document.getElementById('message').innerHTML = CarError;
return false;
}
{
if (CarType == 'A') {
CarPrice = 30;
} else if (CarType == 'B') {
CarPrice = 20;
} else if (CarType == 'C'){
CarPrice = 10;
}
}
}
The way that you use innerHTML is right, but there is some logic problems in your function, here is the refactored code:
function beginfunction() {
var CarType = document.forms["Cars"]["CarType"].value;
var CarNumber = document.forms["Cars"]["CarNumber"].value;
var CarPrice;
var message = "";
if ( !( CarType == 'A' || CarType == 'B' || CarType == 'C' ) ) {
message = "Invalid Car Type";
}else{
if (CarType == 'A') {
CarPrice = 30;
} else if (CarType == 'B') {
CarPrice = 20;
} else if (CarType == 'C'){
CarPrice = 10;
}
message = CarPrice;
}
if (isNaN(CarNumber)) {
message = "Invalid Quantity Entered";
}
if (CarNumber >0 && CarNumber <10)
{
}
else{
message = "Invalid";
}
document.getElementById('message').innerHTML = message;
return false;
}
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");
}
}
})
})();
Im having some trouble with a javascript code for a tic tac toe webpage. Whenever I make a move this error occurs in the console:
Uncaught TypeError: string is not a function
Here is my webpage's link :
http://www.cgscomputing.com/36558/test.html
And here is the code:
<h1>Tic Tac Toe</h1>
<table>
<tr>
<td id = "spot1"></td>
<td id = "spot2"></td>
<td id = "spot3"></td>
</tr>
<tr>
<td id = "spot4"></td>
<td id = "spot5"></td>
<td id = "spot6"></td>
</tr>
<tr>
<td id = "spot7"></td>
<td id = "spot8"></td>
<td id = "spot9"></td>
</tr>
</table>
<!---Contains the message telling which players' turn it currently is-->
<p id = "footer"></p>
<script type = "text/javascript">
//select a random number to decide which player goes first
var randNum = Math.floor((Math.random() * 2));
//list which contains what is printed to the document concerning the turn
var beginTurn = ["Computer's ", "Your "];
var turn = beginTurn[randNum];
//print who's turn it is underneath the board
var footer = document.getElementById("footer");
footer.innerHTML = turn + " turn";
//array containing all the possible combinations through which a player can win the game
var possibleCombinations = [[2, 5, 8], [3, 5, 7], [6, 5, 4], [9, 5, 1], [1, 2, 3], [7, 8, 9], [1, 4, 7], [3, 6, 9]];
//through the game, keeps track if there is a winner or not
var won = false;
//when true, the player will not be able to place another marker on the board, and will have to wait for the computer to put in a marker first
var computerTurn = false;
//function for the computer to find a spot to place its marker in the board
function findLocation() {
for (var n = 0; n < 8; n++) {
//The computer first checks if it can win by placing one more insertMarker on the board
if ((document.getElementById("spot" + possibleCombinations[n][0]).innerHTML == "O") && (document.getElementById("spot" + possibleCombinations[n][1]).innerHTML == "O") && (document.getElementById("spot" + possibleCombinations[n][2]).innerHTML == "")) {
return possibleCombinations[n][2];
break;
}
else if ((document.getElementById("spot" + possibleCombinations[n][0]).innerHTML == "O") && (document.getElementById("spot" + possibleCombinations[n][1]).innerHTML == "") && (document.getElementById("spot" + possibleCombinations[n][2]).innerHTML == "O")) {
return possibleCombinations[n][1];
break;
}
else if ((document.getElementById("spot" + possibleCombinations[n][0]).innerHTML == "") && (document.getElementById("spot" + possibleCombinations[n][1]).innerHTML == "O") && (document.getElementById("spot" + possibleCombinations[n][2]).innerHTML == "O")) {
return possibleCombinations[n][0];
break;
}
//If the computer cannot win, it checks if it can block the human player
else if ((document.getElementById("spot" + possibleCombinations[n][0]).innerHTML == "X") && (document.getElementById("spot" + possibleCombinations[n][1]).innerHTML == "X") && (document.getElementById("spot" + possibleCombinations[n][2]).innerHTML == "")) {
return possibleCombinations[n][2];
break;
}
else if ((document.getElementById("spot" + possibleCombinations[n][0]).innerHTML == "X") && (document.getElementById("spot" + possibleCombinations[n][1]).innerHTML == "") && (document.getElementById("spot" + possibleCombinations[n][2]).innerHTML == "X")) {
return possibleCombinations[n][1];
break;
}
else if ((document.getElementById("spot" + possibleCombinations[n][0]).innerHTML == "") && (document.getElementById("spot" + possibleCombinations[n][1]).innerHTML == "X") && (document.getElementById("spot" + possibleCombinations[n][2]).innerHTML == "X")) {
return possibleCombinations[n][0];
break;
}
}
//=======
//If it cannot Win or Block, the compter chooses a random spot on the board to place a insertMarker on.
//An empty array to contain all the avaliable spots on the board
avaliableSpots = [];
//The for loop adds all the avaliable spots from the board into the array
for (var i = 1; i <= 9; i++) {
var spot = "spot" + i;
if (document.getElementById(spot).innerHTML == "") {
avaliableSpots.push(i);
}
}
//A random number is generated and it is used to find a spot on the board from the avaliable spots contained in the array
var randomSpot = Math.floor((Math.random() * (avaliableSpots.length)));
return avaliableSpots[randomSpot];
}
//this function places the marker of the player and the computer on the board
function insertMarker(insertMarker, spot) {
if (won == false) {
if (document.getElementById("spot" + spot).innerHTML == "") {
if (insertMarker == "X" && computerTurn == false) {
document.getElementById("spot" + spot).innerHTML = insertMarker;
footer.innerHTML = "Computer's turn";
turn = "Computer's ";
computerTurn = true;
//Sets a delay of 1 second before the computer places its marker
setTimeout(function(){
insertMarker("O", findLocation());
}, 1000);
} else if (insertMarker == "O") {
document.getElementById("spot" + spot).innerHTML = insertMarker;
computerTurn = false;
footer.innerHTML = "Your turn";
humanturn();
}
winner();
}
}
}
//Function for the human player's turn. When the player selects a spot on the board, the insertMarker function is called, with the parameters X and the number of the spot.
function humanturn() {
//when the human player clicks on an empty spot, the insertMarker function is called with the parameters "x" and the number of the box
document.getElementById("spot1").onclick = function() {insertMarker("X", 1)};
document.getElementById("spot2").onclick = function() {insertMarker("X", 2)};
document.getElementById("spot3").onclick = function() {insertMarker("X", 3)};
document.getElementById("spot4").onclick = function() {insertMarker("X", 4)};
document.getElementById("spot5").onclick = function() {insertMarker("X", 5)};
document.getElementById("spot6").onclick = function() {insertMarker("X", 6)};
document.getElementById("spot7").onclick = function() {insertMarker("X", 7)};
document.getElementById("spot8").onclick = function() {insertMarker("X", 8)};
document.getElementById("spot9").onclick = function() {insertMarker("X", 9)};
}
//This functions checks if there is a winner
function winner() {
for (var i = 0; i < 8; i++) {
if ((document.getElementById("spot" + possibleCombinations[i][0]).innerHTML == "O") && (document.getElementById("spot" + possibleCombinations[i][1]).innerHTML == "O") && (document.getElementById("spot" + possibleCombinations[i][2]).innerHTML == "O")) {
footer.innerHTML = "COMPUTER WINS";
footer.style.color = "red";
document.getElementById("spot" + possibleCombinations[i][0]).style.backgroundColor = "yellow";
document.getElementById("spot" + possibleCombinations[i][1]).style.backgroundColor = "yellow";
document.getElementById("spot" + possibleCombinations[i][2]).style.backgroundColor = "yellow";
won = true;
break;
}
else if ((document.getElementById("spot" + possibleCombinations[i][0]).innerHTML == "X") && (document.getElementById("spot" + possibleCombinations[i][1]).innerHTML == "X") && (document.getElementById("spot" + possibleCombinations[i][2]).innerHTML == "X")) {
footer.innerHTML = "PLAYER WINS";
footer.style.color = "red";
document.getElementById("spot" + possibleCombinations[i][0]).style.backgroundColor = "yellow";
document.getElementById("spot" + possibleCombinations[i][1]).style.backgroundColor = "yellow";
document.getElementById("spot" + possibleCombinations[i][2]).style.backgroundColor = "yellow";
won = true;
break;
}
}
}
//If it is the computer's turn, the computer places a insertMarker using the insertMarker function
if (turn == "Computer's ") {
document.getElementById("footer").innerHTML = "Computer's turn";
insertMarker("O", findLocation());
turn = "Your ";
}
//If it is the human player's turn, the player places a insertMarker using the insertMarker function
else if (turn == "Your ") {
document.getElementById("footer").innerHTML = "Your turn";
humanturn();
turn = "Computer's ";
}
</script>
</body>
Any help will be much appreciated.
You've called the method the same name as a parameter, so when you make the recursive call you're calling the parameter which is either "O" or "X" - not the function. Rename one of them and it should resolve this problem
EDIT: should have said which method. it's 'insertMarker'