HTML Funktion starten, wenn Element sichtbar wird

Squicky · 18. Mai 2018

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>

p4cx · 18. Mai 2018

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>

blablub1212 · 18. Mai 2018

Es gab früher mal einen Event der auf DOM Changes gehört hat. Inzwischen nutzt man für sowas Observers. Für deine Problemstellung würde ich folgendes nutzen: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver (Ein Beispiel findest du dort ebenfalls).

Andreas_ · 18. Mai 2018

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.

Squicky · 18. Mai 2018

@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.

Andreas_ · 18. Mai 2018

@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

p4cx · 18. Mai 2018

@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.

Suche

HTML Funktion starten, wenn Element sichtbar wird

Squicky

Lt. Commander

p4cx

Ensign

blablub1212

Rear Admiral

Andreas_

Commander

Squicky

Lt. Commander

Andreas_

Commander

p4cx

Ensign

Ähnliche Themen