Mit Javascript Inhalte weitergeben

paul schmitz · 29. März 2015

Hallo,
ich habe ein Frage zu Javascript.
Beim untenstehenden Code erzeugt der untere Script-Bereich 15 Reihen mit jeweils 15 <span>. Nun sind im oberen Teil Felder festgelegt. Die Funktion move() soll nun den Inhalt der Felder verschieben, so dass nach der Ausführung in Feld 2 steht was vorher in Feld 1 stand und in Feld 3 steht was vorher in Feld 2 stand u.s.w.. Wie kann diese Funktion aussehen (ich habe nach einer halben Stunde noch nichts funktionsfähiges gefunden, aber die Schleife kommt mir richtig vor)?

HTML:

<!doctype html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
var felder = new Array ('1','2','3','4','150');
function move (){
	for(var i=0;i<felder.length;i++){
		//
	}
	setTimeout("move()",1000);
}
move();
</script>
<style>.hallo {display:inline-block;border:1px solid black;width:25px;height:25px;}</style>
</head>
<body>
<script>
var j=0;
for(var i=1;i<15*15+1;i++){
	j++;
	document.write ("<span class='hallo' id='"+i+"'> </span>");
	if(j==15){
		j=0;
		document.write ("<br/>");
	}
}
</script>
</body>
</html>

matiro65 · 29. März 2015

Versuch Dich mit array.unshift() und array.pop(), brauchst das Rad vermutlich nicht neu erfinden.
Sorry dass ich keinen fertigen Code liefere, ist schon spät....
- Matthias

paul schmitz · 01. Apr. 2015

Hallo matiro65,
leider kann ich mit diesen Informationen noch nicht so viel anfangen, da ich nicht verstehe, wie diese das Problem lösen können. Kannst du sie noch etwas erklären?

matiro65 · 03. Apr. 2015

Mein Denkansatz war das Array umzusortieren, und jeweils nach dem Umsortieren die Ausgabe zu aktualisieren.

Ich habe mal ein Beispiel geschrieben, falls die Frage noch aktuell ist:

HTML:

<!doctype HTML>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<script>

/* Variablen definieren und initialisieren */

var automarken = ["Volkswagen", "Toyota", "BMW", "Lancia", "Fiat"], auto;

/* Original-Array im Browser ausgeben */

document.write("hier das Original-Array: <br> ------------------------------------------- <br>");
for(i=0; i<automarken.length; i++) {
	document.write(i + ": "+ automarken[i] + "<br>");
	}
document.write("<br>");

/* letztes Array-Element mit array.pop() entfernen und Inhalt in Variable 'auto' speichern */

auto = automarken.pop();

/* ehemals letztes Array-Element aus variable 'auto' mit array.unshift() vorne am Array anfügen */

automarken.unshift(auto);

/* neues Array im Browser ausgeben */

document.write("und jetzt das umsortierte Array: <br> ------------------------------------------- <br>");
for(i=0; i<automarken.length; i++) {
	document.write(i + ": "+ automarken[i] + "<br>");
	}
document.write("<br>");
</script>
</body>
</html>

paul schmitz · 06. Apr. 2015

Ja, die Frage ist noch aktuell.
Nun ist das Problem dass es zwei Arrays gibt. Mit welchem Array muss ich was machen? Felder.pop oder werte.pop? Stimmt der Rest so?
Mein halbfertiger Code ist unten.

HTML:

<!doctype HTML>
<html>
<head>
<meta charset="utf-8"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript" language="JavaScript">
function move(){
/* Variablen definieren und initialisieren */

var felder = ["1", "2", "3", "4", "150"], tmp;
var werte = [];
var i;

for(i=0;i<felder.length;i++){         //Für jedes Feld
       werte[i]=$(felder[i]).html();  //wird der Wert in werte[i] übernommen
}

/* Original-Array im Browser ausgeben */

document.write("hier das Original-Array: <br> ------------------------------------------- <br>");
for(i=0; i<werte.length; i++) {
	document.write(i + ": "+ werte[i] + "<br>");
}
document.write("<br>");

/* Array verschieben */

tmp = felder.pop();
felder.unshift(tmp);

/* neues Array in die Felder schreiben */

for(i=0; i<werte.length; i++) {
	$(i).html(werte[i]);
}

}
</script>
</body>
</html>

Kann es sein dass die farbliche Darstellung in <script> nicht stimmt?

kkapsner · 14. Apr. 2015

Vergiss document.write()! Das wird dir in deinem Fall überhaupt nicht helfen.

Du musst in dem move() auf den DOM-Nodes arbeiten. Macht das ganze eigentlich auch einfacher:

Code:

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css">
#container span {
	display: inline-block;
	width: 90px;
	margin: 0px 5px;
	border: 1px solid gray;
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
(function(){
	var fields = [0, 1, 2, 14];
	var container = document.getElementById("container");
	for (var y = 0; y < 15; y += 1){
		var row = document.createElement("div");
		for (var x = 0; x < 15; x += 1){
			var cell = document.createElement("span");
			cell.innerHTML = "Cell (" + x + ", " + y + ")"
			row.appendChild(cell);
		}
		container.appendChild(row);
	}
	function move(){
		var rows = container.getElementsByTagName("div");
		fields.forEach(function(idx){
			var cells = rows[idx].getElementsByTagName("span");
			rows[idx].appendChild(cells[0]);
		});
		
	}
	
	window.setInterval(move, 1000);
	
}());
</script>
</body>
</html>

