• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

document.write + Funktion

P

psygonis

New member
gleich zu Anfang mein Test-Code
Code: 
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <script type="text/javascript" src="admin/js/ajax.js"></script>
  <script type="text/javascript" src="admin/js/all.js"></script>


  <style type="text/css">
  /*slider*/
  .outClass {
    background-color: #CCCCCC;
  }
  .slideClass {
    position: rellative;
    background-color: #333333;
    float: left;
    margin-top: 2px;
    margin-bottom: 2px;
  }

  </style>

  <script type="text/javascript">

  function test(obj){
    alert(obj.id);
    }

  function getSlider(outWidt, outHeight, outClass, slideClass1, slideID, slideWidth, slideHeight){
    if(!slideID || slideID == ""){slideID = "tempSlide_XY"}
    document.write("<div style='border: solid 1px #000000; width:" + outWidt + "px; height:" + outHeight + "px;' id='" + slideID + "' >\n");
      document.write("<div id='slideSquare' style='border: solid 1px #000000; width:" + slideWidth + "px; height:" + slideHeight + "px;' ");
      document.write("onmousedown='test(this);' >\n");
      document.write(" </div>\n");
    document.write("</div>\n");
    window.document.getElementById(slideID).style.className = outClass;
    window.document.getElementById('slideSquare').style.className = slideClass;
    }


  </script>

</head>

<body onload="getSlider(400, 20, 'outClass', 'slideClass', 'abdc_slide', 16, 16);">




</body>

</html>

Es ist sicher klar, was ich damit ausgeben wollte. Ein div in einem anderen. Beiden soll eine style Klasse zugewiesen werden. Der innere Div soll bei onmousedown eine Funktion auslösen.
Leider werden weder die style Klassen zugewiesen, noch wird die Funktion gestartet.
Meine Frage, warum? Wenn ich mir den generierten Quelltext ansehe,
Code: 
<div style='border: solid 1px #000000; width:400px; height:20px;' id='abdc_slide' >
<div id='slideSquare' style='border: solid 1px #000000; width:16px; height:16px;' onmousedown='test(this);' >
 </div>
</div>
sieht der durchaus richtig aus. Warum funktionieren dann die Zuweisungen und der Start von der Funktion test() nicht?
Hängt das mit dem document.write() zusammen? Wie kann man das dann lösen?
 
Warum arbeitest du mit document.write()? innerHTML würde ich immer vorziehen, weil document.write() Nebenwirkungen hat.
 
- - - Aktualisiert - - -

Ich habe das jetzt nochmal mit innerHTML überarbeitet, da wird zumindest jetzt das Script bei onmousover ausgeführt. Ich möchte den innern Div verschiebbar haben. Deshalb die Erweiterung der Javascripte. Leider funktioniert das immer noch nicht, da anscheinend debugInit nicht so ganz klappt. Es ist, als würde das nicht ausgeführt. Ich fürchte allerdings, das hängt eher damit zusammen, dass Code in dem Div per innerHTML ja erst zusätzlich auf die Seite eingefügt wird und somit von dem bereits vorhandenem nix weiß. Wie aber bekomme ich das hin, das auch das Ergebnis von debugInit() von meiner über innerHTML eingefügten Funktion nutzbar wird? Und die Style Klassen Zuweisung klappt auch nicht. Da fällt mir auch nix dazu ein.

