✔ Tauschen von zwei 'onclicks' im IE

A

andy999mueller

Grünschnabel
Hey,

ich würde gerne die 'onclick'-events zweier elemente vertauschen. Der folgende Code funktioniert im Firefox einwandfrei:

Code: 
var tmpButton = button1.getAttribute('onclick');
button1.setAttribute('onclick', button2.getAttribute('onclick'));
button2.setAttribute('onclick', tmpButton);

Für den IE habe ich schon das folgende ausprobiert:
Code: 
var tmpButton = button1.onclick;
button1.onclick = button2.onclick;
button2.onclick = tmpButton;

Nach Ausführen des Codes im IE verlieren beide buttons ihr 'onclick' Attribut.

Wäre echt super, wenn ihr mit helfen könntet...


Mit freundlichen Grüßen

Andy
 
Ok, ich bin vielleicht dahintergekommen was du vor hast. Deshalb ursprüngliche Antwort gelöscht und dafür einen Lösungsvorschlag.


Javascript: 
<script language="javascript" type="text/javascript">
function test1() {
alert("Funktion 1");
}

function test2() {
alert("Funktion 2");
}

function change() {
document.getElementById("tmp").onclick = document.getElementById("button1").onclick;

document.getElementById("button1").onclick = document.getElementById("button2").onclick;
document.getElementById("button2").onclick  = document.getElementById("tmp").onclick;

document.getElementById("tmp").onclick = "";
}
</script>
<input type="button" id="button1" name="button1" value="Button 1" onclick="test1();"/>
<br />
<input type="button" id="button2" name="button2" value="Button 2" onclick="test2();"/>
<br />
<input type="button" name="change" value="Change"  onclick="change();"/>
<br />
<div id="tmp" onclick="" style="display: none;"></div>

Das Problem das du hast ist, das die Variable tmpButton nicht nur den Namen der Funktion bekommt sondern die komplette Funktion. Teste es mal indem du mit alert den Inhalt von tmpButton anzeigen lässt.

Wird die onclick-Eigenschaft direkt an eine andere onclick-Eigenschaft übergeben, dann geht es. In der obigen Lösung wird deshalb ein unsichtbarer DIV-Container als Zwischenstation benützt.

Es würde auch gehen wenn man ein Pseudo-Ereignis bei einem der Buttons erzeugt und diesem dann den Wert übergibt:

HTML: 
<input type="button" id="button1" name="button1" value="Button 1" onclick="test1();" tmp=""/>

Javascript: 
document.getElementById("button1").tmp = document.getElementById("button1").onclick
document.getElementById("button1").onclick = document.getElementById("button2").onclick;
document.getElementById("button2").onclick  = document.getElementById("button1").tmp;
document.getElementById("button1").tmp = "";

Ob das allerdiings den HTML Regeln entspricht?
 
Zuletzt bearbeitet:
Danke für deine Antwort. Ich will einfach <div> container in ihrer reihenfolge ändern. Wenn ich diese ändere muss ich natürlich auch die 'onclicks' tauschen...
 
Da ich meine erste Antwort geändert habe wärend du darauf geantwortet hast, pushe ich das jetzt damit du merkst das sich was getan hat.

Also meinen ersten Beitrag nochmal lesen!
 
Werde es mal ausprobieren, aber jetzt habe ich wenigstens einen Anhaltspunkt an dem es liegen könnte...

so wie es aussieht klappt es nicht...hab es in allen Varianten probiert. Wenn ich ein alert der 'onclicks' im Firefox ausgebe wird immer noch ein Eventhandler mit an die Funktion übergeben. Bei einem alert der 'onclicks' im IE wird eben dieser Eventhandler nicht mit übergeben. Könnte es daran liegen?
 
Wie sieht dein Code jetzt genau aus?

Bei mir getestet mit Firefox 14.01, Opera 12.01 und Internet Explorer 8. Hat überall funktioniert!
 
Zuletzt bearbeitet:
Code: 
function moveUp (order) {
	if(order == 1) {
		alert('You idiot you cant\'t move up the top element!');
		return false;
	}
	var orderbefore = order-1;
	var basediv = document.getElementById('JobDiv'+order);
	var divbefore = document.getElementById('JobDiv'+orderbefore);
	
	//Changing JobDiv ID's
	var tmpid = basediv.id;
	basediv.id = divbefore.id;
	divbefore.id = tmpid;
	
	//Getting SwitchUp/SwitchDown Buttons
	var baseUpButton = document.getElementById('SwitchUpButton'+order);
	var beforeUpButton = document.getElementById('SwitchUpButton'+orderbefore);
	
	var baseDownButton = document.getElementById('SwitchDownButton'+order);
	var beforeDownButton = document.getElementById('SwitchDownButton'+orderbefore); 
	
	//Changing onclick events from SwitchUp/SwitchDown Buttons
	var tmpbuttonid = baseUpButton.id;
	baseUpButton.id = beforeUpButton.id;
	beforeUpButton.id = tmpbuttonid;
	
	var tmpbuttonid = baseDownButton.id;
	baseDownButton.id = beforeDownButton.id;
	beforeDownButton.id = tmpbuttonid;
	
	
	var browser = navigator.appName;
	var result = browser.search(/Internet Explorer/);
	if (result != -1) {
		baseUpButton.onclick = function() {moveUp(orderbefore)};
		beforeUpButton.onclick = function() {moveUp(order)};
		
		baseDownButton.onclick = function() {moveUp(orderbefore)};
		beforeDownButton.onclick = function() {moveUp(order)};
		
	}
	else {
		var tmpButton = baseUpButton.getAttribute('onclick');
		baseUpButton.setAttribute('onclick', beforeUpButton.getAttribute('onclick'));
		beforeUpButton.setAttribute('onclick', tmpButton);
	
		var tmpButton = baseDownButton.getAttribute('onclick');
		baseDownButton.setAttribute('onclick', beforeDownButton.getAttribute('onclick'));
		beforeDownButton.setAttribute('onclick', tmpButton);
		
		changeNames(basediv,orderbefore);
		changeNames(divbefore,order);
	}
	//Clone BaseDiv
	var copyofbasediv = basediv.cloneNode(true);
	
	document.getElementsByTagName("form")[0].insertBefore ( copyofbasediv,divbefore);
	document.getElementsByTagName("form")[0].removeChild ( basediv );
	

}

