HTML Funktion starten, wenn Element sichtbar wird

Squicky

Lt. Commander
Registriert
Sep. 2002
Beiträge
1.401
Hallo

Ich habe nur (sehr) wenig Webentwicklung und HTML Erwahrung.
Ich möchte auf einer für mich großen und komplexen Seite eine kleine Änderung machen.
Um mein Problem leichter zu erklären habe ich eine kleine (dumme) Beispielseite geschrieben.

Die Seite hat ein select combobox Auswahlfeld und zwei Tabellen (tableA und tableB)
Die Tabellen sind in einem div.
Am Anfang sind die Tabellen bzw. ihre div per css ausgeblendet (display: none ) .
Es gibt zwei scriptteile.
Mit dem select Auswahlfeld kann man eine, beide oder keine der Tabellen bzw. divs anzeigen. Diese Funktion befindet sich im erstem scriptteil.

Es kann nur nur der zweite scriptteil geändert werden.

Aufgabe / Problem:
Allgemein:
Eine Funktion soll gestartet werden, wenn ein Element sichbar wird.
Diese Funktion soll nachträglich per Javascript an das Elelent hinzugefügt werden.

Am Beispiel:
Jedes Mal wenn tableA eingeblendet wird, soll tableB die Hintergrundfarbe ändern (z.B. blau / rot).
Meine Idee war es, eine "Event-Funktion" oder so im 2. scriptteil hinzuzufügen und an tableA zu binden (onshow, ondisplay, on...).
Leider habe ich keine Ahnung wie man dies machen könnte

:-(

HTML:
<!DOCTYPE html>
<html>
<head>

<style>

  table, th, td {
      border: 1px solid black;
  }

#tableA {
      display: none;
  }

#tableB {
      display: none;
  }

</style>

<title>Page Title</title>
</head>
<body>

<select id="abc">
  <option value="-">-</option>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="A+B">A+B</option>
</select>


<script>
//scriptteil 1
document.getElementById("abc").addEventListener("change", myFunction);

function myFunction() {
    var x = document.getElementById("abc").value;

    if (x == "A") {
        document.getElementById("tableA").style.display = 'block';
        document.getElementById("tableB").style.display = 'none';
    }

    if (x == "B") {
        document.getElementById("tableA").style.display = 'none';
        document.getElementById("tableB").style.display = 'block';
    }

    if (x == "A+B") {
        document.getElementById("tableA").style.display = 'block';
        document.getElementById("tableB").style.display = 'block'; 
    }

    if (x == "-") {
        document.getElementById("tableA").style.display = 'none';
        document.getElementById("tableB").style.display = 'none';
    }

}
</script>


<script>
//scriptteil 2


//Aufgabe: Jedes Mal wenn tableA eingeblendet wird, soll tableB die Hitnergrund Farbe ändern (z.B. blau / rot)

</script>


<br>
<br>

<div>
<div>

<div id="tableA">

<table style="width:100%;">
  <tr>
    <th>A1</th>
    <th>A2</th>
    <th>A3</th>
  </tr>
  <tr>
    <td>12</td>
    <td>234</td>
    <td>3</td>
  </tr>
  <tr>
    <td>223</td>
    <td>32</td>
    <td>253</td>
  </tr>
</table>

</div>


<br>
<br>

<div id="tableB">

<table style="width:100%;">
  <tr>
    <th>B1</th>
    <th>B2</th>
    <th>B3</th>
  </tr>
  <tr>
    <td>1342</td>
    <td>2334</td>
    <td>33</td>
  </tr>
  <tr>
    <td>2323</td>
    <td>332</td>
    <td>2353</td>
  </tr>
</table>

</div>

</div>
</div>



</body>
</html>
 
Zuletzt bearbeitet:
Also entweder versteh ich nicht, was du willst, oder die Lösung ist einfacher als du denkst.

Ich zähle einfach die Aufrufe von Tabelle A mit einem Counter und entscheide dann jenachdem obs gerade oder ungerade ist, welche Farbe B als Hintergrund hat.

HTML:
<!DOCTYPE html>
<html>
<head>

<style>

  table, th, td {
      border: 1px solid black;
  }

#tableA {
      display: none;
  }

#tableB {
      display: none;
  }

</style>

<title>Page Title</title>
</head>
<body>

<select id="abc">
  <option value="-">-</option>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="A+B">A+B</option>
</select>


<script>
//scriptteil 1
document.getElementById("abc").addEventListener("change", myFunction);

var tableAonCount = 0;

function myFunction() {
    var x = document.getElementById("abc").value;

    if (x == "A") {
        document.getElementById("tableA").style.display = 'block';
        document.getElementById("tableB").style.display = 'none';
        tableAonCount++;
    }

    if (x == "B") {
        document.getElementById("tableA").style.display = 'none';
        document.getElementById("tableB").style.display = 'block';
    }

    if (x == "A+B") {
        document.getElementById("tableA").style.display = 'block';
        document.getElementById("tableB").style.display = 'block';
        tableAonCount++;
    }

    if (x == "-") {
        document.getElementById("tableA").style.display = 'none';
        document.getElementById("tableB").style.display = 'none';
    }
    
    //scriptteil 2
    if (tableAonCount % 2 == 0){
        document.getElementById("tableB").style.backgroundColor = '#FF0000';
    }else{
        document.getElementById("tableB").style.backgroundColor = '#0000FF';
    }

}

