JS-Problem?

Hallo, was ist bei dieser JS-Function falsch?

Sie soll, einen Text ändern, wenn der Hintergrund eine bestimmte Farbe hat. Allerdings steht immer nur "Hell" da. Die id ist richtig.

function activeoff(){
    if (document.getElementById("haupt").style.background === 'rgb(180, 179, 179)') {
        aktiv.innerHTML = '"Dunkel"';
    }
    
    else {
        
        aktiv.innerHTML = '"Hell"';

    };
}

1 Antwort

Vom Fragesteller als hilfreich ausgezeichnet

MrAmazing2

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, programmieren, JavaScript

04.09.2022, 20:32

Setzt du die Hintergrundfarbe denn vorher per JavaScript oder steht sie im HTML-Code?

Wenn du .style.background abfrägst, dann prüft das nicht die background-Eigenschaft, die in der CSS-Datei angegeben wurde, sondern die, die im HTML im style-Attribut steht. Diese kann man entweder per JavaScript setzen oder manuell in der HTML-Datei eintragen wie folgt:

<div id="haupt" style="background: rgb(180, 179, 179);">

In diesem Fall würde "Dunkel" rauskommen.

Anmerkung (in diesem Fall zwar unwichtig, aber gut zu wissen): Alles was im Style-Attribut steht überschreibt das, was in der CSS-Datei steht. Wenn in der CSS-Datei beispielsweise "background: red" steht und im style-Attribut "background: green", dann ist das Element grün, denn das style-Attribut hat eine höhere Priorität.

Wenn du wissen willst, welche Eigenschaft per CSS-Datei gesetzt wurde, musst du den computatedStyle verwenden. Das geht wie folgt:

const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, null);
 
if (cssObj.getPropertyValue("background") === 'rgb(180, 179, 179)') {
  aktiv.innerHTML = '"Dunkel"';
} else {
  aktiv.innerHTML = '"Hell"';
};

Woher ich das weiß:Hobby – Programmieren ist mein Hobby & Beruf

Lindner12

Fragesteller

04.09.2022, 20:39

OK, danke. Also wenn ich das mit computatedStyle mache, was muss ich bei "test" stattdessen einsetzen?

MrAmazing2

04.09.2022, 20:39

@Lindner12

"haupt". Dein Element hat ja die id "haupt".

Lindner12

Fragesteller

04.09.2022, 20:45

@MrAmazing2

Ja, danke. Habe das mal gemacht, aber es kommt immer "Dunkel" raus.

Also ich habe 2 Buttons, die die Hintergrundfarbe ändern. Ich habe bei beiden JS mit onclick eingebunden und beim body onload. Wo ist das Problem? Ich schreibe einen Kommentar mit dem Bild, denn hier kann ich nichts einfügen.

MrAmazing2

04.09.2022, 20:46

@Lindner12

Könntest du vlt. den HTML und JS-Code schicken, damit ich es nachstellen kann?

Lindner12

Fragesteller

04.09.2022, 20:51

@MrAmazing2

(Gute Frage formatiert es manchmal etwas komisch)

Manchmal sind noch weitere JS Funktionen, aber für andere Funktionen.

HTML:

<body id="haupt" onload="backgroundcolor(), activeoff()">
                <h3 class="h4">Design:</h3>

                <div class="Buttons">

                    <div class="dunkel">
                        <button onclick="setBodyColor('#262626'), activeoff()" class="startzwei">
                            Dunkel
                        </button>

                    </div>

                    <button onclick="setBodyColor('rgb(180, 179, 179)'), activeoff()" class="startzwei">
                        Hell
                    </button>

                </div>

                <div>Aktives Design:<span></span><span id="aktiv"><span><span></span></div>
</body>

</html>

JS:

function activeoff(){
    const element = document.getElementById("haupt");
const cssObj = window.getComputedStyle(element, null);
 
if (cssObj.getPropertyValue("background") === 'rgb(180, 179, 179)') {
  aktiv.innerHTML = '"Hell"';
} else {
  aktiv.innerHTML = '"Dunkel"';
};
}

