Zdravím,
mám problém s JavaScriptem. Naprogramoval jsem funkci pro JavaScript, který zabarví pozice, které ohrožuje kůň ze své pozice. Ale mám menší problém. Tabulka se neaktualizuje z dat získaných z formuláře HTML. Je zobrazena stále pozice A1. Potřebuji překreslit původní tabulku novou tabulkou. Lze to něják udělat??
Zde je kompletní skript:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script type="text/javascript">
function RenderBoard(){
var chessboard = new Array(8);
for(var i = 0; i < 8; i++){
chessboard[i] = new Array(8);
for(var j = 0; j < 8; j++)
chessboard[i][j] = 0;
}
var knightsMoves = [
[ 2, 1],
[ 2, -1],
[ 1, 2],
[ 1, -2],
[-2, 1],
[-2, -1],
[-1, 2],
[-1, -2]
];
// loading position horse from html form
var j = parseInt(document.getElementById('polohaj').value);
var i = parseInt(document.getElementById('polohai').value);
// entry position a chess horse into the array with name "sachovnice"
chessboard[j][i] = 1;
var aux;
// vulnerable position
for(a=knightsMoves.length-1; a>=0; a--){
//auxiliary variables
aux = [j + knightsMoves[a][0], i + knightsMoves[a][1]];
//verify whether the position is on the board
if(aux[0] >= 0 && aux[0] <= 7 && aux[1] >= 0 && aux[1] <= 7){
if( (aux[0] & 1) == (aux[1] & 1)) // white square
chessboard[aux[0]][aux[1]] = 2;
else
chessboard[aux[0]][aux[1]] = 2;
}
}
var defaultCell=document.createElement("td");
defaultCell.style.height = defaultCell.style.width = '44px';
var whiteCell = defaultCell.cloneNode(true);
whiteCell.style.backgroundColor = '#fff';//white
var blackCell = defaultCell.cloneNode(true);
blackCell.style.backgroundColor = '#000';//black
var highlightedCell = defaultCell.cloneNode(true);
highlightedCell.style.backgroundColor = '#ff0';// yellow
// get the reference for the body
var body = document.getElementsByTagName("body")[0];
var tbl = document.createElement("table");
var tblBody = document.createElement("tbody");
var div = document.createElement("div");
var cell, row;
var img=document.createElement('img');
img.style.display='block';
img.src='figurky/tmave/kun.png';
// creating all cells
for(i = 0; i <8; i++){
// creates a table row
row = document.createElement("tr");
for (j = 0; j <8; j++) {
// Create a <td> element and a text node, make the text
// node the contents of the <td>, and put the <td> at
// the end of the table row
if(chessboard[i][j] == 2)
cell = highlightedCell.cloneNode(true);
else if( (i&1) == (j&1) )
cell = whiteCell.cloneNode(true);
else
cell = blackCell.cloneNode(true);
if(chessboard[i][j] == 1)
cell.appendChild(img);
row.appendChild(cell);
cell.setAttribute('id', 'cb'+i+''+j);
}
// add the row to the end of the table body
tblBody.appendChild(row);
}
// sets the border attribute of tbl to 2;
tbl.setAttribute("border", "2");
div.setAttribute("id","left");
tbl.appendChild(tblBody);
div.appendChild(tbl);
body.appendChild(div);
}
//function dalsifigurky() {
//var polickaj = new Array("0","1","2","3","4","5","6","7");
//var polickai = new Array("0","1","2","3","4","5","6","7");
//var obrazky = new Array("strelec.png","kun.png","kral.png","pesec.png","dama.png","vez.png");
//var pocetfigurek = document.figurky.pocetfigurek.value;
//for(i=1; i> pocetfigurek; i++);
// sourj = polickaj[Math.floor(Math.random()*polickaj.length)];
// souri = polickai[Math.floor(Math.random()*polickai.length)] ;
//if(sourj % 2 == 0) {
// sour = sourj.toString(10) + souri.toString(10);
// var sudecislo = 1
// }
//else {
//sour = sourj.toString(10) + souri.toString(10);
//var lichecislo = 1;
// }
// if(sudecislo == 1) {
// document.getElementById(""+sour+"").style.background = "url(figurky/tmave/"+obrazky[Math.round(Math.random()*(obrazky.length-4))]+")"
// }
// else{
// document.getElementById(""+sour+"").style.background = "url(figurky/svetle/"+obrazky[Math.round(Math.random()*(obrazky.length-4))]+")"
// }
//}*/
</script>
<style type="text/css">
td.hnedykun {
background-image: url('figurky/tmave/kun.png');
border-width: 3px;
border-color: yellow;
border-style: solid;
}
</style>
<style type="text/css">
input.style
{
font-size:20px;
font-family:Arial Black,sans-serif;
font-weight:bold;
font-style:italic;
background-color:#FFFF00;
border-top-style:solid;
border-top-color:#660099;
border-bottom-style:solid;
border-bottom-color:#660099;
border-left-style:solid;
border-left-color:#660099;
border-right-style:solid;
border-right-color:#660099;
}
select {
background-color: yellow;
color: black;
font-size: 20px;
font-family:Arial Black,sans-serif;
font-weight:bold;
font-style:italic;
}
</style>
</head>
<body onLoad="RenderBoard()">
<div align="left">
<p class="podtrzeny"> T A H Y J E Z D C E</p>
<div align="right">
<form enctype="multipart/form-data" method="post" name="polohakone">
<select name="polohaj">
<option value="0">A</option>
<option value="1">B</option>
<option value="2">C</option>
<option value="3">D</option>
<option value="4">E</option>
<option value="5">F</option>
<option value="6">G</option>
<option value="7">H</option>
</select>
<select name="polohai">
<option value="0">1</option>
<option value="1">2</option>
<option value="2">3</option>
<option value="3">4</option>
<option value="4">5</option>
<option value="5">6</option>
<option value="6">7</option>
<option value="7">8</option>
</select>
<input type="submit" class=style value="Dosaď koně" onclick="RenderBoard()">
</form>
<form name="form">
<input type="button" class=style value="R E S E T" onClick="location.reload(true);">
</form>
</div>
</body>
</html>
TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
