jquery Image Puzzle - javascript

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");
}
}
})
})();

Related

How to combine two filters

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/

Javascript error while trying to call a function

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>

Pass multiple input values to a function to update an image

I want to change an image depending on what two input values have been entered. How would this be done dynamically with two separate inputs? Here's my code so far.
function twoinputs() {
var size1 = document.getElementById("size1").value;
var size2 = document.getElementById("size2").value;
var getValue = size1.value;
var getValue2 = size2.value;
if (getValue == "1" && getValue2 == "1") {
document.getElementById('optimus').style.backgroundImage = "url('http://www.orderofinterbeing.org/wp-content/uploads/2014/04/light-forest.jpg')";
} else if (getValue == "2" && getValue2 == "2") {
document.getElementById('optimus').style.backgroundImage = "url('http://freebigpictures.com/wp-content/uploads/2009/09/coniferous-forest.jpg')";
}
}
twoselects();
p {
width: 100%;
height: 200px;
}
<img class="prime" src="images/image_small.jpg">
<form>
Select image size:
<input id='size1' name='size1' onchange="twoinputs()">
<input id='size2' name='size2' onchange="twoinputs()">
</form>
<p id="optimus"></p>
First of all, inputs are self closing, so change the HTML to
<img class="prime" src="https://pbs.twimg.com/profile_images/604644048/sign051.gif">
<form>
Select image size:
<input id='size1' name='size1'>
<input id='size2' name='size2'>
</form>
<p id="optimus"></p>
In the script, the problem is that you're getting the value twice, and you've mixed up the names of the function and some variables.
You could also use proper event handlers
var elem1 = document.getElementById("size1");
var elem2 = document.getElementById("size2");
var image = document.getElementById('optimus');
function twoinputs() {
var size1 = +elem1.value;
var size2 = +elem2.value;
if (size1 === 1 && size2 === 1) {
image.style.backgroundImage = "url('http://www.orderofinterbeing.org/wp-content/uploads/2014/04/light-forest.jpg')";
} else if (size1 == 2 && size2 == 2) {
image.style.backgroundImage = "url('http://freebigpictures.com/wp-content/uploads/2009/09/coniferous-forest.jpg')";
}
}
twoinputs();
elem1.addEventListener('change', twoinputs, false);
elem2.addEventListener('change', twoinputs, false);
FIDDLE
Looks ok, but you have .value twice so size1.value will not have the attribute value, in other words:
function twoinputs() {
var size1 = document.getElementById("size1");
var size2 = document.getElementById("size2");
var getValue = size1.value;
var getValue2 = size2.value;**
if (getValue == "1" && getValue2 == "1") {
document.getElementById('optimus').style.backgroundImage = "url('http://www.orderofinterbeing.org/wp-content/uploads/2014/04/light-forest.jpg')";
} else if (getValue == "2" && getValue2 == "2") {
document.getElementById('optimus').style.backgroundImage = "url('http://freebigpictures.com/wp-content/uploads/2009/09/coniferous-forest.jpg')";
}
}
twoselects();

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
}

jQuery receiving value from a text field

My HTML :
<div class="textForm">
<input type="radio" name="txtNumber" value="10" checked="checked" />10
<input type="radio" name="txtNumber" value="20" />20
<input type="radio" name="txtNumber" value="other" />other
<input type="text" name="other_field" id="other_field" onblur="checktext(this);"/>
</div>
<div class="formText">
<input type="radio" name="txtSpace" value="RJ" checked="checked"
/>Space 1.
<br />
<input type="radio" name="txtSpace" value="SM" />Space 2.
<br />
</div>
<h3>Output:</h3>
<div id="output"></div>
This is my javascript code
$(document).ready(function ()
{
$("input[name='txtNumber'],input[name='txtSpace']").change(function ()
{
console.log("changed");
if ($("input[name='txtSpace']:checked").val() == 'RJ' && $("input[name='txtNumber']:checked").val() == '10')
$("#output").text("RJ, 10 = 20");
else if ($("input[name='txtSpace']:checked").val() == 'RJ' && $("input[name='txtNumber']:checked").val() == '20')
$("#output").text("RJ, 20 = 40");
else if ($("input[name='txtSpace']:checked").val() == 'RJ' && $("input[name='txtNumber']:checked").val() == 'other') // HERE I M CONFUSED
WHAT SHALL BE THE CODE?
else if ($("input[name='txtSpace']:checked").val() == 'SM' && $("input[name='txtNumber']:checked").val() == '10')
$("#output").text("SM, 10 = 5");
else if ($("input[name='txtSpace']:checked").val() == 'SM' && $("input[name='txtNumber']:checked").val() == '20')
$("#output").text("SM, 20 = 10");
else if ($("input[name='txtSpace']:checked").val() == 'SM' && $("input[name='txtNumber']:checked").val() == 'other') // HERE AGAIN I M CONFUSED
$("#output").text("SM , ???? = Dont know");
});
});
What I'm trying to achieve is to open up the "other_fields" on clicking the "other" radio button the "other_field". Now, I want to use the value from "other_field" (i.e. the user input) and use those numbers in my calculation.
You can get the value of the other_field by using
var textVal = $('#other_field').val();
console.log(textVal)
You can use $("#other_field").val() to select the value of the other input field.
else if ($("input[name='txtSpace']:checked").val() == 'RJ' &&
$("input[name='txtNumber']:checked").val() == 'other') {
var val = parseInt($("#other_field").val(), 10);
$("#output").text("RJ , " + val " = " + (val * 2));
}
...
else if ($("input[name='txtSpace']:checked").val() == 'SM' &&
$("input[name='txtNumber']:checked").val() == 'other') {
var val = parseInt($("#other_field").val(), 10);
$("#output").text("SM , " + val " = " + (val / 2));
}

Categories