Lindner12

Fragesteller

04.09.2022, 21:36

@MrAmazing2

Der Code für die Buttons, die die Farbe des Hintergrundes ändern:

<script>
        var bgcolor = '#262626'; /* default */
        function backgroundcolor() {
            if (localStorage["mybgcolor"] != null) { // schon gespeichert
                bgcolor = localStorage.getItem("mybgcolor");
                console.log('load ' + bgcolor);
            } else { // noch nicht gespeichert 
                localStorage.setItem("mybgcolor", bgcolor);
                console.log('saved ' + bgcolor);
            }
            setBodyColor(bgcolor);
        }
        function setColor(abgcolor) { // farbe speichern 
            localStorage.setItem("mybgcolor", abgcolor);
            console.log('saved ' + abgcolor);

        }
        function setBodyColor(mybodycolor) {
            setColor(mybodycolor); // farbe speichern
            document.body.style.backgroundColor = mybodycolor; // body farbe setzen
            console.log('set to background ' + mybodycolor);
        }
    </script>

MrAmazing2

04.09.2022, 21:39

@Lindner12

<span id="aktiv"><span>

Der hintere davon muss </span> sein, da hast du den Schrägstich vergessen.

Außerdem sind die zwei anderen span-Elemente da noch komplett unnötig. So reicht es auch:

<div>Aktives Design:<span id="aktiv"></span></div>

Aber zum eigentlichen Problem, mit "background-color" anstatt "background" funktioniert es.

if (cssObj.getPropertyValue("background-color") === 'rgb(180, 179, 179)') {

Wenn du dir mal background ausgeben lässt ( cssObj.getPropertyValue("background") ), siehst du, dass da noch etwas mehr Information enthalten ist: "rgb(180, 179, 179) none repeat scroll 0% 0%". Deswegen hat's nicht geklappt. "background" hingegen ist nur "rgb(180, 179, 179)", da klappt's dann.

Lindner12

Fragesteller

04.09.2022, 21:43

@MrAmazing2

Ja, das mit den span war noch von einem alten "Projekt". Habe seit dem den Code nicht wirklich überarbeitet. Aber danke, dachte nicht, dass das Problem so einfach zu lösen ist. :)

IchMalWiederXY

05.09.2022, 12:31

mmhh:
mich irritieren die "drei" === Operatoren.
Sollten es nicht nur zwei sein ?

MrAmazing2

05.09.2022, 12:58

@IchMalWiederXY

Ist ein JavaScript Feature.

JS ist ja normalerweise nicht typsicher. Wenn du dir beispielsweise mal das Ergebnis dieses Vergleichs ausgeben lässt:

console.log( "" == [] );

bekommst du true. Weil eben, wenn der Typ nicht beachtet wird und ein leeres Array und ein leerer String intern das selbe sind. (Ein String ist ja auch nur ein char-Array).

=== prüft auf absolute Gleichheit inklusive Typ.
Eventuell reicht in dem Fall auch ein ==, da müsste man sich anschauen was getPropertyValue so zurückgeben kann. Aber ich würd da auf Nummer sicher gehen und === verwenden.

Hallo Leute,

Ich habe mich im Internet ein bisschen umgesehen, wie man mit JS ein <video>-Element in den Vollbildmodus schaltet. Folgendes Beispiel habe ich gesehen:

var elem = document.getElementById("name-of-element");

function activateFullscreen() {
  if(elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if(elem.mozRequestScreen) {
    elem.mozRequestScreen();
  } else if(elem.webkitRequestFullscreen) {
    elem.webkitRequestFullscreen();
  } else if(elem.msRequestFullscreen) {
    elem.msRequestFullscreen();
  }
}

Bei einem <video>-Tag funktioniert das Ganze auch. Wenn ich es jedoch mit einem <div>-Container probiere, funktioniert es nicht. Kann mir jemand erklären wie das funktioniert?

Danke

...zur Frage

JS ARRAYS + RECHNEN?

Also ich habe ein Programm wo man per Knopfdruck über einen Prompt etwas schreiben kann und das steht dann im Array, aber es soll so sein das wenn man auf einen anderen Button drückt ein Allert kommt in dem steht wie viel alles zusammen ist also ich möchte es + rechnen.

Falls es hilfreich ist hier mein Code:

<html>

<head>

</head>

<body>

<h1>Stromverbrauch</h1>

<button onclick="addNewItem(); updateList();">Neuen Verbrauch hinzufügen</button>

</ul>

let shoppingItems = getShoppingItemsFromLocalStorage();

updateList();

function getShoppingItemsFromLocalStorage() {

let items = localStorage.getItem('shoppingItems');

if (items == null || items == '') {

items = [];

} else {

items = items.split(',');

}

return items;

}

function addNewItem() {

let item = prompt('Welchen Verbrauch hast du?');

if (item != null) {

shoppingItems.push(item);

localStorage.setItem('shoppingItems', shoppingItems);

}

function removeItem(itemIndex) {

shoppingItems.splice(itemIndex, 1);

localStorage.setItem('shoppingItems', shoppingItems);

}

function updateList() {

document.getElementById('list').innerHTML = '';

for (let index = 0; index < shoppingItems.length; index += 1) {

document.getElementById('list').innerHTML += '<li>' + shoppingItems[index] +

' <button onclick="removeItem(' + index + '); updateList();">X</button></li>';

}

</script>

</body>

</html>

...zur Frage

Javascript - Note berechnen?

Schönen guten Abend,

ich versuche mir selber JS beizubringen und merke, dass es doch nicht ganz so einfach ist. Ich versuche ein Rechner zu programmieren, mit welche man die Zeugnisnote berechnen kann. Leider habe ich Probleme die Werte die ich ins Input-Feld eingebe in JS aufzurufen und zu verarbeiten. Würde mir jemand diesbezüglich helfen?

Bitte verzichtet darauf mir zu sagte wie einfach das sei und wie schlecht ich bin, ich will mich weiter motivieren mich weiterzubilden und mir nicht erzählen lassen wie einfach oder dass ich es doch lassen solle.

Mein JS

function berechnung(){
    var at = document.getElementById("allgemein")
    var kl = document.getElementById("klausur")
    document.getElementById("ergebnis").innerHTML = kl;
    allgemein+klausur
    console.log
}

Mein HTML

<div class="section">
            <p><h2>Notenrechner</h2></p>

            <input type="int" id="allgemein"> <br>
            <input type="int" id="klausur">
            <button onclick="berechnung()">Note berechnen</button>
            <p id=ergebnis></p>


        </div>

...zur Frage

Panorama Bild wie bei Google Maps?

Hi,

Ich habe folgenden Code:

HTML:

<div id="panorama-container">
  <img src="https://media04.meinbezirk.at/article/2016/10/31/6/9445226_XXL.jpg" id="panorama-image" />


  <a href="#" id="fullscreen-button">Vollbildschirm</a>
</div>

CSS:

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  max-width: 100%;
  overflow: hidden;
}


#panorama-container {
  width: 100%;
  height: 100%;
}


#panorama-image {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  max-width: auto;
  overflow-y: hidden;
}


#fullscreen-button {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 16px;
  color: #fff;
  text-decoration: none;
}

JS:

var panoramaContainer = document.getElementById("panorama-container");
var panoramaImage = document.getElementById("panorama-image");
var fullscreenButton = document.getElementById("fullscreen-button");
var position = 0;
var initialX = null;


fullscreenButton.addEventListener("click", function() {
  if (panoramaContainer.requestFullscreen) {
    panoramaContainer.requestFullscreen();
  } else if (panoramaContainer.webkitRequestFullscreen) {
    panoramaContainer.webkitRequestFullscreen();
  } else if (panoramaContainer.mozRequestFullScreen) {
    panoramaContainer.mozRequestFullScreen();
  } else if (panoramaContainer.msRequestFullscreen) {
    panoramaContainer.msRequestFullscreen();
  }
});


document.addEventListener("touchstart", function(event) {
  initialX = event.touches[0].clientX;
});


document.addEventListener("touchmove", function(event) {
  if (initialX === null) {
    return;
  }


  var currentX = event.touches[0].clientX;
  var diffX = currentX - initialX;
  initialX = currentX;


  movePanorama(diffX); /* Change this value to adjust the speed of the movement */


  event.preventDefault();
});


document.addEventListener("touchend", function() {
  initialX = null;
});


function movePanorama(amount) {
  position += amount;
  panoramaImage.style.left =        position + "px";


 
  
}

Nun wird zwar das bild wie bei Google maps angezeigt, also genauer gesagt möchte ich das wenn ich auf meinem Bild nach links wische, dass es sich nach links dreht und rechts genau so. Das Problem ist nur wenn ich zu weit Wische, zeigt er mir ein weißen Screen, aber wie kann man das verhindern.

Vielleicht versteht ihr was ich meine

...zur Frage

scroll animation mit javascript?

 window.onscroll = function() {scrollFunction()};
                
                function scrollFunction() {
                  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
                    document.getElementById("pic").style.marginTop = "0px";
                    document.getElementById("pic").style.marginLeft = "900px";
                    document.getElementById("pic").style.width = "100px";
                    document.getElementById("pic").style.height = "100px";
                    document.getElementById("h1").style.width = "1003px";
                    document.getElementById("h1").style.height = "60px";
                    document.getElementById("h1").style.marginTop = "0px";
                    document.getElementById("h1").style.textAlign = "center";
                  } else {
                    document.getElementById("pic").style.marginTop = "110px";
                    document.getElementById("pic").style.marginLeft = "800px";
                    document.getElementById("pic").style.width = "200px";
                    document.getElementById("pic").style.height = "200px";
                    document.getElementById("h1").style.width = "250px";
                    document.getElementById("h1").style.height = "50px";
                    document.getElementById("h1").style.marginTop = "195px";
                  }

Hi, kann mir vielleicht jemand helfen die scroll animation so zu gestalten, dass sie nicht so abrupt geschieht ?

..oder gibt es eine bessere Lösung für mein Vorhaben, bzw wie könnte man es einfacher coden ?

Sry, bin totaler Anfänger =)

...zur Frage

Javascript Rechnung mit Kommastellen?

Ich habe in JS eine Funktion, mit welcher ich meine Zeugnisnote berechnen kann, allerdings hätte ich es gerne so das z.B statt "3" eine "3,5" angegeben wird und nicht auf die nächste Zahl gerundet wird. Wie mache ich das?

function lkberechnung(){
    const at = parseInt(document.getElementById("lkallgemein").value)
    const kl1 = parseInt(document.getElementById("kl1").value)
    const kl2 = parseInt(document.getElementById("kl2").value)


    const lkergebnis = String(Math.round((kl1 +kl2 + at*2)/4));
    document.getElementById("lkergebnis").innerHTML =("Du hast " + lkergebnis + " Punkte auf dem Zeugnis");

...zur Frage

Was mache ich falsch in JavaScript?

Ich will die Rotation einen 2D-Versors berechnen und dafür, will ich erstmal den Realteil ausrechnen.

Mein Problem ist: Es rechnet einfach nicht.

Was mache ich falsch?:

window.addEventListener('keydown', (event) => {
    if (event.keycode === '13') {
        return
    };
    function calculate (calculate)
}
)


function calculate (calculate) {
    let z_rotaited = document.getElementById('RotatedComplexversorZ');
    let Rez = document.getElementById('Re(z)');
    let Imz = document.getElementById('Im(z)');
    let Rotationangle = document.getElementById('Rotationangleindegree');
    let result = Math.sqrt(Rez ** 2 + Imz ** 2) * Math.cos(Rotationangle + Math.atan2(Rez, Imz) * 180 / Math.PI);
    z_rotaited = result;
}
function calcAngleDegrees(containerRez, containerImz) {
    return Math.atan2(containerRez, containerImz) * 180 / Math.PI;
  }

(Wenn ich Enter drücke, soll die eine Funktion laufen, welche das rotierte z ausrechnet.
Die Funktion (mathematich gesehen) lautet:

z_{rotiert} = sqrt(Re(z)² + Im(z)²) * (phi + cos(arctan2(Re(z), Im(z))) i * sin(phi + arctan2(Re(z), Im(z))))
z = 2D-Versor
phi = der dazu adierte Winkel

Die Seite sieht so aus:

...zur Frage

JavaScript will nicht (Text in Element ändern per onclick)?

Hallo alle miteinander,

ich tüftle derzeit daran, den Text eines Elements zu ändern, sobald im unteren Menü ein Feld angeklickt wurde. Das Ganze funktioniert jedoch nicht und ich verstehe nicht wirklich warum. Könnt ihr mir helfen den Fehler zu finden?

Die wli-Variablen sollen den neuen Text enthalten, da ich das für jemanden programmiere, der keine Ahnung von JavaScript hat und ich es somit vereinfachen wollte, das er den Text ohne etwas kaputt zu machen, bearbeiten kann.

Hier einmal der Code, an dem ich herumprobiert habe. Allerdings ohne den CSS-Teil:

<script type="text/javascript">
  wli1 = "wli1";
  wli2 = "wli2";
  wli3 = "wli3";
  wli4 = "wli4";
  wli5 = "wli5";
  wli6 = "wli6";

  function fwli1() {
    document.getElementById("werdegangcon").value = wli1;
  }

  function fwli2() {
    document.getElementById("werdegangcon").value = wli2;
  }

  function fwli3() {
    document.getElementById("werdegangcon").value = wli3;
  }

  function fwli4() {
    document.getElementById("werdegangcon").value = wli4;
  }

  function fwli5() {
    document.getElementById("werdegangcon").value = wli5;
  }

  function fwli6() {
    document.getElementById("werdegangcon").value = wli6;
  }
</script>
<div class="conh15">
  <div class="con100">
    <div class="con_top center nummer">
      <h3>Werdegang</h3>
    </div>
    <div class="con_mid center" id="werdegangcon">
      2394    Abschluss des Abiturs mit Auszeichnung</br>
      2394    Job als Haustechnikerin
    </div>
    <div class="con_bot center">
      <ul class="werdegang">
        <li id="weli1" onclick="fwli1()">vor der Akademie</li>
        <li id="weli2" onclick="fwli2()">2395</li>
        <li id="weli3"onclick="fwli3()">2399</li>
        <li id="weli4"onclick="fwli4()">2401</li>
        <li id="weli5"onclick="fwli5()">2402</li>
        <li id="weli6" onclick="fwli6()">2403</li>
      </ul>
    </div>
  </div>
</div>

...zur Frage

Gibt es einen weg das wider zu entschlüsseln?

ich habe auf der Seite https://obfuscator.io meinen JavaScript code verschlüsselt.

kann ich vom verschlüsselten code wieder zurück zum javascript code, wenn ja wie?

mein Code:

function be() {
    let eingabe = document.getElementById('password').value;
    if (eingabe == 'das ist gut') {
        re();
    } else {
        alert('Falsches Passwort');
    }
}

function re() {
    let feld = document.getElementById('pas');
    feld.remove();
}

function lock() {
    document.getElementById('bod').innerHTML += `<div class="pass" id="pas">
    <div class="pass-1">
        <div class="pass-2 pass-3">
            <h2>Passwort eingeben um fortzufahren</h2>
        </div>
        <div class="pass-2">
            <input type="password" id="password" placeholder="Passwort eingeben">
        </div>
        <div class="pass-2">
            <button class="pass-4" onclick="be()">Betätigen</button>
        </div>
    </div>
</div>`
}

...zur Frage

JavaScript Textboxen die aufklappen

Kann kein JavaScript. Kann man das vielleicht so umschreiben, dass es möglich wird, in den Link auch noch etwas anderes rein zu schreiben als wie die Wörter die in dem Script abgeglichen werden. Also "[Aufklappen]" und "[Schliessen]" ...

Ich will halt, dass man auf der ganzen div-box, die um den Link liegt, drauf klicken kann..

var ie4 = false; if(document.all) { ie4 = true; }
function getObject(id) {
if (ie4) {
return document.all[id];
} else {
return document.getElementById(id);
}
}
function toggle(link, divId) {
var lText = link.innerHTML; var d = getObject(divId);
if (lText == '[Aufklappen]') {
link.innerHTML = '[Schliessen]'; d.style.display = 'block';
} else { link.innerHTML = '[Aufklappen]'; d.style.display = 'none';
}
}




<div>
    <div>
        <a href="javascript: void(0);" onClick="toggle(this, 'box1');">[Aufklappen]</a>
    </div>
    <div id="box1" style=display:none>
        // Inhalt aufgeklappt
    </div>
</div>

...zur Frage

HTML window.location.href geht nicht?

https://streamable.com/9pfpva

Ich weiss nicht genau wo hier der Fehler ist aber er leitet nicht beim richitgen namen und passwort weiter? Weiß jemand woran das liegt? Ich bin relativ am anfang mit html.

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            function login() {
                var username = document.getElementById('username').value;
                var password = document.getElementById('password').value;


                if (username === 'test123' && password === 'test') {
                    window.location.href = 'http://www.google.com';
                } else {
                    alert('Ungültiger Benutzername oder falsches Passwort.'); // Fehlermeldung bei ungültigen Daten
                }
                return false;
            }


            var loginButton = document.getElementById('loginButton');
            loginButton.addEventListener('click', login);
        });
    </script>

...zur Frage

Javascript: Funktion nur ausführen wenn bedingung stimmt?

ich habe dieses JS :

function Rechner(){
	var x=document.getElementById("laenge").value;
	var y=document.getElementById("breite").value;
	document.getElementById("flaeche").value = xy;
}

jedes input hat das Attribut :

oninput="Rechner(this.value)"

Doch er soll die flaeche im Input nur ausgeben wenn wirklich laenge und breite ausgefüllt sind. derzeit zeigt er erst noch 0 an wenn nur 1 stimmt.

wie geht das ? kann man da irgendwie noch sagen "if isset laenge & breite" ?

...zur Frage

[JavaScript] Wie kann ich ein Element von Anfang an unsichtbar machen?

Und nach einem erfolgreichem Login wieder sichtbar machen. Ich habe folgenden Code:

function getKey() {


  var visible = document.getElementById("download").style.display = "visible";
  var invisible = document.getElementById("download").style.display = "none";


  var key = "abc1";


  var keY = document.getElementById("key").value;


  if (key == keY) {
    visible;
    alert("r")


  } else {
    alert("w")
  }

Weder funktioniert er, noch wird das Element download wieder angezeigt.

...zur Frage

js else?

ich habe auf einer website ein onclick event löse diese funktion aus es sollen zufällige antworten kommen es kommt aber immer nur die erste also die aus dem if block

function testbo(){
    var min = 1;
var max = 2;
var x = (Math.random() * (max - min)) + min;
    if (x > 1,5){
        alert("Warum hast du geklickt?");
    } else if (x < 1,5){
        alert("Du hast geklickt...");
    } 


}

Danke Schonmal im voraus!

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen