Javascript-forum
Portal

Durchsuche Foren

(Erweiterte Suche)

Foren-Statistiken
» Mitglieder: 43.433
» Neuestes Mitglied: seekerpleasure
» Foren-Themen: 506
» Foren-Beiträge: 2.098

Komplettstatistiken

Benutzer Online
Momentan sind 82 Benutzer online
» 1 Mitglieder
» 78 Gäste
Applebot, Bing, Facebook, glazecars

Aktive Themen
div(tabelle) neugeladen b...
Forum: Javascript
Letzter Beitrag: black79
Gestern, 16:40
» Antworten: 4
» Ansichten: 60
What are the psychologica...
Forum: Css
Letzter Beitrag: azaviona
Gestern, 07:58
» Antworten: 0
» Ansichten: 15
Ajax Abfrage
Forum: Php
Letzter Beitrag: taxlegit24
25.04.2024, 06:43
» Antworten: 3
» Ansichten: 368
Probleme Firebase Databas...
Forum: Javascript
Letzter Beitrag: PrimoCenturio
22.04.2024, 14:15
» Antworten: 4
» Ansichten: 132
Verbindung von Entscheidu...
Forum: Javascript
Letzter Beitrag: Ashriel
16.04.2024, 11:02
» Antworten: 3
» Ansichten: 122
Neu laden ohne Scrolling
Forum: Javascript
Letzter Beitrag: Tom
16.04.2024, 08:48
» Antworten: 0
» Ansichten: 40
Formularfelder addieren u...
Forum: Javascript
Letzter Beitrag: heena123
16.04.2024, 08:03
» Antworten: 17
» Ansichten: 385
FMOVIES
Forum: Javascript
Letzter Beitrag: xomanig690
16.04.2024, 07:07
» Antworten: 0
» Ansichten: 44
Spam gelöscht
Forum: Ankündigungen,Neuigkeiten
Letzter Beitrag: rzscout
10.04.2024, 23:37
» Antworten: 0
» Ansichten: 181
Reihenfolge der Karten
Forum: Brauche Javascript / Userscript
Letzter Beitrag: hardee
10.04.2024, 17:54
» Antworten: 4
» Ansichten: 124

  Probleme mit Canvas
Geschrieben von: Derbestetv - 25.03.2024, 13:54 - Forum: Javascript - Antworten (5)

Hallo ich habe ein Problem mit canvas 
hier ist der code da hab ich kommentiert welche zeilen der fehler macht
(ich weiß ich bin kein profi und das mit dem einrücken muss ich noch machen das ist je erstmal nur ein test)

Code:
function layout(ctx,x,y,typ,name,richtung,color_top,color_bottom,color_weiche){
console.log(x+" "+y+" "+color_top)
//ctx.fillStyle = '#8b8c7a'; // Roter Hintergrund
//    ctx.fillRect(x+ 1, y+ 1, 139, 71);
if (typ == "Signal"){
    if (richtung == "0"){

console.log("test")
}else{
    ctx.fillStyle = color_top;
            ctx.beginPath();
            ctx.fillRect(x + 1, y + 1, 139, 30);


            ctx.fillStyle = color_bottom;
            ctx.beginPath();
            ctx.fillRect(x + 1, y + 30, 139, 41);

            var xh = x + 120;
            var yh = y + 56;
            ctx.fillStyle = "#000000";
                    ctx.beginPath();
                    ctx.fillRect(xh - 85, yh - 11, 42, 22);

                    ctx.fillStyle = "#FFFFFF";
                    ctx.beginPath();
                    ctx.fillRect(xh - 84, yh - 10, 40, 20);


                    ctx.fillStyle = "#000000";
                    ctx.font = "bold 12px Arial";
                    var width = ctx.measureText(name).width;
                    ////("_______________________");
                    ////(width);
                    ////("_______________________");
                    ctx.fillText(name, xh - 57 - width, yh + 4);
                    var xd = xh + 1;

                    ctx.fillStyle = "#000000";
                    ctx.beginPath();
                    ctx.arc(xd - 30, yh - 40, 7, 300, Math.PI * 2 / 4, false);
                    ctx.fill();
                    ctx.beginPath();
                    ctx.fillRect(xd - 100, yh - 47, 70, 14);
                    ctx.fill();
                    ctx.beginPath();
                    ctx.arc(xd - 100, yh - 40, 7, 900, Math.PI * 2 / 1.3, false);
                    ctx.fill();
                    ctx.beginPath();
                    ctx.fillRect(xd - 25, yh - 42, 10, 4);
                    ctx.fill();
                    ctx.beginPath();
                    ctx.fillRect(xd - 15, yh - 47, 5, 14);
                    var xs = xd - 30;
                    var ys = yh + 4;
ctx.fillStyle = "#000000";
ctx.beginPath();
ctx.arc(xh, yh, 5, 1, Math.PI * 2 / 0.1, false);
ctx.arc(xd, yh - 40, 5, 1, Math.PI * 2 / 0.1, false);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = "#000000";
ctx.fillRect(xd - 120, yh - 25, 139, 10);
ctx.fill();







    ctx.beginPath();
    //ctx.arc(xd, yh, 3.5, 1, Math.PI * 2 / 0.1, false);
    ctx.arc(xd - 78, yh - 40, 5, 1, Math.PI * 2 / 0.1, false);
    ctx.arc(xd - 98, yh - 40, 5, 1, Math.PI * 2 / 0.1, false);

    //ctx.arc(xh, yh, 3.5, 1, Math.PI * 2 / 0.1, false);

    //ctx.arc(xd, yh - 40, 3.5, 1, Math.PI * 2 / 0.1, false);
//ctx.moveTo(xs, ys - 40);
//ctx.lineTo(xs - 8, ys - 48);
//ctx.lineWidth = 3;


ctx.arc(xd, yh, 3.5, 1, Math.PI * 2 / 0.1, false);//diese Zeile und die darunter siend die die das problem verursachen
ctx.arc(xd, yh - 40, 3.5, 1, Math.PI * 2 / 0.1, false);

ctx.moveTo(xd - 30, yh + 4);
                    ctx.lineTo(xd - 40, yh - 0);
                    ctx.lineTo(xd - 30, yh - 4);

ctx.rect(xd - 70, yh - 22, 40, 4);

ctx.arc(xd - 70, yh - 20, 2, 900, Math.PI * 2 / 1.3, false);
ctx.arc(xd - 30, yh - 20, 2, 300, Math.PI * 2 / 4, false);

    ctx.closePath();
    ctx.clip();
}
}
}
Hier ist das Bild von dem Fehler

Drucke diesen Beitrag

  HTML Tabelle filtern + Navigation mit Pfeiltasten
Geschrieben von: anfaenger - 23.03.2024, 17:20 - Forum: Javascript - Antworten (1)

Hallo zusammen,

ich würde mir gerne eine "Link-Liste" in HTML erstellen. In dieser möchte ich alle für mich wichtigen Links eintragen. 
Wenn ich die HTML Seite aufrufe, möchte ich ein Textfeld haben, in dem ich die Tabelle nach dem Suchtext filtern kann.

Soweit habe ich das - als blutiger Anfänger - auch schon zusammen-ge-googelt...  Shy

Code:
<!DOCTYPE html>
<html>
<head>
    <title>Linkliste</title>
<style>
    <!-- color every other table cell background-->
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  text-align: left;
  padding: 10px;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 
}

th {text-align:center}