Das ist der Code exemplarisch für das Hochschieben von Divs und vertauschen von deren onclicks...

Code: 
var browser = navigator.appName;
    var result = browser.search(/Internet Explorer/);
    if (result != -1) {
        baseUpButton.onclick = function() {moveUp(orderbefore)};
        beforeUpButton.onclick = function() {moveUp(order)};
        
        baseDownButton.onclick = function() {moveUp(orderbefore)};
        beforeDownButton.onclick = function() {moveUp(order)};
        
    }

vorallem hier muss es halt geändert werden...habe da echt schon alles probiert...
 
Schwierig für mich da die Ursache zu finden. Da ich nicht weiß was da verschoben wird (wie die Seite selber aussieht) kann ich den Code leider nicht testen.

Kannst du mal einen Screenshot der Seite machen damit ich weiß wie das aussieht. Dann vielleicht im Bild ein paar Bemerkungen dazu.
 
eigentlich sieht das ganze ziemlich einfach aus:
Code: 
<div id='JobDiv1'>
   <div id='SwitchUpButton1' onclick="javascript:moveUp(1)"></div>
   <div id='SwitchDownButton1' onclick="javascript:moveDown(1)"></div>
   <div>Bissle Inhalt im ersten Div</div>
</div>

<div id='JobDiv2'>
   <div id='SwitchUpButton2' onclick="javascript:moveUp(2)"></div>
   <div id='SwitchDownButton2' onclick="javascript:moveDown(2)"></div>
   <div>Bissle Inhalt im zweiten Div</div>
</div>

<div id='JobDiv3'>
   <div id='SwitchUpButton3' onclick="javascript:moveUp(3)"></div>
   <div id='SwitchDownButton3' onclick="javascript:moveDown(3)"></div>
   <div>Bissle Inhalt im dritten Div</div>
</div>
 
Zuletzt bearbeitet:
Also die jeweiligen "SwitchUpButton" und "SwitchDownButton" sind ja nur dazu da um die Funktion auszulösen.

Es soll ja eigentlich nur der Text des dritten und letzten DIV verschoben werden "Bissle Inhalt im ... DIV", oder? Dann ist das viel zu kompliziert.

Javascript: 
function moveUp(div) {
	if (div == 1) {
		alert("Nicht möglich.");
		return;
	}
	tmp = document.getElementById('text' + (div-1)).innerHTML;
	document.getElementById('text' + (div-1)).innerHTML = document.getElementById('text' + (div)).innerHTML;
	document.getElementById('text' + (div)).innerHTML = tmp;
}

function moveDown(div) {
	if (div == 3) {
		alert("Nicht möglich.");
		return;
	}
	tmp = document.getElementById('text' + (div+1)).innerHTML;
	document.getElementById('text' + (div+1)).innerHTML = document.getElementById('text' + (div)).innerHTML;
	document.getElementById('text' + (div)).innerHTML = tmp;
}

Hier bitte auf beachten wie bei onclick die Funktion aufgerufen wird und das beim letzten DIV (der mit dem Text) eine zusätzliche ID angegeben wurde!
HTML: 
<div id='JobDiv1'>
   <div id='SwitchUpButton1' onclick="moveUp(1);">+</div>
   <div id='SwitchDownButton1' onclick="moveDown(1);">-</div>
   <div id="text1">Bissle Inhalt im ersten Div</div>
</div>

<div id='JobDiv2'>
   <div id='SwitchUpButton2' onclick="moveUp(2);">+</div>
   <div id='SwitchDownButton2' onclick="moveDown(2);">-</div>
   <div id="text2">Bissle Inhalt im zweiten Div</div>
</div>

<div id='JobDiv3'>
   <div id='SwitchUpButton3' onclick="moveUp(3);">+</div>
   <div id='SwitchDownButton3' onclick="moveDown(3);">-</div>
   <div id="text3">Bissle Inhalt im dritten Div</div>
</div>

Da die "Buttons" bei mit nicht zu sehen waren habe ich überall ein "+" für Up und ein "-" für Down eingetragen. In den bereits oben genannten Browsern erfolgrewich getestet!
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück