Kann man diesen JS-Code kürzer realisieren?

Universaldenker · 22 August 2017

Code:

var phF = document.getElementById("phF");
var phFU1 = document.getElementById("phFU1");
var phFU2 = document.getElementById("phFU2");
var phFU3 = document.getElementById("phFU3");
var phFU4 = document.getElementById("phFU4");
var phFU5 = document.getElementById("phFU5");
var phFU6 = document.getElementById("phFU6");
var phFU6 = document.getElementById("phFU7");
var phFU6 = document.getElementById("phFU8");
var phFU6 = document.getElementById("phFU9");
var phFU6 = document.getElementById("phFU10");

var phFUB0 = document.getElementById("phFUB0");
var phFUB1 = document.getElementById("phFUB1");
var phFUB2 = document.getElementById("phFUB2");
var phFUB3 = document.getElementById("phFUB3");
var phFUB4 = document.getElementById("phFUB4");
var phFUB5 = document.getElementById("phFUB5");
var phFUB6 = document.getElementById("phFUB6");
var phFUB6 = document.getElementById("phFUB7");
var phFUB6 = document.getElementById("phFUB8");
var phFUB6 = document.getElementById("phFUB9");
var phFUB6 = document.getElementById("phFUB10");


function umstellen0() {
phF.style.display = "block";
phFU1.style.display = "none";
phFU2.style.display = "none";
phFU3.style.display = "none";
phFU4.style.display = "none";
phFU5.style.display = "none";
phFU6.style.display = "none";
phFU7.style.display = "none";
phFU8.style.display = "none";
phFU9.style.display = "none";
phFU10.style.display = "none";
}

function umstellen1() {
phF.style.display = "none";
phFU1.style.display = "block";
phFU2.style.display = "none";
phFU3.style.display = "none";
phFU4.style.display = "none";
phFU5.style.display = "none";
phFU6.style.display = "none";
phFU7.style.display = "none";
phFU8.style.display = "none";
phFU9.style.display = "none";
phFU10.style.display = "none";
}

function umstellen2() {
phF.style.display = "none";
phFU1.style.display = "none";
phFU2.style.display = "block";
phFU3.style.display = "none";
phFU4.style.display = "none";
phFU5.style.display = "none";
phFU6.style.display = "none";
phFU7.style.display = "none";
phFU8.style.display = "none";
phFU9.style.display = "none";
phFU10.style.display = "none";

}

function umstellen3() {
phF.style.display = "none";
phFU1.style.display = "none";
phFU2.style.display = "none";
phFU3.style.display = "block";
phFU4.style.display = "none";
phFU5.style.display = "none";
phFU6.style.display = "none";
phFU7.style.display = "none";
phFU8.style.display = "none";
phFU9.style.display = "none";
phFU10.style.display = "none";
}

function umstellen4() {
phF.style.display = "none";
phFU1.style.display = "none";
phFU2.style.display = "none";
phFU3.style.display = "none";
phFU4.style.display = "block";
phFU5.style.display = "none";
phFU6.style.display = "none";
phFU7.style.display = "none";
phFU8.style.display = "none";
phFU9.style.display = "none";
phFU10.style.display = "none";
}

function umstellen5() {
phF.style.display = "none";
phFU1.style.display = "none";
phFU2.style.display = "none";
phFU3.style.display = "none";
phFU4.style.display = "none";
phFU5.style.display = "block";
phFU6.style.display = "none";
phFU7.style.display = "none";
phFU8.style.display = "none";
phFU9.style.display = "none";
phFU10.style.display = "none";
}

function umstellen6() {
phF.style.display = "none";
phFU1.style.display = "none";
phFU2.style.display = "none";
phFU3.style.display = "none";
phFU4.style.display = "none";
phFU5.style.display = "none";
phFU6.style.display = "block";
phFU7.style.display = "none";
phFU8.style.display = "none";
phFU9.style.display = "none";
phFU10.style.display = "none";
}

function umstellen7() {
phF.style.display = "none";
phFU1.style.display = "none";
phFU2.style.display = "none";
phFU3.style.display = "none";
phFU4.style.display = "none";
phFU5.style.display = "none";
phFU6.style.display = "none";
phFU7.style.display = "block";
phFU8.style.display = "none";
phFU9.style.display = "none";
phFU10.style.display = "none";
}

function umstellen8() {
phF.style.display = "none";
phFU1.style.display = "none";
phFU2.style.display = "none";
phFU3.style.display = "none";
phFU4.style.display = "none";
phFU5.style.display = "none";
phFU6.style.display = "none";
phFU7.style.display = "none";
phFU8.style.display = "block";
phFU9.style.display = "none";
phFU10.style.display = "none";
}

function umstellen9() {
phF.style.display = "none";
phFU1.style.display = "none";
phFU2.style.display = "none";
phFU3.style.display = "none";
phFU4.style.display = "none";
phFU5.style.display = "none";
phFU6.style.display = "none";
phFU7.style.display = "none";
phFU8.style.display = "none";
phFU9.style.display = "block";
phFU10.style.display = "none";
}

function umstellen10() {
phF.style.display = "none";
phFU1.style.display = "none";
phFU2.style.display = "none";
phFU3.style.display = "none";
phFU4.style.display = "none";
phFU5.style.display = "none";
phFU6.style.display = "none";
phFU7.style.display = "none";
phFU8.style.display = "none";
phFU9.style.display = "none";
phFU10.style.display = "block";
}

if (phFUB0 !== null) {phFUB0.onclick = umstellen0;}
if (phFUB1 !== null) {phFUB1.onclick = umstellen1;}
if (phFUB2 !== null) {phFUB2.onclick = umstellen2;}
if (phFUB3 !== null) {phFUB3.onclick = umstellen3;}
if (phFUB4 !== null) {phFUB4.onclick = umstellen4;}
if (phFUB5!== null) {phFUB5.onclick = umstellen5;}
if (phFUB6!== null) {phFUB6.onclick = umstellen6;}
if (phFUB7!== null) {phFUB7.onclick = umstellen6;}
if (phFUB8!== null) {phFUB8.onclick = umstellen6;}
if (phFUB9!== null) {phFUB9.onclick = umstellen6;}
if (phFUB10!== null) {phFUB10.onclick = umstellen6;}

Tronjer · 22 August 2017

Jo, kann man. So um gefühlte 90%.

Das Zauberwort heißt Loop.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration

Universaldenker · 24 August 2017

Sempervivum schrieb:

Ich würde es so machen:

Code:

        var phFU = [document.getElementById("phF")];
        for (var i = 1; i <= 10; i++) {
            phFU.push(document.getElementById("phFU" + i));
        }
        var phFUB = [];
        for (var i = 0; i <= 10; i++) {
            phFUB.push(document.getElementById("phFUB" + i));
        }
        function umstellen(idx) {
            phFU.forEach(function (item, i) {
                if (idx == i) item.style.display = "block";
                else item.style.display = "none";
            })
        }
        phFUB.forEach(function (item, idx) {
            if (item == null) item.onclick = umstellen(idx);
        });

Woah, der Code ist richtig kurz! Aber irgendwie funktioniert er nicht. Es wird komischerweise nichts eingeblendet, wenn ich unterschiedliche umstellen-Funktionen benutze :(
Hier ist mein html code:

HTML:

<section id=phFU1><h2>...umgestellt nach der Viskosität</h2>
<samp>
\[ \eta ~=~ \frac{ F_{\text R} }{ 6\pi \, r \, v } \]
</samp>
</section>

<section id=phFU2><h2>...umgestellt nach dem Radius</h2>
<samp>
\[ r ~=~ \frac{ F_{\text R} }{ 6\pi \, \eta \, v } \]
</samp>
</section>

<section id=phFU3><h2>...umgestellt nach der Geschwindigkeit</h2>
<samp>
\[ v ~=~ \frac{ F_{\text R} }{ 6\pi \, \eta \, r } \]
</samp>
</section>

<div id=phFopts><details id=phFU><summary>andere Form...</summary><ul>

<li><button type=button id=phFUB1>umgestellt nach der Viskosität \( \eta \)</button>
<li><button type=button id=phFUB2>umgestellt nach dem Radius \( r \)</button>
<li><button type=button id=phFUB3>umgestellt nach der Geschwindigkeit \( v \)</button>
<li><button type=button id=phFUB0>umgestellt nach der Reibungskraft \( F_{\text R} \)</button>

</ul></details></div>

Universaldenker · 25 August 2017

Sempervivum schrieb:
Stimmt, da waren noch Fehler:
[/CODE]Allerdings wird so auch das ganze Menü versteckt, weil umstellen() auch auf #phFU wirkt. Willst Du das wirklich?

#phFU sollte immer eingeblendet sein, weil das ein <details>-Menü ist, wo man verschiedene umstellen-Funktionen aufruft uuuund #phF sollte standardmäßig eingeblendet sein, wenn die Seite geladen ist. Ansonsten wird #phF durch #phFU1, #phFU2 usw. ersetzt, je nach dem welche Funktion im Menü aufgerufen wird.

Hier ist ein Beispiel:
https://universaldenker.de/physik/formeln/484

Es wird eine andere Formel eingeblendet, wenn untere dem Menü "andere Formen..." irgendeine umstellen-Funktion aufgerufen wird. =))

Universaldenker · 25 August 2017

Sempervivum schrieb:
Ist dies jetzt, was Du brauchst?

Perfekt! Es funkioniert, wie gewünscht! VIELEN DANK! :)))

Universaldenker · 30 September 2017

Ich hab da noch nen Code gebastelt und frage mich, ob es einfacher geht ... =D

Code:

        iNav.addEventListener("change", function(){
        
            if(iNav.value == "videos"){
                iGo.href = '/videos' + (iNav1.value !== "none" ? "/" + iNav1.value : "");
                iNav1.style.display = "block";
                iNav2.style.display = "none";
                iNav3.style.display = "none";
            }else if (iNav.value == "themen") {
                iGo.href = '/themen' + (iNav1.value !== "none" ? "/" + iNav1.value : "");
                iNav1.style.display = "block";
                iNav2.style.display = "none";
                iNav3.style.display = "none";
            }else if (iNav.value == "aufgaben") {
                iGo.href = '/aufgaben' + (iNav1.value !== "none" ? "/" + iNav1.value : "");
                iNav1.style.display = "block";
                iNav2.style.display = "none";
                iNav3.style.display = "none";
            }else if (iNav.value == "fragen") {
                iGo.href = '/fragen' + (iNav1.value !== "none" ? "/" + iNav1.value : "");
                iNav1.style.display = "block";
                iNav2.style.display = "none";
                iNav3.style.display = "none";
            }else if (iNav.value == "formeln") {
                iGo.href = '/formeln' + (iNav1.value !== "none" ? "/" + iNav1.value : "");
                iNav1.style.display = "block";
                iNav2.style.display = "none";
                iNav3.style.display = "none";
            }else if (iNav.value == "bilder") {
                iGo.href = '/bilder' + (iNav1.value !== "none" ? "/" + iNav1.value : "");
                iNav1.style.display = "block";
                iNav2.style.display = "none";
                iNav3.style.display = "none";
                
            }else if (iNav.value == "icons") {
                iGo.href = '/icons' + (iNav3.value !== "none" ? "/" + iNav3.value : "");
                iNav2.style.display = "none";
                iNav1.style.display = "none";
                iNav3.style.display = "block";
                
            }else if (iNav.value == "sounds") {
                iGo.href = '/sounds' + (iNav2.value !== "none" ? "/" + iNav2.value : "");
                iNav2.style.display = "block";   
                iNav3.style.display = "none";
                iNav1.style.display = "none";
                
            }else if (iNav.value == "links") {
                iGo.href = '/links';
                iNav3.style.display = "none";
                iNav2.style.display = "none";
                iNav1.style.display = "none";
            }else if (iNav.value == "bezeichnungen") {
                iGo.href = '/bezeichnungen';
                iNav3.style.display = "none";
                iNav2.style.display = "none";
                iNav1.style.display = "none";
            }else if (iNav.value == "kontakt") {
                iGo.href = '/kontakt';
                iNav3.style.display = "none";
                iNav2.style.display = "none";
                iNav1.style.display = "none";
            }   
        });

Kann man diesen JS-Code kürzer realisieren?

Universaldenker

Neues Mitglied

Tronjer

Senior HTML'ler

Universaldenker

Neues Mitglied

Universaldenker

Neues Mitglied

Universaldenker

Neues Mitglied

Universaldenker

Neues Mitglied

Neueste Beiträge