Beiträge von Jochen

Ich erstelle eine Tabelle deren Zellen mit Bilder gefüllt werden.
Jetzt möchte ich beim Anklicken einer Zelle dieses Billd durch eunin neues Bild ersetzen.

Ich versuche dies in der Funktion mit :

this.style.background-image: "augeRot.gif";

Funktioniert nicht. Ist das statement falsch?

Gruß aus Mülheim

Joachim

function createTable(row, col, id)
{
var myTable = document.createElement("table");
var mytablebody = document.createElement("tbody");

for (var j = 0; j < row; j++)
{
mycurrent_row = document.createElement("tr");
for (var i = 0; i < col; i++)
{
mycurrent_cell = document.createElement("td");
mycurrent_cell.addEventListener("click", function (iii, jjj)
{
//////////////////////////////////////////////////////////////////////////////////////

return function ()
{

this.style.background-image: "augeRot.gif";

if (vorgabe[0]<= counter)
{
myTable.setAttribute("data-locked", "true");
document.getElementById("suchZahl").innerHTML ="Level geschafft, auf zum nächsten Level";
levelMove();
anzahlZeilen = anzahlZeilen +1;
anzahlSpalten =anzahlSpalten+1;
document.getElementById("btnnr2").disabled = false;
document.getElementById("btnnr1").disabled = true;
}

if (progressValue >= 100)

{
document.getElementById("suchZahl").innerHTML =" Glückwunsch, alle Level erfolgreich geschafft!" ;

}
}
}
////////////////////////////////////////////////////////////////////////////////////////////////
}
(i, j));

currentimage = document.createElement("IMG");
currentimage.setAttribute("src", "augeLeer.gif");
mycurrent_cell.appendChild(currentimage);
mycurrent_row.appendChild(mycurrent_cell);
}

mytablebody.appendChild(mycurrent_row);
}

myTable.appendChild(mytablebody);
myTable.setAttribute("ID", id);
return myTable;
}

das war es . danke

In der Funktion createTable soll bei falscher Eingabe die Tabelle nicht mehr clickbar sein.
Das soll gesteuert werden mit

if (StopSofort==true)
{
myTable.setAttribute("data-locked", "true");
alert ("Falsche Ziffer . Beginn wieder mit Start");
}

wenn die Tabelle nicht gesperrt worden ist soll das Programm weiter abgearbeitet werden.

Dieser Vorgang soll gesteuert werden mit der Abfrage :

if (!myTable.getAttribute("data-locked"))
Diese If Abfrage funkioniert nicht. Auch wenn StopSofort ==true und damit myTable.setAttribute("data-locked", "true");
arbeitet das Programm die Statements nach der Abfrage if (!myTable.getAttribute("data-locked")) ab.

Ich verstehe nicht wieso. Muss allerdings gestehen, dass ich nichtgenau weiß wie myTable.setAttribute("data-locked", "true") arbeitet.
Im Netz finde ich auch keine ausführliche Beschreibung zu getAttribute

LG

Joachim

function createTable(row, col, id)
{
var myTable = document.createElement("table");
var mytablebody = document.createElement("tbody");

for (var j = 0; j < row; j++)
{
mycurrent_row = document.createElement("tr");
for (var i = 0; i < col; i++) {
mycurrent_cell = document.createElement("td");
mycurrent_cell.addEventListener("click", function (iii, jjj)
{
return function ()
{
pruef(jjj,iii,counter);

if (StopSofort==true)
{
myTable.setAttribute("data-locked", "true");
progressValue=0;
this.style.backgroundColor = "red";
alert ("Falsche Ziffer . Beginn wieder mit Start");

}

if (!myTable.getAttribute("data-locked"))

{ }
alert("Nicht gesperrt. Hier geht es weiter");
this.style.backgroundColor = "yellow";

if (vorgabe[0]<= counter)
{
myTable.setAttribute("data-locked", "true");
document.getElementById("suchZahl").innerHTML ="Level geschafft, auf zum nächsten Level";
levelMove();
anzahlZeilen = anzahlZeilen +1;
anzahlSpalten =anzahlSpalten+1;
}

if (progressValue >= 100)

{
document.getElementById("suchZahl").innerHTML =" Glückwunsch, alle Level erfolgreich geschafft!" ;

}

}
}
(i, j));

currenttext = document.createTextNode(random(maxValue));
mycurrent_cell.appendChild(currenttext);
mycurrent_row.appendChild(mycurrent_cell);
}

mytablebody.appendChild(mycurrent_row);
}

myTable.appendChild(mytablebody);
myTable.setAttribute("ID", id);
return myTable;
}