</script>


<br>
<br>

<div>
<div>

<div id="tableA">

<table style="width:100%;">
  <tr>
    <th>A1</th>
    <th>A2</th>
    <th>A3</th>
  </tr>
  <tr>
    <td>12</td>
    <td>234</td>
    <td>3</td>
  </tr>
  <tr>
    <td>223</td>
    <td>32</td>
    <td>253</td>
  </tr>
</table>

</div>


<br>
<br>

<div id="tableB">

<table style="width:100%;">
  <tr>
    <th>B1</th>
    <th>B2</th>
    <th>B3</th>
  </tr>
  <tr>
    <td>1342</td>
    <td>2334</td>
    <td>33</td>
  </tr>
  <tr>
    <td>2323</td>
    <td>332</td>
    <td>2353</td>
  </tr>
</table>

</div>

</div>
</div>



</body>
</html>
 
p4cx schrieb:
Ich zähle einfach die Aufrufe von Tabelle A mit einem Counter und entscheide dann jenachdem obs gerade oder ungerade ist, welche Farbe B als Hintergrund hat.
Wozu zählen? Man kann die Farbe auf Basis der aktuellen Farbe wechseln.

@blablub1212
Meines Wissens ist ein Observer sinnvoll, wenn ich auf Veränderungen eines anderen DOM-Objektes reagieren will. Einen Event Listener dagegen setze ich ein, wenn ich auf Änderungen des eigenen DOM-Objectes reagieren will. Beide Pattern haben also einen abweichenden Zweck.
 
@p4cx

Du hast scriptteil1 und 2 zusammen gefasst.
Das ist nicht möglich:
Es gibt zwei scriptteile.
Es kann nur nur der zweite scriptteil geändert werden.


Das ein- und ausblenden der Tabelle (div) wird im erstem scriptteil durchgeführt.
Du darf aber nur im zweitem schriptteil etwas hinzufügen, dass auf das aus- und einblenden reakiert.
 
@Squicky
Diese Anforderungen muten stark nach Hausaufgabe an.

Du hast zwei Möglichkeiten. Entweder nutzt Du einen Observer wie von blablubb12 vorgeschlagen oder Du ersetzt den Event Listener aus scriptteil1. (Ein großer Vorteil der Event Listener ist es, dass man sie zur Laufzeit ändern kann.) Dies ist notwendig, da es keinen Event Listener (mehr) für Attributsänderungen gibt
 
@Andreas_ Ja, es mutet wirklich nach Hausaufgabe an, aber jetzt habs ich schnell gemacht.

@Squicky
Funktioniert, ist aber hässlich:

HTML:
<!DOCTYPE html>
<html>
<head>

<style>

  table, th, td {
      border: 1px solid black;
  }

#tableA {
      display: none;
  }

#tableB {
      display: none;
  }

</style>

<title>Page Title</title>
</head>
<body>

<select id="abc">
  <option value="-">-</option>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="A+B">A+B</option>
</select>


<script>
//scriptteil 1
document.getElementById("abc").addEventListener("change", myFunction);

function myFunction() {
    var x = document.getElementById("abc").value;

    if (x == "A") {
        document.getElementById("tableA").style.display = "block";
        document.getElementById("tableB").style.display = "none";
    }

    if (x == "B") {
        document.getElementById("tableA").style.display = "none";
        document.getElementById("tableB").style.display = "block";
    }

    if (x == "A+B") {
        document.getElementById("tableA").style.display = "block";
        document.getElementById("tableB").style.display = "block";
    }

    if (x == "-") {
        document.getElementById("tableA").style.display = "none";
        document.getElementById("tableB").style.display = "none";
    }

}
</script>


<script>

window.onload = function(){
document.getElementById("abc").addEventListener("change", backgroundColorTable);

function backgroundColorTable() {
    var x = document.getElementById("abc").value;

    switch(x){
        case "A":
            backgroundColorChanger();
            break;
        case "B":
            break;
        case "A+B":
            backgroundColorChanger();
            break;
        default:
            break;
    }
}

function backgroundColorChanger(){

    if(document.getElementById("tableB").style.backgroundColor.toString() == "rgb(255, 0, 0)"){
        document.getElementById("tableB").style.backgroundColor = "#0000FF";
    }else{
        document.getElementById("tableB").style.backgroundColor = "#FF0000";

    }

}

};

</script>


<br>
<br>

<div>
<div>

<div id="tableA">

<table style="width:100%;">
  <tr>
    <th>A1</th>
    <th>A2</th>
    <th>A3</th>
  </tr>
  <tr>
    <td>12</td>
    <td>234</td>
    <td>3</td>
  </tr>
  <tr>
    <td>223</td>
    <td>32</td>
    <td>253</td>
  </tr>
</table>

</div>


<br>
<br>

<div id="tableB">

<table style="width:100%;">
  <tr>
    <th>B1</th>
    <th>B2</th>
    <th>B3</th>
  </tr>
  <tr>
    <td>1342</td>
    <td>2334</td>
    <td>33</td>
  </tr>
  <tr>
    <td>2323</td>
    <td>332</td>
    <td>2353</td>
  </tr>
</table>

</div>

</div>
</div>



</body>
</html>

Übung macht den Meister, einfach ausprobieren - nur so lernt man es.
 
Zurück
Oben