Code: 
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>

  <style type="text/css">
  /*slider*/
  .outClass {
    background-color: #CCCCCC;
  }
  .slideClass {
    position: rellative;
    background-color: #333333;
    float: left;
    margin-top: 2px;
    margin-bottom: 2px;
  }

  </style>

  <script type="text/javascript">
  var objDrag = null;        // Element, über dem Maus bewegt wurde

  var mouseX      = 0;                // X-Koordinate der Maus
  var mouseY      = 0;                // Y-Koordinate der Maus

  var offX = 0;                    // X-Offset des Elements, das geschoben werden soll
  var offY = 0;                    // Y-Offset des Elements, das geschoben werden soll

  // Browserweiche
  IE = document.all&&!window.opera;
  DOM = document.getElementById&&!IE;

  // Initialisierungs-Funktion
  function debugInit(){
    // Initialisierung der Überwachung der Events
    document.onmousemove = doDrag;
    document.onmouseup = stopDrag;
    }

  // Wird aufgerufen, wenn die Maus über einer Box gedrückt wird
  function startDrag(objElem) {
    // Objekt der globalen Variabel zuweisen, hierdurch wird Bewegung möglich
    objDrag = objElem;

    // Offsets im zu bewegenden Element ermitteln
    offX = mouseX - objDrag.offsetLeft;
    offY = mouseY - objDrag.offsetTop;

    }

  // Wird ausgeführt, wenn die Maus bewegt wird
  function doDrag(ereignis) {
    // Aktuelle Mauskoordinaten bei Mausbewegung ermitteln
    mouseX = (IE) ? window.event.clientX : ereignis.pageX;
    mouseY = (IE) ? window.event.clientY : ereignis.pageY;

    // Wurde die Maus über einem Element gedrück, erfolgt eine Bewegung
    if (objDrag != null) {
      // Element neue Koordinaten zuweisen
      objDrag.style.left = (mouseX - offX) + "px";
      objDrag.style.top = (mouseY - offY) + "px";

      // Position in Statusleiste ausgeben
        window.status = "Box-Position: " + objDrag.style.left + ", " + objDrag.style.top;
      }
    }

  // Wird ausgeführt, wenn die Maustaste losgelassen wird
    function stopDrag(ereignis) {
      // Objekt löschen - beim Bewegen der Maus wird Element nicht mehr verschoben
      objDrag = null;
      }

  function test(obj){
    alert(obj.id);
    }

   function getSlider(outClass, slideClass, slideID, slideWidth, slideHeight){
    if(!slideID || slideID == ""){slideID = "tempSlide_XY";}
    var text = "";
    text += "<div style='border: solid 1px #000000; width:100%; height:100%' id='" + slideID + "' >\n";
    text += "<div id='slideSquare' style='border: solid 1px #000000; width:" + slideWidth + "px; ";
    text += "height:" + slideHeight + "px;' onmousedown='startDrag(this);' >\n";
    text += "</div>\n";
    text += "</div>\n";

    window.document.getElementById('abdc_slide_out').innerHTML = text;

    window.document.getElementById(slideID).style.className = outClass;
    window.document.getElementById('slideSquare').style.className = slideClass;
    }


  </script>

</head>

<body onload="debugInit(); getSlider('outClass', 'slideClass', 'abdc_slide', 16, 16);">

  <div style='border: none; width:400px; height:20px;' id='abdc_slide_out' > </div>

</body>

</html>
 
OK, Komando zurück. Ich hatte Position: absolute vergessen, sorry. Das Verschieben klappt jetzt.
Aber die Zuweisung der Style Klassen klappt noch immer nicht. Kann mir das jemand erklären?

- - - Aktualisiert - - -

hesst schrieb:
weil die funktion test im originaldocument vorhanden ist, wenn du aber ein neues document öffnest, diese dort nicht mehr existiert
Zum Vergrößern anklicken....

schreibt denn document.write() nicht in das aktuelle Dokument???
 
hesst schrieb:
https://developer.mozilla.org/en-US/docs/Web/API/document.write#Notes
https://developer.mozilla.org/en-US/docs/Web/API/document.open#Notes
Zum Vergrößern anklicken....
Naja, ich sehe da nichts, was da nicht passen sollte.
If the document.write() call is embedded directly in the HTML code, then it will not call document.open().
bedeutet ja wohl, dass kein neues Dokument geöffnet wird, also wird in das aktuelle Dokument geschrieben, folglich müssten auch meine Funktionen verfügbar sein
 