tr:nth-child(even) {background-color: #adadad;}
tr:nth-child(odd) {background-color: #dad8d8;}
</style>


</head>
<body>

    <script>
        function searchTable() {
            var input, filter, found, table, tr, td, i, j;
            input = document.getElementById("FilterText");
            filter = input.value.toUpperCase();
            table = document.getElementById("URLTable");
            tr = table.getElementsByTagName("tr");
            for (i = 1; i < tr.length; i++) {
                td = tr[i].getElementsByTagName("td");
                for (j = 0; j < td.length; j++) {
                    if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
                        found = true;
                    }
                }
                if (found) {
                    tr[i].style.display = "";
                    found = false;
                } else {
                    tr[i].style.display = "none";
                }
            }
        }
        </script>


    <center>
<h1>LINK LISTE</h1>
<p><i>lorem ipsum</i></p>
</center>

<p><br></p>
<p><strong> Filter:</strong>    <input id='FilterText' onkeyup='searchTable()' type='text'autofocus> <button onclick=location.reload()>Clear input field</button> </p>
<p>  </p>
<p><br></p>
<table id='URLTable'>
   
        <tr>
            <th>A</th>
            <th>B</th>
            <th>C</th>
            <th>D</th>
            <th>COMMENTS / NOTES</th>
        </tr>
   
    <tbody>
        <tr style=" cursor: pointer;" onclick="window.open('https://www.google.de')">
            <td>Germany</td>
            <td>Earth</td>
            <td>search01.google.com</td>
            <td>physical x86 Server</td>
            <td>Testing</td>
        <tr/>                                             
        <tr style=" cursor: pointer;" onclick="window.open('https://www.google.de')">
            <td>Germany</td>
            <td>Earth</td>
            <td>search02.google.com</td>
            <td>physical x86 Server</td>
            <td>Testing</td>
        <tr/>          
        <tr style=" cursor: pointer;" onclick="window.open('https://www.google.de')">
            <td>Germany</td>
            <td>Earth</td>
            <td>search03.google.com</td>
            <td>Virtual Machine</td>
            <td>Testing</td>
        <tr/>                                                                                
        </tbody>   
</table>

</body>
</html>

Der nächste Schritt wäre, dass ich - nachdem ich gefiltert habe - mit den Pfeiltasten den richtigen Eintrag auswählen kann, und den Link dann mit ENTER aufrufen kann.

Das will aber nicht so recht funktionieren. Da ich nicht wirklich programmieren kann, sondern eher "Fundstücke" irgendwie zuammen würfele, sieht der aktuelle Code ("verschönert" durch den Bing CoPilot) im Moment so aus:

Code:
<!DOCTYPE html>
<html>
<head>
    <title>Link Liste</title>
<style>
    <!-- color every other table cell background-->
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  text-align: left;
  padding: 10px;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 
}

th {text-align:center}

