I am new to programming as to stack overflow so be easy on me. i am making an tic tac toe game and haven't found a to mark a random_cell and append and image to it so if you could help it will be of most help. jquery are also welcome
var x_or_o = ["x","o"];
var user = x_or_o[Math.floor(Math.random()*x_or_o.length)];
function random_cell(){
var cells = ["zero","one","two"];
return ("#"+cell[Math.floor(Math.random()*cells.length)]+"_"+cell[Math.floor(Math.random()*cells.length)]);
}
function clink(id_ele){
$(id_ele).one(("click",water(id_ele)));
}
function water(id_ele){
$(id_ele).click(function(){
if (user == "x"){
$(id_ele).append("<img src =img/x.png>").addClass("done-x");
if (! random_cell.hasClass()){
$(random_cell).append("<img src =img/o.png>");
}
else{
random_cell();
water(id_ele);
}
}
else if (user == "o"){
$(id_ele).append("<img src =img/o.png>").addClass("done-o");
}
}
)
}
clink("#zero_zero");
clink("#zero_one");
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tic Tac Toe</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<h1>TIC TAC TOE</h1>
</header>
<section>
<table>
<tr>
<td id = "zero_zero"></td>
<td id = "one_zero"></td>
<td id = "two_zero"></td>
</tr>
<tr>
<td id = "zero_one"></td>
<td id = "one_one"></td>
<td id = "one_two"></td>
</tr>
<tr>
<td id = "two_zero"></td>
<td id = "two_one"></td>
<td id = "two_two"></td>
</tr>
</table>
</section>
<footer>
<p>© Kunal Mehta 2016</p>
<img src="img/facebook.png" alt="">
<img src="img/twitter.png" alt="">
</footer>
<script src="js/jquery.js"></script>
<script src="js/main.js"></script>
</body>
</html>
You can simply use Math.random() to create numbers and then build a little translation for your ids, as you did. But note that your current ids makes no sense. They're inconsistent. I've changed them a bit to be usefull.
Also note, that your array in random_cell is called cells, but in your random creation you uses cell. This will not work too.
function random_cell() {
var cells = ["zero","one","two"];
var length = cells.length;
return ("#" + cells[Math.floor(Math.random()*length)] +
"_" + cells[Math.floor(Math.random()*length)]);
}
setInterval(function() {
var id = random_cell();
$("td").removeClass("highlight");
$(id).addClass("highlight")
}, 500);
.highlight {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td id="zero_zero">1</td>
<td id="one_zero">2</td>
<td id="two_zero">3</td>
</tr>
<tr>
<td id="zero_one">4</td>
<td id="one_one">5</td>
<td id="two_one">6</td>
</tr>
<tr>
<td id="zero_two">7</td>
<td id="one_two">8</td>
<td id="two_two">9</td>
</tr>
</table>
Your random_cell function does the following:
return ("onecell");
Thats wrong syntax. Do:
return "onecell";
The next mistake:
$(random_cell).append(...);
Random_cell is not a Variable !!! Its a function. Do:
$( random_cell() ).append(...);
Mistake No.3:
The clink function adds an eventlistener that adds an eventlistener. So you have to click it twice to make it work...
Mistake No.4
<img src=img.jpg >
Thats wrong HTML. Do:
<img src='img.jpg'>
Related
How can I simplify and consolidate these two click functions into one, and make it scalable for future table row classes? My code works, but it's not very scalable.
See Fiddle: https://jsfiddle.net/49hvfdje/10/
<!DOCTYPE html>
<html>
<head>
<style> .hidden { display: none; } </style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a.click.a').click(function() {
$('tr.a').toggleClass('hidden'); // toggleClass for A rows
return false;
});
$('a.click.b').click(function() {
$('tr.b').toggleClass('hidden'); // toggleClass for B rows
return false;
});
});
</script>
</head>
<body>
<table>
<tbody>
<tr><td><a class='click a'>Toggle A Rows</a></td></tr>
<tr class='hidden a'><td>Text</td></tr>
<tr class='hidden a'><td>Text</td></tr>
<tr class='hidden a'><td>Text</td></tr>
<tr><td><a class='click b'>Toggle B Rows</a></td></tr>
<tr class='hidden b'><td>Text</td></tr>
<tr class='hidden b'><td>Text</td></tr>
<tr class='hidden b'><td>Text</td></tr>
</tbody>
</table>
</body>
</html>
Not sure why the code is not working. The javascript is not printing the alert box nor preventing the event default. I was under the assumption that the data would load asynchronously keeping me on the same page.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div data-role="page">
<div data-role="header"></div>
<div data-role="content">
<p id = "heading">Is Nursing For You?</p>
<br/>
<div id = "div1" align="center"></div>
</div>
<div data-role="footer" id = "foot" data-position="fixed">
<table>
<tr>
<th><h1 id = "alignLeft">Future Goals</th></h1>
<th><h1 id = "socialMediaText alignCenter">Get Social With Us!</h1>
</th>
<th></th>
</tr>
<tr>
<td id = "alignLeft">Telephone: 304-444-39876</td>
<tr>
<td = "alignLeft">Email: futurenurseky#gmail.com</td>
</tr>
</tr>
</table>
</div>
</div>
This is where im having the trouble at. Not sure why the alert is not sending or redirecting me.
<script type='text/javascript'>
$(document).ready(function(){
$("#div1").load("FONWVhp.php");
$('#div1').click(function(e){
e.preventDefault();
alert($(this).attr('href'));
});
});
</script>
</body>
</html>
This is the Fp.php which is called when the page is loaded but once the page is loaded there are href's that are displayed. so when the person clicks the href the page will stay but the data will change and get the info coming from articles.php (at the bottom).
$sqlPAQuery = "SELECT pages.pageId, pages.pageTitle FROM pages order by
pages.pageId";
$paqueryResult = mysqli_query($conn,$sqlPAQuery);
while ($paqueryRow = mysqli_fetch_object($paqueryResult))
{
$pages = "<div class='center-wrapper'><a href = articles.php?
pageId=".$paqueryRow->pageId."><button class= center-wrapper'>".$paqueryRow-
>pageTitle."</button></a><br/><br/></div>";
echo $pages;
}
articles.php
$sqlARTICLEQuery = "SELECT * FROM articles where pageId=".$_GET['pageId']."
order by articleId";
$articlequeryResult = mysqli_query($conn,$sqlARTICLEQuery);
while ($articlequeryRow = mysqli_fetch_object($articlequeryResult))
{
$articles ="<div id = 'div1' class='center-wrapper'><a href =
article.php?articleId=".$articlequeryRow->articleId."><button id
='wrapper'>".$articlequeryRow->articleTitle."</button></a><br/><br/></div>";
echo $articles;
}
You need to wait for the div contents to load before manipulating it. Try this:
$(document).ready(function() {
$("#div1").load('FONWVhp.php', function() {
$('#div1 div.center-wrapper a button').click(function(event){
event.preventDefault();
alert($(this).parent().attr('href'));
});
});
});
Also, I've corrected some mistakes in your code:
Instead of $('#div1').click(...) use $('#div1 div.center-wrapper a button').click(...).
I suppose you want the anchor's href, so you need to use alert($(this).parent().attr('href')).
just put an e / event in the function
<script type='text/javascript'>
$(document).ready(function(){
$("#div1").load("Fp.php");
$('div.div1 a button').click(function(e){
e.preventDefault();
alert($(this).attr('href'));
});
});
</script>
I have written this Code in order to display the information after mouseover an Image. There are three images on the website, and each Image have the own text information:
var resOb = new XMLHttpsRequest ();
window.onload = function() {
document.getElementsByTagName("img").onmouseover =
function sndReq(0) {
}
document.getElementsByTagName("img").onmouseover =
function sndReq(1) {
}
document.getElementsByTagName("img").onmouseover =
function sndReq(2) {
}
}
function sndReq(i) {
switch (i) {
case 0:
resOb.open('get', 'info0.txt', true);
break;
case 1:
resOb.open('get', 'info1.txt', true);
break;
case 2:
resOb.open('get', 'info2.txt', true);
break;
resOb.onreadystatechange = function() {
handleResponse(i);
}
}
function handleResponse () {
document.getElementById("info0").innerHTML =
resOb.responseText;
}
Sadly it doesn't work, and I'm not able to find out where the problem is. I need some help.
Here the HTML Output
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>AJAX</title>
<meta name="viewport" content=
"width=device-width; initial-scale=1.0">
<link rel="stylesheet" type="text/css"
href="lib/css/stil.css" />
<script type="text/javascript"
src="lib/js/ajaxeinsendeaufgabe2.js"></script>
</head>
<body>
<h1>Zusatzinformationen</h1>
<table>
<tr>
<td><img class="img" src="img/b1.jpg" data-file="info0" /></td>
<td id="info0"></td>
</tr>
<tr>
<td><img class="img" src="img/b2.jpg" /></td>
<td id="info1"></td>
</tr>
<tr>
<td><img class="img" src="img/b3.jpg" /></td>
<td id="info2"></td>
</tr>
</table>
</body>
</html>
Your handle response does not use i it has hard coded "info0". It should be:
function handleResponse (i) {
document.getElementById("info"+i).innerHTML =
resOb.responseText;
}
also you do not need a switch case you can do the same with:
resOb.open('get','info'+i+'.txt',true);
here is a link to the refactor fiddle https://jsfiddle.net/pyr2447k/6/
try to see if that one will work.
I have 95% completed my Player vs Player tic tac toe game. In the future I will add a nice AI and will set conditions for when someone wins.
Right now I'm just looking for the best way to refresh my game without having the page reload in pure JavaScript. I have a button at the bottom of my page and basically once it clicks I want whatever is on my board to be totally cleared and the game starts over.
They would click on this at the bottom of my HTML
<center><div id="refresh" class="fa fa-refresh faa-spin animated-hover fa-5x"></div></center>
Here's my tic tac toe game so far in case anyone wants to look over it :)
Trying really hard to become really good at HTML/CSS/JavaScript >< So hard!
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tic-Tac-Toe</title>
<link rel="stylesheet" href="css/styles.css" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/font-awesome-animation.min.css">
<link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon" />
</head>
<header>
<h1>Tic-Tac-Toe </h1>
</header>
<body>
<!--Table for Tic Tac Toe-->
<table id="mytable" class="grid">
<tr>
<td id="field1" class="square"></td>
<td id="field2" class="square v"></td>
<td id="field3" class="square"></td>
</tr>
<tr>
<td id="field3" class="square h"></td>
<td id="field4" class="square v h"></td>
<td id="field5" class="square h"></td>
</tr>
<tr>
<td id="field4" class="square"></td>
<td id="field5" class="square v"></td>
<td id="field6" class="square"></td>
</tr>
</table>
<!--Refresh Icon/Start Game Over-->
<div id="refreshIcon">
<center><div id="refresh" class="fa fa-refresh faa-spin animated-hover fa-5x"></div></center>
</div>
</div>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
JavaScript
var xTick = "../images/x-tick.png";
var oTick = "../images/o-tick.png";
var bg = null;
var counter = 0;
var memoryMove = [];
var refreshButton = document.getElementById('refresh');
var listRows = document.getElementById("mytable").rows;
/** detecting rows */
for(var i = 0; i < listRows.length;i++){
/** detecting cells */
for(var x = 0; x < listRows[i].cells.length; x++){
listRows[i].cells[x].setAttribute("data-cell",i.toString()+x.toString());
listRows[i].cells[x].addEventListener("click",function(){
var move = this.getAttribute("data-cell");
console.log(move);
if (memoryMove.indexOf(move) === -1){
memoryMove.push(move);
if (counter === 0){
bg = xTick;
} else {
if(counter % 2 === 0){
bg = xTick;
} else {
bg = oTick;
}
}
counter++;
this.style.background="url('./images/"+bg+"') center center no-repeat";
} else {
alert('Stop trying to cheat!');
}
/** Start a new game */
refreshButton.addEventListener('click', function() {
// alert("Refresh Results");
})
});
}
}
on clicking the refresh button just remove the background image of each td. Also reset your counter and memoryMove.
refreshButton.addEventListener('click', function() {
for (var i = 1;i <= 9;i++) {
document.getElementById("field"+i).style.background="none";
counter = 0;
memoryMove = [];
}
});
Updated in pure javascript:
for (var i = 1;i <= 9;i++) {
var fieldId = "field" + i; //ex 'field1'
document.getElementById(fieldId).value = "";
}
I need to be able to create a hyperlink dynamically on mouseover and remove it on mouseout event. However, when the mouse goes over the link I need it to not behave as if it is mouseout. When this happens the events goes into infinite loop. See example below:
<html>
<head><title>
</title></head>
<body>
<script language="javascript" type="text/javascript">
function showEdit(tcell) {
var editTag = document.createElement('a');
editTag.appendChild(document.createTextNode("test2"));
editTag.setAttribute('name', 'test2');
editTag.setAttribute('id', 'lnkEdit');
editTag.setAttribute('href', '#');
editTag.setAttribute('style', 'float:right;');
tcell.appendChild(editTag);
}
function hideEdit(tcell) {
//var tcell = document.getElementById("tcAdd");
var lnk = document.getElementById("lnkEdit");
tcell.removeChild(lnk);
}
</script>
<div>
<table style="width:200px;">
<tr>
<td id="tcAdd" style="border:1px solid #CCC" onmouseover="showEdit(this);" onmouseout="hideEdit(this);">
test1
</td>
</tr>
</table>
</div>
</body>
</html>
Put the cursor on test1 and test2 to see the difference.
I think I am missing something obvious.
Well, I don't know if you want like this, but it works:
<html>
<head><title>
</title></head>
<body>
<script language="javascript" type="text/javascript">
function showEdit(tcell) {
document.getElementById("lnkEdit").style.display="inline";
}
function hideEdit(tcell) {
document.getElementById("lnkEdit").style.display="none";
}
</script>
<div>
<table style="width:200px;">
<tr>
<td id="tcAdd" style="border:1px solid #CCC" onmouseover="showEdit(this);" onmouseout="hideEdit(this);">
test1
test2
</td>
</tr>
</table>
</div>
</body>
</html>
It's a simpler way than using DOM. But if you want to use DOM, I can take another try =)