Zu document.write:

http://www.w3.org/html/wg/drafts/html/CR/webappapis.html#dynamic-markup-insertion schrieb:
This method has very idiosyncratic behavior. In some cases, this method can affect the state of the HTML parser while the parser is running, resulting in a DOM that does not correspond to the source of the document (e.g. if the string written is the string "<plaintext>" or "<!--"). In other cases, the call can clear the current page first, as if document.open( ) had been called. In yet more cases, the method is simply ignored, or throws an exception. To make matters worse, the exact behavior of this method can in some cases be dependent on network latency, which can lead to failures that are very hard to debug. For all these reasons, use of this method is strongly discouraged.

PS: IDs dürfen nicht mit einer Zahl beginnen...

paul schmitz · 14. Apr. 2015

Hallo kkapsner,
der Code funktioniert wunderbar.
Das mit den Feldern meinte ich aber nicht so. Es sollen nicht die Reihen durchlaufen, sondern nur die einzelnen Felder tauschen.
Beispiel:
Array Felder: [1,4,5,8]
Ausgangsposition:
0,2,4,5
1,2,5,43
Nach einem mal verschieben:
43,2,4,0
5,2,5,1
Die Fett gedruckten Felder haben sich verschoben. Die Nummerierung der Felder ist aufsteigend Zeilenweise, also:
1,2,3,4
5,6,7,8

Die fettgedruckten Werte sind die, die verschoben werden sollen.

Im Code wären das die Felder 0|0, 1|0, 3|0, 14|0
Wäre im Array noch als letzter Wert 18, würde das Feld 2|1 noch hinzukommen, weil das 18te Feld gezählt dieses ist.

kkapsner · 17. Apr. 2015

Ach so... das ist etwas komplizierter, aber nicht unmöglich:

Code:

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css">
#container span {
	display: inline-block;
	width: 90px;
	margin: 0px 5px;
	border: 1px solid gray;
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
(function(){
	var fields = [0, 8, 14, 21];
	var container = document.getElementById("container");
	for (var y = 0; y < 15; y += 1){
		var row = document.createElement("div");
		for (var x = 0; x < 15; x += 1){
			var cell = document.createElement("span");
			cell.className = "cell";
			var cellContent = document.createElement("span");
			cellContent.innerHTML = "Cell (" + x + ", " + y + ")"
			cell.appendChild(cellContent);
			row.appendChild(cell);
		}
		container.appendChild(row);
	}
	function move(){
		var cells = [].slice.call(container.getElementsByClassName("cell"));
		var lastContent = null;
		var firstCell = null;
		fields.forEach(function(idx){
			var currentContent = cells[idx].firstChild;
			if (lastContent === null){
				firstCell = cells[idx];
			}
			else {
				cells[idx].appendChild(lastContent);
			}
			lastContent = currentContent;
		});
		firstCell.appendChild(lastContent);
	}
	
	window.setInterval(move, 1000);
	
}());
</script>
</body>
</html>

paul schmitz · 18. Apr. 2015

Und wie kann ich von Javascript aus in ein Feld (z.B. Feld 17) etwas einfügen?

kkapsner · 18. Apr. 2015

Wann willst du was einfügen? Beim Erzeugen oder später?

paul schmitz · 19. Apr. 2015

Nachher.

kkapsner · 19. Apr. 2015

Und wann genau? Und woher kommen die neuen Daten?

Du musst schon etwas konkreter werden.

Prinzipiell kannst du natürlich jederzeit dir irgendeine Node holen und den Inhalt ändern...

paul schmitz · 19. Apr. 2015

Die Daten kommen aus einer Javascript-Variable, wann: wenn der Benutzer durch einen Knopfdruck eine Javascript-Funktion auslöst.

kkapsner · 19. Apr. 2015

Dann musst du in dem click-Event, das der Knopfdruck auslöst, dir die entsprechende Node holen und den Inhalt ändern. Was willst du genau wissen?

paul schmitz · 20. Apr. 2015

Wie und wo komme ich an die Node?

kkapsner · 20. Apr. 2015

Z.B. so wie im Code von #8 in der move(). Aber prinzipell gibt es sehr viele verschiedene Möglichkeiten um an eine Node zu gelangen.

- - - Aktualisiert - - -

Du musst schon etwas konkreter werden, was du genau willst.

Mit Javascript Inhalte weitergeben

paul schmitz

New member

matiro65

New member

paul schmitz

New member

matiro65

New member

paul schmitz

New member

kkapsner

Super Moderator

paul schmitz

New member

kkapsner

Super Moderator

paul schmitz

New member

kkapsner

Super Moderator

paul schmitz

New member

kkapsner

Super Moderator

paul schmitz

New member

kkapsner

Super Moderator

paul schmitz

New member

kkapsner

Super Moderator