tr:nth-child(even) {background-color: #adadad;}
tr:nth-child(odd) {background-color: #dad8d8;}
</style>


</head>
<body>

    <script>
        var selectedRow = null;

        function searchTable() {
            var input, filter, found, table, tr, td, i, j;
            input = document.getElementById("FilterText");
            filter = input.value.toUpperCase();
            table = document.getElementById("URLTable");
            tr = table.getElementsByTagName("tr");
            for (i = 1; i < tr.length; i++) {
                td = tr[i].getElementsByTagName("td");
                for (j = 0; j < td.length; j++) {
                    if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
                        found = true;
                    }
                }
                if (found) {
                    tr[i].style.display = "";
                    found = false;
                } else {
                    tr[i].style.display = "none";
                }
            }
        }

        function selectRow(row) {
            if (selectedRow) {
                selectedRow.style.backgroundColor = "";
            }
            selectedRow = row;
            selectedRow.style.backgroundColor = "yellow";


        document.getElementById("FilterText").addEventListener("keydown", function(event) {
            if (["ArrowDown", "ArrowUp", "Enter"].includes(event.key)) {
                navigateTable(event);
            }
        });
        function attachKeydownToRows() {
        var table = document.getElementById("URLTable");
        var cells = Array.from(table.getElementsByTagName("td"));
        cells.forEach(cell => {
            cell.addEventListener("keydown", function(event) {
                if (["ArrowDown", "ArrowUp", "Enter"].includes(event.key)) {
                    navigateTable(event);
                }
            });
        });
    }

        function navigateTable(event) {
            var table = document.getElementById("URLTable");
            var rows = Array.from(table.getElementsByTagName("tr")).filter(row => row.style.display !== "none");
            var currentIndex = rows.indexOf(selectedRow);
            if (event.key === "ArrowDown") {
                if (currentIndex < rows.length - 1) {
                    selectRow(rows[currentIndex + 1]);
                }
            } else if (event.key === "ArrowUp") {
                if (currentIndex > 0) {
                    selectRow(rows[currentIndex - 1]);
                }
            } else if (event.key === "Enter" && selectedRow) {
                selectedRow.click();
            }
        }
    }


    </script>

    <center>
<h1>LINK LISTE</h1>
<p><i>lorem ipsum</i></p>
</center>

<p><br></p>
<p><strong> Filter:</strong>    <input id='FilterText' onkeyup='searchTable()' type='text'autofocus> <button onclick=location.reload()>Clear input field</button> </p>
<p>  </p>
<p><br></p>
<table id='URLTable'>
   
        <tr>
            <th>A</th>
            <th>B</th>
            <th>C</th>
            <th>D</th>
            <th>COMMENTS / NOTES</th>
        </tr>
   
    <tbody>
        <tr tabindex="0" style=" cursor: pointer;" onclick="window.open('https://www.google.de')">
            <td>Germany</td>
            <td>Earth</td>
            <td>search01.google.com</td>
            <td>physical x86 Server</td>
            <td>Testing</td>
        <tr/>                                             
        <tr tabindex="0" style=" cursor: pointer;" onclick="window.open('https://www.google.de')">
            <td>Germany</td>
            <td>Earth</td>
            <td>search02.google.com</td>
            <td>physical x86 Server</td>
            <td>Testing</td>
        <tr/>          
        <tr tabindex="0" style=" cursor: pointer;" onclick="window.open('https://www.google.de')">
            <td>Germany</td>
            <td>Earth</td>
            <td>search03.google.com</td>
            <td>Virtual Machine</td>
            <td>Testing</td>
        <tr/>                                                                                
        </tbody>   
</table>

</body>
</html>

Als Fortschritt sehe ich schon einmal an, dass ich jetzt aus dem Input-Field mit TABULAR in die Liste springen kann, und mit weiterem TABULAR durch die angezeigten Zeilen.
Aber optimal wäre es für mich (der mit DOS aufgewachsen ist  Angel) wenn das mit den Pfeiltasten möglich wäre und ich mit ENTER den Link aufrufen könnte.

Ich vermute, dass ich irgendwie aus der `searchTable()` Funktion wieder raus muss, wenn KEY_DOWN erkannt wurde.

Leider komme ich damit nicht weiter und bin am Verzweifeln.

Vielleicht hat einer der Profis einen Tip für mich? 

Vielen Dank im Voraus,

liebe Grüße!

Drucke diesen Beitrag

Photo Grid oder Flex
Geschrieben von: envoy - 20.03.2024, 20:58 - Forum: Css - Antworten (5)

Ich habe eine bestehende ältere Seite dich gerne anpassen und aktualisieren möchte. Ich habe das, was ich bisher gemacht habe, mit float und einer table aufgebaut, 
aber das ist ja nicht mehr zeitgemäß und ich komme an einigen Stellen auch einfach nicht weiter, daher würde ich es gerne Responsive neu aufbauen.
Bin mir aber nicht sicher, ob besser mit Flex oder mit Grid. Für einen Ansatz wäre ich dankbar.

Ich habe mal skizziert, was ich genauer erstellen will, ich hoffe, man versteht es.

Viele Grüße



Angehängte Dateien Thumbnail(s)
   
Drucke diesen Beitrag

  Class in PHP While ansprechen
Geschrieben von: saturnus - 19.03.2024, 10:00 - Forum: Javascript - Antworten (4)

Hallo

Ich habe div. Datensätze die aus einer Datenbank kommen. Innerhalb dieser Datensätze möchte ich ein onclick Event setzen, der nur für die jeweilige Zeile gültig ist.

PHP-Code:
while($row=$result->fetch_object()){
                if($frage != $row->frage){
                    echo '<div class="col-lg-12 frage">'.$row->frage.'</div>';
                }
                echo '<div class="col-lg-4">';
                echo '<a href="#" class="box a'.$row->id_fragen.'"><span class="border rounded-circle letter" id="'.$row->question.'">'.$row->letters.'</span> '.$row->solutions.'</a>';;
                echo '</div>';
                $frage = $row->frage;
            } 
Erklärung: 
Ich möchte jetzt gerne eine CSS Klasse hinzufügen, resp. entfernen, je nach dem, was geklickt wurde (toggleClass). Pro Zeile sind 3 Antworten zum anklicken möglich. Je nach dem was geklickt wurde, soll der Text via CSS markiert werden. Eine zuvor geklickte Antwort soll wieder neutral werden. Das soll aber nur für die betroffene Zeile gültig sein.
Als Ansatz hab ich das:
Code:
$(document).ready(function(){
    $('.box').click(function(){
        $('.box').removeClass('box-active');
        $(this).addClass('box-active');
    });
});
Bin für einen Tipp dankbar!

Drucke diesen Beitrag

  CSS Animationen verbinden
Geschrieben von: envoy - 18.03.2024, 13:36 - Forum: Css - Antworten (8)

Hallo,

ich habe 2 einzelne CSS @keyframe Animationen, einmal einen pulsierenden circle und eine animierte Positionsänderung und möchte diese gerne in 
einer Animation verbinden, sodass der pulsierende circle seine Position verändert. Wie kann ich diese beiden Animationen in eine packen?


Viele Grüße



Angehängte Dateien
.html   circle_animation.html (Größe: 1,08 KB / Downloads: 3)
Drucke diesen Beitrag

  Ajax Abfrage
Geschrieben von: BinButz - 17.03.2024, 12:55 - Forum: Php - Antworten (3)

Hallo,
ich beiße mir die Zähne an meinem Script aus....
Der Filter funktioniert einfach nicht und ich verstehe nicht warum...
Bin seit Stunden dran....
HILFE!!



Angehängte Dateien
.php   action.php (Größe: 1,01 KB / Downloads: 1)
.php   config.php (Größe: 154 Bytes / Downloads: 1)
.php   index.php (Größe: 5,21 KB / Downloads: 1)
Drucke diesen Beitrag

  Navigation verhält sich bei Breakpoint zu mobilen Ansicht suboptimal
Geschrieben von: Mick62 - 14.03.2024, 12:11 - Forum: jQuery - Keine Antworten

Hallo und Guten Tag
Hab hier Eine Navigation die ich mit Hilfe eines Tutorial erstellt habe. Ich habe mir das schön angepasst.
Doch wenn ich es im Browserfenster zusammen schiebe wird das Menue ab dem Breackpoint direkt aufgeklappt angezeigt.
Es soll sich aber erst nach Aufforderung öffnen. Ich selbst bin mit Javascript nur rudimentär vertraut

hier ist mal der gesamter code: Das script ist ganz unten

Code:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Nav</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>

  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
      list-style: none;
      box-sizing: border-box;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

    body::after {
      content: "Resize Viewport ↘";
      position: fixed;
      bottom: 1em;
      right: 1em;
      opacity: 0.5;
      font-size: 0.8em;
      border-bottom: 1px solid rgba(0, 0, 0, 0.5);
    }

    .top-navigation {
      width: 100%;
      float: left;
      background-color: darkcyan;
      position: fixed;
      z-index: 1000;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .logo {
      display: block;
      padding: 1em;
    }
    .logo img {
      display: block;
      width: 100%;

      max-width: 100px;
    }

    nav {
      display: flex;
      align-items: center;
    }

    nav ul {
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }

    nav li {
      margin: 0 10px;
    }

    nav a {
      display: block;
      text-decoration: none;
      color: white;
      border-top: 1px solid rgba(0, 0, 0, 0.5);
      padding: 1em;
      white-space: nowrap;
    }

    nav a:hover {
      background: rgba(0, 0, 0, 0.2);
      color: white;
    }

    #toggle-nav {
      background: rgba(0, 0, 0, 0.2);
      display: block;
      position: absolute;
      right: 0;
      top: 0;
      padding: 1.1rem;
      color: white;
      cursor: pointer;
    }

    #toggle-nav:hover {
      background: rgba(0, 0, 0, 0.4);
      color: white;
    }

    header {
      margin-top: 60px;
      width: 100%;
      min-height: 100vh;
      float: left;
    }
    h1 {
      font-size: 24px;
    }

    p {
      font-size: 16px;
    }

    .top-fix {
      display: flex;
      justify-content: start;
      align-items: center;
      min-height: 50vh;
      background-color: aquamarine;
    }

    .bottom-flex {
      display: flex;
      justify-content: start;
      align-items: center;
      min-height: 50vh;
      background-color: lightcoral;
    }

    @media screen and (min-width: 800px) {
      .top-navigation {
        flex-direction: row;
        align-items: center;
      }

      nav {
        float: right;
        width: auto;
        display: flex;
        align-items: center;
      }

      nav a {
        border: none;
      }

      nav li {
        width: auto;
        padding: 0;
      }

      #toggle-nav {
        display: none;
      }
    }

    @media screen and (max-width: 800px) {
      .top-navigation {
        flex-direction: column;
        text-align: center;
      }

      .logo {
        text-align: left;
        width: 100%;
        padding-left: 1em;
      }

      .logo img {
        max-width: 18%;
        height: auto;
      }

      nav {
        width: 100%;
      }

      nav ul {
        display: inline-block;
        padding: 0;
        text-align: center;
        width: 100%;
      }

      nav li {
        display: block;
        margin: 10px 0;
        width: 100%;
      }

      nav a {
        display: block;
        text-decoration: none;
        color: white;
        border-top: 1px solid rgba(0, 0, 0, 0.5);
        padding: 1em;
      }
    }
  </style>

  <body>
    <div class="top-navigation">
      <a href="#" class="logo"><img src="../images/logo" alt="Logo" /></a>
      <div id="toggle-nav">Menu</div>
      <nav>
        <ul>
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
          <li><a href="#">Link 4</a></li>
          <li><a href="#">Link 5</a></li>
        </ul>
      </nav>
    </div>

    <header>
      <!-- Header-Inhalt -->
      <section class="top-fix">
        <h1>header teil 1</h1>
        <p>Mit öjähäjhi iupiuhgofogzpg.</p>
      </section>
      <section class="bottom-flex">
        <h1>header teil 2</h1>
        <p>Mit öjähäjhi iupiuhgofogzpg.</p>
      </section>
    </header>

    <script
      type="text/javascript"
      src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"
    ></script>
    <script>
      $(document).ready(function () {
        $("html").addClass("js");

        var navToggle = ['<div id="toggle-nav">Menu</div>'].join("");
        $("header").append(navToggle);

        // Hinzugefügten Code
        $("nav a").on("click", function () {
          if (menu.is(":visible")) {
            menu.slideUp();
          }
        });
      });

      $(function () {
        var pull = $("#toggle-nav");
        menu = $("nav");
        menuHeight = menu.height();

        $(pull).on("click", function (e) {
          e.preventDefault();
          menu.slideToggle();
        });

        $(window).resize(function () {
          var w = $(window).width();
          if (w > 320 && menu.is(":hidden")) {
            menu.removeAttr("style");
          }
        });
      });
    </script>
  </body>
</html>
Drucke diesen Beitrag

  Formular mit Datum und Uhrzeit
Geschrieben von: Lisa_33 - 14.03.2024, 08:26 - Forum: Javascript - Antworten (3)

Hallo an Alle,

ich brauche mal wieder eure Hilfe...

In einem Formular wähle ich über "input type=date" ein Datum aus.
Jetzt soll ein Dropdown erscheinen, in dem alle Uhrzeiten angezeigt werden, die für einen bestimmten
Wochentag in der Datenbank hinterlegt sind.

Habe jetzt schon alles mögliche versucht mit "datepicker" und "chained select", komme aber nicht weiter.

Vielleicht bin ich hier im Javascript-Forum falsch, aber der Versuch ist es wert.
Wäre euch echt dankbar für jeden Tipp.

LG
Lisa

Drucke diesen Beitrag

  Bildauswahl Reset
Geschrieben von: envoy - 12.03.2024, 21:24 - Forum: Javascript - Antworten (6)

Hallo, ich habe 2 separate Bildauswahl-Elemente. Ich möchte beide, wenn ich auf den Button Reset drücke, jeweils auf das 1. Bild zurücksetzten. Einzeln kann ich ansprechen, weiß aber nicht, wie ich beide gleichzeitig zurücksetzten kann?
<button class="tablinks" onclick="changeImage('01.jpg', '#bannerImage_(all???)')">reset</button>
Viele Grüße
</head> <body> <div class="tab"> <button class="tablinks" onclick="openCity(event, 'left')">left</button> <button class="tablinks" onclick="openCity(event, 'right')">right</button>