function searchValue(zeile,spalte){
;
var rowIndex = zeile;
var cellIndex = spalte;
var zahlAusTab = document.getElementById('tabelle1').rows[rowIndex].cells[cellIndex].innerHTML;
return zahlAusTab;
}

Da kuckst du stundenlang auf die paar Zeilen und findest doch den Fehler nicht.

Gibt es eigentlich einen Editor der auf solche Fehler hinweist?

LG
Joachim

Ich erzeuge eine Tabelle mit dem folgenden Code:

function createTable(row, col, id) {
var myTable = document.createElement("table");
var mytablebody = document.createElement("tbody");

for (var j = 0; j < row; j++) {
mycurrent_row = document.createElement("tr");
for (var i = 0; i < col; i++) {
mycurrent_cell = document.createElement("td");
mycurrent_cell.addEventListener("click", function() {console.log(this.innerHTML);})
currenttext = document.createTextNode(random());
mycurrent_cell.appendChild(currenttext);
mycurrent_row.appendChild(mycurrent_cell);
}

mytablebody.appendChild(mycurrent_row);
}

myTable.appendChild(mytablebody);
myTable.setAttribute("ID", id);
return myTable; }

Ich formatiere die Tabelle mit :

td {border:1px solid #7f7f7f;width:85px;height:35px;text-align:center;}

jetzt möchte ich NACHTRÄGLICH die Höhe und Breite der Zellen ändern.

Mein Versuch;

function changeCell(){
var tds = document.getElementsByTagName('td');
for (var i = 0; i < tds.length; i++)
tds[i].style.width = '2px';
tds[i].style.hight = '2px';
}

Klapp nicht.

Was mach ich falsch ?

LG

Jochen

jetzt möchte ich nachträchlich Im lauf

function start(row, col) {
maxValue=maxValueStart;
node = document.getElementById("wrtabelle1");
node.appendChild(createTable(row, col, "tabelle1"), node);

Ich finde den Fehler nicht. Das ist der Code.

function createTable(row, col, id) {

var myTable = document.createElement("table");
var mytablebody = document.createElement("tbody");

for (var j = 0; j < row; j++) {
mycurrent_row = document.createElement("tr");
for (var i = 0; i < col; i++) {
mycurrent_cell = document.createElement("td");
mycurrent_cell.addEventListener("click", function (iii, jjj) {
return function () {
if (!myTable.getAttribute("data-locked"))
alert(this.innerHTML+ iii+

jjj);
if (this.innerHTML != Stop) myTable.setAttribute("data-locked", "true");
}
}(i, j));
currenttext = document.createTextNode(random(maxValue));
mycurrent_cell.appendChild(currenttext);
mycurrent_row.appendChild(mycurrent_cell);
}

mytablebody.appendChild(mycurrent_row);
}

myTable.appendChild(mytablebody);
myTable.setAttribute("ID", id);
return myTable;
}

function searchValue(r,i){
var rowIndex = r;
var cellIndex = i;
var value = document.getElementById('tabelle1').rows[rowIndex].cells[cellIndex].innerHTML;
alert(value);
}

<input type="button" name="btnStart2" value="Such" onclick="searchValue(5,5)" />

node.appendChild(createTable(row, col, "tabelle1"), node);

hatte ich vorher auch kopiert, die ganze Funktion.

Das habe ich reinkopiert

function searchValue(r,i){
var rowIndex = r;
var cellIndex = i;
var value = document.getElementById('tabelle1').rows[rowIndex].cells[cellIndex].innerHTML;
alert(value);
}

</script>
<input type="button" name="btnStart" value="Starte neu" onclick="searchValue(5,8)" />

Da hat es wohl mit dem Smily und co nicht so geklappt: Sorry. Ich wiederhole in Reinkultur:

ich habe den Code rein kopiert. Aber wenn ich den Button klicke, kommt keine Meldung, kein alert Meldung taucht auf.

Neue Frage: Wie kann ich die Tabelle vom Bildschirm löschen. Damit ich die alte Tabelle mittels einem weiteren Button "noch einmal" durch die neue Tabelle mit den neuen Zufallszahlen ersetzen kanm.

Ich werde dir das Spiel später widmen!!!

ichj habew es rein kopiert. Aber wenn ich den Button kli cke, kommt keine Meldung, kein alerthttp://www.html-seminar.de/html-css-php-forum/wcf/images/smilies/confused.png

Jetzt möchte ich nachdem die Funktion create Table erstellt ist darauf zugreifen. Zum Beispiel möchte wissen welcher Wert in der celle(x,y) steht.

Mit der Eigenkration searchvalöue erhalte ich aber keinen Rückgabewert.????????????????????????r

function searchValue(r,i){
var rowIndex = r;
var cellIndex = i;
var value=document.getElementById('myTable').rows[rowIndex].cells[cellIndex];
alert(value);
}
LG
Joachim

</script>
<input type="button" name="btnStart" value="Starte neu" onclick="searchValue(5,8)" />

LG
Joachim

wieder elegant gelöst

Elegante Lösung, habe ich so realisiert. ich rufe in createtable die Funktion verifyData auf.

Wenn jetzt eine Falscheingabe erfolgt, möchte ich die Funktion createTable verlassen und verhindern, dass weiter angeklickt wird.
Ich möchte die gesamte Tabelle sperren.

Wie relisiere ich das? Gibt es eine Art Break. e

function verifyData(v1,v2){
if (v1 != v2) {
counter==0;
Abbruch / Speerung????????;
}
else {
counter++;
}
}

LG

Joachim

Ich danke dir, das Grundprinzip habe ich verstanden.

Wenn ich jetzt klicke, weiß ich nun welches Feld ich angeklickt habe. Aber ich bekomme die Indizes iii und jjj nicht aus der Funktion createTable raus um sie in einer anderen Funktion weiter zu verwenden.

Ich versuche hier ein mini mini Spiel zu basteln.

Es soll dem Spieler 5 Zahlen aus der mit Zufallszahlen gefüllten Tabelle (erzeugt mit obiger Funktion createTable) vorgegeben werden Er soll dann möglichst schnell diese 5 Zahlen in der Tabelle anklicken.
Ich prüfe dann ob er die richtigen Zahlen angeklickt hat.

Mein Problem ist wie bekomme ich iii und jjj aus der obigen Funktion createTable raus und in eine andere Funktion rein mit der ich dann die Übereinstimmung überprüfen kann?

LG

Joachim

Vielen Dank Meister,

ich verstehe es zwar nicht, aber es läuft wie gewollt

Joachim

Vielen Dank.

Noch eine Frage:

wie komme ich an die Indizes der Zelle, die ich angeklickt habe?

LG

Joachim

wenn ich das von mir fälschlicherweise genommene onClick durch den click ersetze bekomme ich einen Output . Aber immer nur die Zahl 10.
es sieht so aus:

mycurrent_cell.addEventListener("click", function() {alert(i,j);
var x = document.getElementsByName("currenttext").innerHTML;
alert (x);})

bei alert(x) bekomme ich als Rückmeldung nicht die Zufallszahl sondern "undefiend"

LG

Joachim

ich habe die zeile mit dem Eventlistener problemadäquat ergänzt. wenn ich eine Zelle anklicke passiert leider nichts. Keine Rückmeldung.
Bin zu dumm

mycurrent_cell.addEventListener("onClick", function() {alert(i,j,currenttext);})

LG
Joachim

Ich habe eine dynamisch erzeugte Tabelle. Ich möchte wenn ich eine Zelle dieder Tabelle anklicke den wert zurück bekommen.

Ich bekomme das nicht hin. Anbei mein (geliehener) Code für die Erzeugung der Tabelle.

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Testen</title>
<script>
xVar=10;
yVar=10;
function start(row,col) {
node = document.getElementById("tabelle1");
node.parentNode.insertBefore(createTable(row,col), node );
}
function random() {
return Math.floor((Math.random() * 998) + 1);
}
function createTable(row, col, id) {

var myTable = document.createElement("table");
var mytablebody = document.createElement("tbody");

for(var j = 0; j < row; j++) {
mycurrent_row = document.createElement("tr");
for(var i = 0; i < col; i++) {
mycurrent_cell = document.createElement("td");
currenttext = document.createTextNode(random());
mycurrent_cell.appendChild(currenttext);
mycurrent_row.appendChild(mycurrent_cell);
}

mytablebody.appendChild(mycurrent_row);
}

myTable.appendChild(mytablebody);
myTable.setAttribute("ID", id);
return myTable;
}

</script>
</head>

<body onload="start(xVar,yVar)">
<table width="100" border="1" cellpadding="0" cellspacing="1" id="tabelle1"> </table>
</body>
</html>

Ich finde wohl Funktionen im Internet daür, aber ich kann sie nicht mit der Tabelle verknüpfen.

LG

Joachim