I have a html page of 9 images which must change their order when page is reloaded
I have placed image as 3 rows and 3 columns which on reload should change the order of the image .
Here is my HTML Code
<html>
<head>
<script type="text/javascript">
var len = document.images.length;
var images = document.images;
var img = function (){
for(var j, x, i = images.length; i; j = parseInt(Math.random() * i), x = images[--i], images[i] = images[j], images[j] = x);
}
window.onload = function(){
for(var i = 0 ; i < len ; i++)
{
images[i].src = img[i].src;
}
}
</script>
</head>
<body>
<table>
<tr>
<td id="cell1"><button value="1"><img src="1.jpg" width="42" height="42"/></button></td>
<td id="cell2"><button value="2"><img src="2.jpg" width="42" height="42"/></button></td>
<td id="cell3"><button value="3"><img src="3.jpg" width="42" height="42"/></button></td>
</tr>
<tr>
<td id="cell4"><button value="4"><img src="4.jpg" width="42" height="42"/></button></td>
<td id="cell5"><button value="5"><img src="5.jpg" width="42" height="42"/></button></td>
<td id="cell6"><button value="6"><img src="6.jpg" width="42" height="42"/></button></td>
</tr>
<tr>
<td id="cell7"><button value="7"><img src="7.jpg" width="42" height="42"/></button></td>
<td id="cell8"><button value="8"><img src="8.jpg" width="42" height="42"/></button></td>
<td id="cell9"><button value="9"><img src="9.jpg" width="42" height="42"/></button></td>
</tr>
</table>
<!-- forms's action sends the data to a specified php page -->
<form action="pictures.php" method="post">
<input id="pswd" type="hidden" value="" name="pass">
</form>
</body>
</html>
I Cant randomize the image . Any Suggestion on what i am doing wrong :)
You should "randomize" your array:
<script type="text/javascript">
var len = document.images.length;
var images = document.images;
var img = function (){
for(var j, x, i = images.length; i; j = parseInt(Math.random() * i), x = images[--i], images[i] = images[j], images[j] = x);
}
img = shuffle(img);//this "randomizes" the 'img' array using the function bellow
window.onload = function(){
for(var i = 0 ; i < len ; i++)
{
images[i].src = img[i].src;
}
</script>
And paste this function in your code: https://stackoverflow.com/a/2450976/3132718
Related
I am trying to create a table dynamically for many items as soon as a page loads. However, the table is not displayed on the page. So, I put my code (+100 lines) on https://jsfiddle.net/hbbz040/6qjguebd/7/.
What's wrong with the code? I have looked at other discussion threads on this topic, but none have helped.
Any help and/or changes to the code are welcome!
Here is the expected result for each of thousands items that could be loaded on page.
<section class="col-1-60">
<div class="a">
<h3 class="b"></h3>
<div class="c">
<div class="d">
<div class="c">
<table>
<tbody>
<tr class="dheader">
<th rowspan="2">A</th>
<th rowspan="2">B</th>
<th colspan="4">C</th>
<th colspan="3">D</th>
<th colspan="3">E</th>
</tr>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
<th>10</th>
</tr>
<tr>
<td>1</td>
<td class="d">
<figure class="e">
<a><img src="world1.png"></a>
<figcaption><a></a></figcaption>
</figure>
<figure class="e">
<a><img src="world2.png"></a>
<figcaption><a></a></figcaption>
</figure>
</td>
<td>2</td>
<td class="f">1</td>
<td class="g">1</td>
<td class="f g">3</td>
<td>4</td>
<td>4</td>
<td class="f g">$1.000</td>
<td>100%</td>
<td>100%</td>
<td class="f g">1.000</td>
</tr>
<tr>
<td>1</td>
<td class="d">
<figure class="e">
<a><img src="world3.png"></a>
<figcaption><a></a></figcaption>
</figure>
<figure class="e">
<a><img src="world4.png"></a>
<figcaption><a></a></figcaption>
</figure>
</td>
<td>2</td>
<td class="f">1</td>
<td class="g">1</td>
<td class="f g">3</td>
<td>4</td>
<td>4</td>
<td class="f g">1.000</td>
<td>100%</td>
<td>100%</td>
<td class="f g">1.000</td>
</tr>
<tr>
<td>1</td>
<td class="d">
<figure class="e">
<a><img src="world5.png"></a>
<figcaption><a></a></figcaption>
</figure>
<figure class="e">
<a><img src="world6.png"></a>
<figcaption><a></a></figcaption>
</figure>
</td>
<td>2</td>
<td class="f">1</td>
<td class="g">1</td>
<td class="f g">3</td>
<td>4</td>
<td>4</td>
<td class="f g">$1.000</td>
<td>100%</td>
<td>100%</td>
<td class="f g">1.000</td>
</tr>
<tr>
<td>1</td>
<td class="d">
<figure class="e">
<a><img src="world7.png"></a>
<figcaption><a></a></figcaption>
</figure>
<figure class="e">
<a><img src="world8.png"></a>
<figcaption><a></a></figcaption>
</figure>
</td>
<td>2</td>
<td class="f">1</td>
<td class="g">1</td>
<td class="f g">3</td>
<td>4</td>
<td>4</td>
<td class="f g">1.000</td>
<td>100%</td>
<td>100%</td>
<td class="f g">1.000</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
Pure JS
function start() {
var arr0 = ["A", "B", "C", "D", "E"];
var arr1 = ['2', '2', '4', '3', '3'];
var arr2 = ["rowspan", "rowspan", "colspan", "colspan", "colspan"]
var arr3 = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];
var part = ["SD-001", "SD-002", "SD-003", "SD-004", "SD-005", "SD-006", "SD-007", "SD-008"];
var label = ["world1.png", "world2.png", "world3.png", "world4.png", "world5.png", "world6.png", "world7.png"];
var sec, idx, cab, tac0, tcs, tac1, th, td, a0, a1, img, mycurrent_row, currenttext, figure, figcaption;
var grid = document.getElementsByClassName('grid')[0];
var total_prod = 200;
for(var s = 0; s < total_prod; s++) {
sec = document.createElement('SECTION');
sec.setAttribute('class', 'col-1-60');
idx = document.createElement('DIV');
idx.setAttribute('class', 'a');
cab = document.createElement('H3');
cab.setAttribute('class', 'b');
tac0 = document.createElement('DIV');
tac0.setAttribute('class', 'c');
tcs = document.createElement('DIV');
tcs.setAttribute('class', 'd');
tac1 = document.createElement('DIV');
tac1.setAttribute('class', 'c');
var mytable = document.createElement("table");
var mytablebody = document.createElement("tbody");
for(var j = 0; j < 6; j++) {
mycurrent_row = document.createElement("tr");
if(j = 0) {
mycurrent_row.setAttribute('class', 'dheader');
for(var a = 0; a < arr0.lenght; a++) {
th = document.createElement('th');
th.setAttribute(arr2[a], arr1[a]);
currenttext = document.createTextNode(arr0[a]);
th.appendChild(currenttext);
mycurrent_row.appendChild(th);
mytablebody.appendChild(mycurrent_row);
}
} else if(j = 1) {
for(var b = 0; b < arr3.lenght; b++) {
th = document.createElement('th');
currenttext = document.createTextNode(arr3[b]);
th.appendChild(currenttext);
mycurrent_row.appendChild(th);
mytablebody.appendChild(mycurrent_row);
}
} else if(j > 1) {
for(var l = 0; l < 12; l++) {
td = document.createElement('td');
if(l = 0) {
td.appendChild(document.createTextNode(j + 1));
}
if(l = 1) {
td.setAttribute("class", "d");
for(var m = 0; m < 2; m++) {
figure = document.createElement('figure');
figure.setAttribute('class', 'e');
a0 = document.createElement('a');
img = document.createElement('img');
img.setAttribute('src', label[j + j + m]);
figcaption = document.createElement('figcaption');
a1 = document.createElement('a');
a1.appendChild(document.createTextNode(part[j + j + m]));
figcaption.appendChild(a1);
img.appendChild(figcaption);
a0.appendChild(img);
figure.appendChild(a0);
td.appendChild(figure);
}
}
if(j = 2) {
td.appendChild(document.createTextNode("2"));
}
if(j = 3) {
td.setAttribute('class', 'f');
td.appendChild(document.createTextNode("1"));
}
if(j = 4) {
td.setAttribute('class', 'g');
td.appendChild(document.createTextNode("1"));
}
if(j = 5) {
td.setAttribute('class', 'f g');
td.appendChild(document.createTextNode("3"));
}
if(j = 6) {
td.appendChild(document.createTextNode("4"));
}
if(j = 7) {
td.appendChild(document.createTextNode("4"));
}
if(j = 8) {
td.setAttribute('class', 'f g');
td.appendChild(document.createTextNode("1.000"));
}
if(j = 9) {
td.appendChild(document.createTextNode("200"));
}
if(j = 10) {
td.appendChild(document.createTextNode("206"));
}
if(j = 11) {
td.setAttribute('class', 'f g');
td.appendChild(document.createTextNode("0.971"));
}
mycurrent_row.appendChild(td);
mytablebody.appendChild(mycurrent_row);
}
mytablebody.appendChild(mycurrent_row);
}
}
mytable.appendChild(mytablebody);
tac1.appendChild(mytable);
tcs.appendChild(tac1);
tac0.appendChild(tcs);
cab.appendChild(tac0);
idx.appendChild(cab);
sec.appendChild(idx);
grid.appendChild(sec);
}
}
check this https://jsfiddle.net/6qjguebd/42/
in your code, conditions were wrongly checked
if(j = 0) {
should be
if(j == 0) { or if(j === 0) {
also, need to include the script in the head wrap
I'm trying to work on a website currently that displays pictures with the help of java-script. The way that I have this website set up at the moment, an image is displayed above numbered photo links. Instead of having numbers listed below the pictures, I'd like to have the numbers be thumbnails of the pictures. Is it possible to replace them with images? Any help is appreciated.
This is what I have so far:
var photos = new Array();
var photoindex = 0;
photos[0] = "images/piano.jpg";
photos[1] = "images/guitar.jpg";
photos[2] = "images/studio.jpg";
photos[3] = "images/sheetmusic.jpg";
function backward() {
if (photoindex > 0) {
document.images.p.src = photos[--photoindex];
}
}
function forward() {
if (photoindex < photos.length - 1) {
document.images.p.src = photos[++photoindex];
}
}
for (i = 0; i < photos.length; i++) {
document.write("" + i + " ");
}
function goto(n) {
if (n < photos.length && n >= 0) {
photoindex = n;
document.images.p.src = photos[photoindex];
}
}
<br>
<div style="text-align:center;left:5px;">
<table width="250" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3" align="center" valign="top">
<img src="images/weloveweb.png" name="p" width="250" height="188" id="p" />
</td>
</tr>
<tr>
<td valign="top"><<
</td>
<td valign="top" style="text-align: center">
</td>
<td valign="top" style="text-align: right">>>
</td>
</tr>
</table>
</div>
Since your thumbnail urls are stored in the photos array, what you need to do to display a thumbnail instead of its index is to create an img tag with a src attribute containing each thumbnail's url (i.e. photos[i]).
Change:
for (i = 0; i < photos.length; i++) {
document.write("" + i + " ");
// ------------------------------------------------------------^ change this `i`
}
Into:
for (i = 0; i < photos.length; i++) {
document.write("" + "<img src=" + photos[i] + "/> ");
}
I want to implement the code to create a bingo appliacation where it takes the letters from array on a button click.
How can i assign the array element like array(a,b,c) to those 3X3 table cells randomly on run button click. when i got sequence like abc in a row or diagonal i want increment the count value.
I started but i am unable to implement the code. Can i get any suggestion please.
Here is my code
<html>
<head>
<script>
function run(){
var grid = document.getElementById("grid");
for (var i = 0, row; row = grid.rows[i]; i++){
row.cells[0].textContent = rand();
row.cells[1].textContent = rand();
row.cells[2].textContent = rand();
}
score()
}
function rand(){
var text = new Array();
var possible = "MCS*";
return possible.charAt(Math.floor(Math.random() * possible.length));
}
function score(){
var Row = document.getElementById("grid");
var Cells = Row.getElementsByTagName("td");
alert(Cells[0].innerText);
alert(Cells[1].innerText);
alert(Cells[2].innerText);
alert(Cells[3].innerText);
alert(Cells[5].innerText);
alert(Cells[6].innerText);
alert(Cells[7].innerText);
alert(Cells[8].innerText);
}
</script>
</head>
<body>
<form metdod="post">
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="100"v id="grid">
<tr>
<td id="1-1" height="19" width="20%"> </td>
<td id="1-2" height="19" width="20%"> </td>
<td id="1-3" height="19" width="20%"> </td>
</tr>
<tr>
<td id="2-1" height="16" width="20%"> </td>
<td id="2-2" height="16" width="20%"> </td>
<td id="2-3" height="16" width="20%"> </td>
</tr>
<tr>
<td id="3-1" height="19" width="20%"> </td>
<td id="3-2" height="19" width="20%"> </td>
<td id="3-3" height="19" width="20%"> </td>
</tr>
</table>
<br><br>
<input type="button" onClick="return run();" value="run">
</form>
</body>
</html>
Thanks in advance..
<html>
<head>
<script>
var arr_num = ["1","2","3"];
var match =["123","234","345","567","678","111","222","333","444","555","666"];
function run(){
var counter =0;
var grid = document.getElementById("grid");
for (var i = 0, row; row = grid.rows[i]; i++){
row.cells[0].textContent = arr_num[getRandom()];
row.cells[1].textContent = arr_num[getRandom()];
row.cells[2].textContent = arr_num[getRandom()];
}
var a = getMatch();
for(var i=0;i<getMatch().length; i++){
if(match.indexOf(a[i]) > -1)
counter++;
}
document.getElementById("count").innerHTML = counter++;
}
function getMatch(){
var grid = document.getElementById("grid");
var match1 = [[]];
var match_dia =[];
var temp_dia1 = 0;
var temp_dia2 = 2;
var temp_dia3 = 0;
var temp_dia4 = 2;
var match_col = [];
for (var i = 0, row; row = grid.rows[i]; i++){
match1[match1.length++] = row.cells[0].textContent+row.cells[1].textContent+row.cells[2].textContent;
match1[match1.length++] = row.cells[2].textContent+row.cells[1].textContent+row.cells[0].textContent;
if(match_col.length != 0){
match_col[0] = match_col[0]+row.cells[0].textContent;
match_col[1] = match_col[1]+row.cells[1].textContent;
match_col[2] = match_col[2]+row.cells[2].textContent;
match_col[3] = row.cells[0].textContent+match_col[3];
match_col[4] = row.cells[1].textContent+match_col[4];
match_col[5] = row.cells[2].textContent+match_col[5];
}else{
match_col[0] = row.cells[0].textContent;
match_col[1] = row.cells[1].textContent;
match_col[2] = row.cells[2].textContent;
match_col[3] = row.cells[0].textContent;
match_col[4] = row.cells[1].textContent;
match_col[5] = row.cells[2].textContent;
}
if(match_dia.length != 0){
match_dia[0] = match_dia[0]+row.cells[temp_dia1++].textContent;
match_dia[1] = match_dia[1]+row.cells[temp_dia2--].textContent;
match_dia[2] = row.cells[temp_dia3++].textContent+match_dia[2];
match_dia[3] = row.cells[temp_dia4--].textContent+match_dia[3];
}else{
match_dia[0] = row.cells[temp_dia1++].textContent;
match_dia[1] = row.cells[temp_dia2--].textContent;
match_dia[2] = row.cells[temp_dia3++].textContent;
match_dia[3] = row.cells[temp_dia4--].textContent;
}
}
for(var i=0;i<match_col.length;i++){
match1[match1.length++] = match_col[i];
}
match1[match1.length++] = match_dia[0];
match1[match1.length++] = match_dia[1];
return match1;
}
function getRandom(){
return Math.floor(Math.random() * arr_num.length) + 0 ;
}
</script>
</head>
<body>
<form metdod="post">
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="100"v id="grid">
<tr>
<td id="1-1" height="19" width="20%"> </td>
<td id="1-2" height="19" width="20%"> </td>
<td id="1-3" height="19" width="20%"> </td>
</tr>
<tr>
<td id="2-1" height="16" width="20%"> </td>
<td id="2-2" height="16" width="20%"> </td>
<td id="2-3" height="16" width="20%"> </td>
</tr>
<tr>
<td id="3-1" height="19" width="20%"> </td>
<td id="3-2" height="19" width="20%"> </td>
<td id="3-3" height="19" width="20%"> </td>
</tr>
</table>
<br><br>
<div id="count" name="count"></div>
<br><br>
<input type="button" onClick="return run();" value="run">
</form>
</body>
</html>
This is how you would assign a value to each cell:
for(var row = 1; row <= 3; row++) {
for(var col = 1; col <= 3; col++ {
var id = '#'+ row + "-" + col;
$(id).html(/* put some content here */);
}
}
To assign a random number see Math.random(). If you multiply that value with 10 and round it down, you will get an integer between 0 and 9. Use that value to pick an element from your array.
Edit
So if you have an array like letters = [ "A", "B", "CD", "asum", 12, "whatsoever" ]and a random number n then letters[n] will give you the array element with index n. For n == 2: letters[n] == "CD"
Well this is NOT bingo but your "assign random letter a,b,c to a space in a grid" can be satisfied by:
var bingocol = ["a", "b", "c"];
/**
* Returns a random integer between min (inclusive) and max (inclusive)
* Using Math.round() will give you a non-uniform distribution!
*/
function getRandomIntInclusive(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
$('#runbingo').on("click", function() {
var nextcolindex = getRandomIntInclusive(0, 2);
var nextletterindex = getRandomIntInclusive(0, 2);
var nextrow = getRandomIntInclusive(0, 2);
$('#grid').find('tr').eq(nextrow).find('td').eq(nextcolindex).html(bingocol[nextletterindex]);
});
NOW if you really want to emulate BINGO where the column varies and the NUMBERS in the column vary by a given sequence that is a different problem; note that you would then need to have one algorithm to assign the player cards and another to pick random values from a list for the "game" card both of which would need to consider the range and previously filled values to exclude duplicates - doable but an entirely different problem.
Here is the code above in action: https://jsfiddle.net/MarkSchultheiss/tjd7j3oh/
The code works for the most part.
Whenever the interval is set to refresh the game card, the onclick functions no longer work and the variable no longer increments.
What am I missing here?
You Can comment out the line with the setInterval() to see the desired outcome. It should refresh every second keeping the variable score and incrementing whenever someone clicks on the images. Thanks!
// var btn = document.getElementById('btn');
//btn.addEventListener('click', UpdateTable);
// Set the max length and Width
var maxWidth = 4;
var maxLength = 6;
// Returns a random number
function CreateRandom() {
return Math.floor(Math.random() * 2 + 1);
}
//function to create an image
function CreateGopher() {
var randomNumber = CreateRandom();
var image = "Sup";
if (randomNumber == 1) {
image = "<img src='gopher.jpg' class='gopher' height='100' width='100'>";
} else if (randomNumber == 2) {
image = "<img src='lettuce.jpg' class='lettuce' height='100' width='100'>";
}
return image;
}
//create table
function UpdateTable() {
// Iterate over each cell and set a random number
for (var i = 0; i < maxLength; i++) {
for (var j = 0; j < maxWidth; j++) {
tmp = 'cell' + i + j;
document.getElementById(tmp).innerHTML = CreateGopher();
}
}
}
function newTable() {
// Iterate over each cell and set a random number
for (var i = 0; i < maxLength; i++) {
for (var j = 0; j < maxWidth; j++) {
tmp = 'cell' + i + j;
document.getElementById(tmp).innerHTML = CreateGopher();
}
}
}
//Use The function update table
UpdateTable();
setTimeout(function() {
alert("Your Score is " + score)
}, 15000);
setInterval(UpdateTable, 1000);
var score = 0;
$(".lettuce").click(function() {
//alert( "You Clicked on the lettuce" );
score -= 5;
document.getElementById("scoreOut").innerHTML = score;
});
$(".gopher").click(function() {
//alert( "You Clicked on the lettuce" );
score += 5;
document.getElementById("scoreOut").innerHTML = score;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<center>
<div id="container">
<div id="header">
<h1>Welcome</h1>
<div id="scoreOut"></div>
</div>
<div id="content">
<table id="gameCard">
<tbody>
<tr>
<td id="cell00"> </td>
<td id="cell01"> </td>
<td id="cell02"> </td>
<td id="cell03"> </td>
</tr>
<tr>
<td id="cell10"> </td>
<td id="cell11"> </td>
<td id="cell12"> </td>
<td id="cell13"> </td>
</tr>
<tr>
<td id="cell20"> </td>
<td id="cell21"> </td>
<td id="cell22"> </td>
<td id="cell23"> </td>
</tr>
<tr>
<td id="cell30"> </td>
<td id="cell31"> </td>
<td id="cell32"> </td>
<td id="cell33"> </td>
</tr>
<tr>
<td id="cell40"> </td>
<td id="cell41"> </td>
<td id="cell42"> </td>
<td id="cell43"> </td>
</tr>
<tr>
<td id="cell50"> </td>
<td id="cell51"> </td>
<td id="cell52"> </td>
<td id="cell53"> </td>
</tr>
</tbody>
</table>
</div>
</div>
<br>
//<input id="btn" type="button" value="Play The Game!!" />
</center>
Figured it out!
Needed to put my JQUERY on.click goodies in the actual main function, which I did not have in the first place, in with the other functions nested in it.
<!--
To change this template use Tools | Templates.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Gopher Broke</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style>
#gameCard td{
padding:0; margin:0;
}
#gameCard {
border-collapse: collapse;
cursor:url(finger2.png), pointer;
}
</style>
</head>
<body>
<center>
<div id="container">
<div id="header">
<h1>GOPHER BROKE</h1>
<center>You have 15 seconds to stop as many gophers as possible!</center>
<div id="scoreOut">Score:</div>
<FORM>
<INPUT TYPE="button" onClick="history.go(0)" VALUE="Refresh">
</FORM>
</div>
<div id="content">
<table id="gameCard">
<tbody>
<tr>
<td id="cell00"> </td>
<td id="cell01"> </td>
<td id="cell02"> </td>
<td id="cell03"> </td>
</tr>
<tr>
<td id="cell10"> </td>
<td id="cell11"> </td>
<td id="cell12"> </td>
<td id="cell13"> </td>
</tr>
<tr>
<td id="cell20"> </td>
<td id="cell21"> </td>
<td id="cell22"> </td>
<td id="cell23"> </td>
</tr>
<tr>
<td id="cell30"> </td>
<td id="cell31"> </td>
<td id="cell32"> </td>
<td id="cell33"> </td>
</tr>
<tr>
<td id="cell40"> </td>
<td id="cell41"> </td>
<td id="cell42"> </td>
<td id="cell43"> </td>
</tr>
<tr>
<td id="cell50"> </td>
<td id="cell51"> </td>
<td id="cell52"> </td>
<td id="cell53"> </td>
</tr>
</tbody>
</table>
</div>
</div>
<br>
<!--<input id="btn" type="button" value="Play The Game!!" />-->
</center>
<script>
var score = 0;
function game(){
// var btn = document.getElementById('btn');
//btn.addEventListener('click', UpdateTable);
// Set the max length and Width
var maxWidth = 4;
var maxLength = 6;
// Returns a random number
function CreateRandom() {
return Math.floor(Math.random() * 4 + 1);
}
//function to create an image
function CreateGopher() {
var randomNumber = CreateRandom();
var image = "Sup";
if(randomNumber == 1){
image = "<img src='gopher.jpg' class='gopher' height='50' width='50'>";
}
else if(randomNumber == 2){
image = "<img src='lettuce.jpg' class='lettuce' height='50' width='50'>";
}
else if(randomNumber == 3){
image = "<img src='lettuce.jpg' class='lettuce' height='50' width='50'>";
}
else if(randomNumber == 4){
image = "<img src='lettuce.jpg' class='lettuce' height='50' width='50'>";
}
return image;
}
//create table
function UpdateTable() {
// Iterate over each cell and set a random number
for (var i = 0; i < maxLength; i++) {
for (var j = 0; j < maxWidth; j++) {
tmp = 'cell' + i + j;
document.getElementById(tmp).innerHTML = CreateGopher();
}
}
}
function newTable() {
// Iterate over each cell and set a random number
for (var i = 0; i < maxLength; i++) {
for (var j = 0; j < maxWidth; j++) {
tmp = 'cell' + i + j;
document.getElementById(tmp).innerHTML = CreateGopher();
}
}
}
//Use The function update table
UpdateTable();
$( ".lettuce" ).click(function() {
//alert( "You Clicked on the lettuce" );
score -= 5;
document.getElementById("scoreOut").innerHTML = "<h1>Score :" + score;
});
$( ".gopher" ).click(function() {
//alert( "You Clicked on the lettuce" );
score += 5;
document.getElementById("scoreOut").innerHTML = "<h1>Score :" + score;
});
}
game();
setInterval(game, 1000);
setTimeout(function ()
{alert("Your Score is " + score)
window.location.href = "startGame.html";
}, 16000);
</script>
</body>
</html>
This script will cycle through the images but I cannot figure out how to get it to recognize the links that are associated with each image. I thought I could just use the same counter "i" to move through the link array, but it doesn't work.
var images = [
"Image1.jpg",
"Image2.jpg",
"Image3.jpg"
];
var weblinks = [
"http://google.com",
"http://yahoo.com",
"http://dell.com"
];
var num = images.length;
var i = 0;
var t;
function play() {
if(typeof t === 'undefined') {
t = setInterval(next, 2000);
}
}
function Stop() {
if(t) clearInterval(t);
}
function next() {
if(++i >= num) i = 0;
document.getElementById('img').src = images[i];
document.getElementById('link').src = webLinks[i];
}
function previous() {
if(--i < 0) i = num-1;
document.getElementById('img').src = images[i];
document.getElementById('link').src = webLinks[i];
}
window.onload = function() {
document.getElementById('img').src = images[0];
document.getElementById('link').src = webLinks[0];
a.href=link[i];
}
The HTML
<table width="50%" border="0" cellspacing="10" cellpadding top="0" align="center">
<tr>
<td><input type="button" value="Back" onclick="previous()"/></td>
<td align="center"><a id="link" href="#" target="_self"><img src="Image1.jpg" alt="" id="img"/></a></td>
<td><input type="button" value="Next" onclick="next()"/></td>
</tr>
<tr>
<td colspan="3" align="center" height="50"><input type="button" value="Play" onclick="play()" />
<input type="button" value="Stop" onclick="Stop()" /></td>
</tr>
</table>
Replace document.getElementById('link').src with document.getElementById('link').href - you're changing the wrong attribute of the link.
EDIT: also change var weblinks to var webLinks - JavaScript is case-sensitive.
And remove a.href=link[i];, which doesn't do anything (since a isn't defined, nor is link).