Code:
    </div>
    <div id="left" class="tabcontent">
        <img id="bannerImage_left" src="01.jpg">
        <img src="01_thumb.jpg" onclick="changeImage('01.jpg', '#bannerImage_left')" style="cursor:pointer; margin-left:40px; margin-right:40px">
        <img src="02_thumb.jpg" onclick="changeImage('02.jpg', '#bannerImage_left')" style="cursor:pointer; margin-right:40px">
        <img src="03_thumb.jpg" onclick="changeImage('03.jpg', '#bannerImage_left')" style="cursor:pointer; margin-right:40px">
    </div>
    <div id="right" class="tabcontent">
        <img id="bannerImage_right" src="01.jpg" "">
        <img src="01_thumb.jpg" onclick="changeImage('01.jpg', '#bannerImage_right')" style="cursor:pointer; margin-left:40px; margin-right:40px">
        <img src="02_thumb.jpg" onclick="changeImage('02.jpg', '#bannerImage_right')" style="cursor:pointer; margin-right:40px">
        <img src="03_thumb.jpg" onclick="changeImage('03.jpg', '#bannerImage_right')" style="cursor:pointer; margin-right:40px">
    </div>

    <div>
    <button class="tablinks" onclick="changeImage('01.jpg', '#bannerImage_(**all???**)')">reset</button>
    </div>
    <script>
Drucke diesen Beitrag

  Zugriff auf Properties einer Webseite
Geschrieben von: SilverArrow99 - 07.03.2024, 07:29 - Forum: Javascript - Antworten (3)

Hallo,

ich weiß gerade nicht so ganz wie ich das ganze nennen soll bzw. ob ich es korrekt verordne.
Ich versuche mir gerade ein Skript für eine Webseite zu bauen und ich bekomme nur eine Bestätigung ob das funktioniert über diese Properties im Browser. Allerdings habe ich keine Ahnung wie ich darauf zugreifen kann, bzw. wie diese properties wirklich heißen damit ich danach korrekt googeln könnte.

mich interessieren hierbei die Properties mit den Werten ::after.

Ich hab jetzt schon mit paar Dingen versucht die mir copilot vorgeschlagen hat, aber da ich die genaue Bezeichnung dafür nicht kenne komme ich damit auch nicht weiter.



Angehängte Dateien Thumbnail(s)
   
Drucke diesen Beitrag