Writing to a document that has already loaded without calling document.open() will automatically perform a document.open call. Once you have finished writing, it is recommended to call document.close(), to tell the browser to finish loading the page.
Zum Vergrößern anklicken....
10 zeichen
 
Danke erst mal für die Hilfe. Werde wohl auf document.write verzichten. So schlimm ist das auch nicht. Fehlerkonsole habe ich nicht offen, weil ich die Seite direkt in dem Editor anzeigen lasse. Müsste ich wohl mal den Browser hinzuziehen. Bleibt noch die Frage offen, wieso die Klassen nicht verwendet werden.

Code: 
function getSlider(outClass, slideClass, slideID, slideWidth, slideHeight){
    if(!slideID || slideID == ""){slideID = "tempSlide_XY";}
    var text = "";
    text += "<div style='border: solid 1px #000000; width:100%; height:100%' id='" + slideID + "' >\n";
    text += "<div id='slideSquare' style='border: solid 1px #000000; width:" + slideWidth + "px; ";
    text += "height:" + slideHeight + "px;' onmousedown='startDrag(this);' >\n";
    text += "</div>\n";
    text += "</div>\n";

    window.document.getElementById('abdc_slide_out').innerHTML = text;

    window.document.getElementById(slideID).style.className = outClass;
    window.document.getElementById('slideSquare').style.className = slideClass;
    }
ist ja nur das stück code, was dafür verantwortlich zeigt, da ist nicht viel dran, was man falsch machen könnte
 
hesst schrieb:
10 zeichen
Zum Vergrößern anklicken....
Du machst das manchmal und ich verstehe nicht, was du damit sagen willst. Das Zitat ist klar, aber was willst du mit "10 zeichen" sagen?

psygonis schrieb:
Werde wohl auf document.write verzichten.
Zum Vergrößern anklicken....
Gute Entscheidung. Genau wegen solchen Problemen rate ich Anfängern immer von der Benutzung von document.write() ab.

mikdoe schrieb:
Weil className ohne vorheriges style zugewiesen wird.
Zum Vergrößern anklicken....
Das erzeugt das Problem, aber ein Syntaxfehler ist das trotzdem nicht. Das ist noch nicht einmal ein Laufzeitfehler - da wird gar keine Fehlermeldung erzeugt, da einfach dem .style-Objekt eine neue Eigenschaft "className" gegeben wird.

Richtig:
Code: 
    document.getElementById(slideID).className = outClass;
    document.getElementById('slideSquare').className = slideClass;
 
kkapsner schrieb:
Das erzeugt das Problem, aber ein Syntaxfehler ist das trotzdem nicht. Das ist noch nicht einmal ein Laufzeitfehler - da wird gar keine Fehlermeldung erzeugt, da einfach dem .style-Objekt eine neue Eigenschaft "className" gegeben wird.
Zum Vergrößern anklicken....
Ah OK, hatte es nicht getestet aber falsch ist es höchstwahrscheinlich trotzdem ;)
Und meine Bitte, immer im Browser mit Fehlerkonsole zu testen bleibt natürlich auch bestehen, auch wenn das hier vielleicht nicht sofort zum Ziel geführt hätte.
 
mikdoe schrieb:
aber falsch ist es höchstwahrscheinlich trotzdem
Zum Vergrößern anklicken....
Natürlich.
mikdoe schrieb:
auch wenn das hier vielleicht nicht sofort zum Ziel geführt hätte.
Zum Vergrößern anklicken....
Das sind immer die fiesesten Fehler, wenn man nichts in der Konsole sieht.

hesst schrieb:
man muss mindestens 10 zeichen angeben damit man posten kann, ein zitat zählt nicht
Zum Vergrößern anklicken....
Ach so... hatte das irgendwie immer auf das Zitat bezogen und den Sinn nicht erkannt. Aber jetzt ist es klar - wobei ich im Kopf habe, dass das früher auch schon mal mit einem einzigen Zeichen funktioniert hat.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben