JavaScript – die besten Beiträge

Wie kann ich einen Button nach dem Laden einer Webseite aktiviert aussehen lassen?

Ich habe mir für mein Intranet ein kleines Video-Portal programmiert - das eigentlich ganz gut funktioniert.
Oben gibt es eine aufklappbare Ansicht mit Haupt und Unterkategorien und wenn eine Unter-Kategorie angeklickt wird öffnet sich die Seite mit einer Übersicht relevanter Videos.

Die Haupt-Kategorie gebe ich als URL-Parameter mit -> das funktioniert auch und es wird verdeckt die zu letzt verwendete Hauptkategorie angewählt.

Was nicht funktioniert, ist den Button für die aktuelle Hauptkategorie im Reitermenü so hervor zu heben als wenn er angeklickt wurde - bzw. den Button zu aktivieren.

JavaScript:

function openCity(evt, cityName) {
  // Declare all variables
  var i, tabcontent, tablinks;


  // Get all elements with class="tabcontent" and hide them
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }


  // Get all elements with class="tablinks" and remove the class "active"
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }

PHP-Script:


$cat = "Musik";
if (isset($_GET['cat']))
{
$cat = ($_GET['cat']);
}

echo '<details><summary> Kategorien: </summary>';
echo '<div class="tab">';

echo '<button type="button" name="Musik" class="tablinks" onclick="openCity(event, \'Musik\')">Musik</button>
<button type="button"  name="Anleitungen" class="tablinks" onclick="openCity(event, \'Anleitungen\')">Anleitungen</button>
<button type="button"  name="Kochen" class="tablinks" onclick="openCity(event, \'Kochen\')">Kochen</button>
<button type="button"  name="Backen" class="tablinks" onclick="openCity(event, \'Backen\')">Backen</button>
<button type="button"  name="Heimwerken" class="tablinks" onclick="openCity(event, \'Heimwerken\')">Heimwerken</button>';
  
echo '</div>';

echo '<!-- Tab content -->
<div id="Musik" class="tabcontent">
<div style="column-count: 5;">
'.$category_Musik.'
</div>
</div>

<div id="Anleitungen" class="tabcontent">
<div style="column-count: 5;">
'.$category_Anleitungen.'
</div>
</div>

<div id="Kochen" class="tabcontent">
<div style="column-count: 5;">
'.$category_Kochen.'
</div>
</div>

<div id="Backen" class="tabcontent">
<div style="column-count: 5;">
'.$category_Backen.'
</div>
</div>

<div id="Heimwerken" class="tabcontent">
<div style="column-count: 5;">
'.$category_Heimwerken.'
</div>
</div>';

echo '</details>';

echo '<SCRIPT type="text/javascript" language="JavaScript">
openCity(event, \''.$cat.'\'); 
</SCRIPT>';

CSS-Definitionen:



/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}


/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}


/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}


/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}


/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

so sieht es aus:

so soll es nach dem Laden der Seite aussehen:

Hat jemand eine Idee wie ich den Button für die aktuelle Kategorie beim Laden der Seite automatisch aktivieren kann?

Bild zum Beitrag
HTML, Webseite, CSS, JavaScript, HTML5, Code, PHP, Webdesign, Webentwicklung

Brauche ich einen anderen Weg um besser im programmieren zu werden?

In den letzten Monaten komme ich immer wieder in die selbe Spirale.

In der such ich ständig nach Projekten, fange sie an, beende sie nicht und dann suche ich wieder Projekte, um mich zu motivieren.

Mein Ziel ist es, eine Karriere in der Embedded-Programmierung zu machen. Ich habe auch einige Projekte gemacht (auch mit einigen selbstentwickelten PCBs in den letzten zwei Jahren), aber ich habe immer das Gefühl, dass ich länger damit beschäftigt bin, das Hardware-Projekt zu machen, anstatt die Software zu schreiben.

Oder:

Die Hardware ist für mich ziemlich komplex und die Software scheint dann ziemlich einfach zu sein. Ich habe zum Beispiel eine eigene Wetterstation gebaut. Es hat mich viel Zeit gekostet, die Platine mit den verschiedenen Sensoren zu planen und zu entwerfen, und dann war die Hardware in zwei Tagen fertig, weil es nur darum ging, ein paar Daten zu übertragen und sie auf einem Display darzustellen.

Mein Ziel ist es, mich mit schwierigen Softwareaufgaben zu beschäftigen, die nicht so viel mit Hardware zu tun haben. So kann ich mich darauf konzentrieren, größere Projekte zu planen und in die Struktur einzusteigen (was für mich meistens sehr schwer zu verstehen ist, wenn ich mir einige Open-Source-Code-Beispiele ansehe).

Ich komme dann immer an den Punkt, an dem ich darüber nachdenke, von C auf etwas wie Javascript oder Python umzusteigen, damit ich wirklich Software-Projekte machen und mit dem Programmieren ohne Hardware vorankommen kann. Aber dann komme ich mir immer blöd vor, weil ich das Gefühl habe, dass mich das nicht weiterbringt, wenn auf mein Karriereziel erreichen hinarbeite.

Ich habe die meisten meiner Projekte auf STM32-Basis gemacht und ich habe auch ein okayes Verständnis der HAL-Bibliothek, wie man die Dokumentation liest usw. Aber wenn ich darüber nachdenke, eine Art von Algorithmus zu implementieren, fühle ich mich so verloren und weiß nicht, wo ich anfangen soll, und das ist, was ich wirklich üben möchte. Aber die Hardware bremmst mich da immer ab.

Andererseits denke ich, dass ein Wechsel zu Javascript oder Python, um meine Problemlösungsfähigkeiten zu verbessern, am Ende besser sein wird, weil ich dann einfach mehr Code schreiben würde als in der Phase, in der ich jetzt feststecke je schreiben würde.

Keine Projekte und kein Fortschritt in meinen Problemlösungsfähigkeiten...

Ich weiß wirklich nicht, wie ich diese Phase überwinden soll... Hatte sonst noch jemand solche Probleme?

programmieren, JavaScript

Code optimieren?

Huhu ich hab's endlich geschafft meinen eigenen Code zu schreiben so dass er funktioniert und ich diesen auch verstehe. Jetzt ist meine nächstes "Problem" die optimierung kann man diesen in kürzerer Form schreiben?

```js

const array = ["3","4","5","6","7"];

for (let i= 0; i<=15; i++){

 console.log(array[0].repeat(20-i)+array[1].repeat(i));

}

for (let i= 16; i<=20; i++){

 console.log(array[0].repeat(20-i)+array[1].repeat(i));

 console.log(array[0].repeat(20-i)+array[1].repeat(i));

}

for (let i= 21; i<=35; i++){

 console.log(array[1].repeat(40-i)+array[2].repeat(i-20));

}

for (let i= 36; i<=40; i++){

 console.log(array[1].repeat(40-i)+array[2].repeat(i-20));

 console.log(array[1].repeat(40-i)+array[2].repeat(i-20));

}

for (let i= 41; i<=55; i++){

 console.log(array[2].repeat(60-i)+array[3].repeat(i-40));

}

for (let i= 56; i<=60; i++){

 console.log(array[2].repeat(60-i)+array[3].repeat(i-40));

 console.log(array[2].repeat(60-i)+array[3].repeat(i-40));

}

for (let i= 61; i<=75; i++){

 console.log(array[3].repeat(80-i)+array[4].repeat(i-60));

}

for (let i= 76; i<=80; i++){

 console.log(array[3].repeat(80-i)+array[4].repeat(i-60));

 console.log(array[3].repeat(80-i)+array[4].repeat(i-60));

}

```

sry hab kein plan wie man hier code formatiert rein haut^^ und danke für die geduld und fürs erklären. PS ich hoffe das kürzere ergebnis wird nicht zu kryptisch weil ich es dann wenn ich das in 6 wochen nochmal anschaue nicht mehr lesen kann. Dankö und habt einen schönen Start in die Woche🌞✌🏼

Computer, IT, programmieren, JavaScript, Array, optimierung, Webentwicklung, For-Schleife

Website API Problem lösen?

Ich habe die letzten Tage sehr lange an einer Website im Frontend gearbeitet, die ich für das Unternehmen meiner Mutter machen wollte.

Die Website ist auch sogut wie fertig, das Frontend funktioniert und ich weiß auch, wie ich die Website hochladen kann.
Jedoch habe ich an einem Punkt noch massive Probleme:

An einer Stelle der Website soll der Besuche in ein Formular seinen Namen und seine Email Adresse eingeben, um weitergeleitet zu werden. Das funktioniert auch soweit, jedoch sollen die Daten gleichzeitig in dem Dienst activecampaign gespeichert werden.

Leider habe ich es mit meinen Javascript Kenntnissen und auch mit ChatGPTs, sowie der Hilfe des Supports von Activecampaign nicht geschafft, dies zum laufen zu bringen.

Nach erneuter Recherche habe ich dann herausgefunden, dass ich wohl aufgrund der Fehler, die die Konsole ausgibt mit einem Backend arbeiten sollte, um die Daten an die API von Activecampaign weiterzuleiten. Allerdings bin ich kompletter Amateur und habe 0 Ahnung von Backend Programmierung und gehe auch nicht davon aus, dass wenn ich mich damit nun eine Weile intensiv beschäftigen würde, das Problem in nächster Zukunft immernoch nicht beheben kann.

Allerdings ist es in meinem Kopf auch nicht mehr unbedingt viel Arbeit, um das ganze dann fertig zu stellen oder? Immerhin geht es ja nur noch um das Übermitteln von Daten.

Ich frage mich nun, wie ich das gelöst bekomme. Ich habe jetzt nicht unbedingt jemanden in meinem Umfeld, der sich damit auskennt und mir helfen könnte oder so und alles an Dienstleistungen, was ich zum Beispiel auf Fiverr finden konnte, dreht sich nur um die gesamte Programmierung eines Backends oder einer ganzen Website. Jedoch ist das ja so gesehen viel zu viel, was ich buchen würde, wenn es nur darum geht, ein Formular mit der API zu verbinden.

Ich will halt auch wenn dann einen seriösen Auftragnehmer haben, da es ja um Kundendaten geht, jedoch weiß ich nicht, wie ich das alles umsetzen kann...

Ich bin so kurz vorm Ziel und komme jetzt einfach nicht weiter, es ist so deprimierend, vor allem nach der ganzen Arbeit, die da schon drin steckt...

Wie löse ich das Problem?

Früher oder später will ich aber auch den Skill haben, genau dieser Art zu programmieren, allerdings gehe ich derzeit noch hauptsächlich in die Schule...

Wo taucht man dahingehend so in das Thema ein, dass man das lernt? (am besten von Zu Hause aus)

HTML, Webseite, CSS, JavaScript, Programmiersprache, Webdesign, Webentwicklung

Meistgelesene Beiträge zum Thema JavaScript