Toggle Plus-Minus HTML JavaScript?

Hallo, ich habe folgenden Quellcode:

Codepen.io/anon/pen/GpmrLr

Css hab ich fast komplett rausgenommen zur vereinfachung und auch der html code ist stark gekürzt um das ganze einfacher zu machen :)

Leider sieht man bei codepen die plus und minus png's nicht (ist ja klar)

Nun will ich über java script dafür sorgen, dass entweder plus ODER minus angezeigt wird (so wie ich bisher gelesen habe müsste das mit toggle funktionieren) und dementsprechend die tabelle bei minus ausgeklappt und bei plus eingeklappt ist, und wenn man draufklickt dass sich das eben dann ändert. (Tabelle einklappen und ausklappen habe ich die lösingsansäze visible oder display gefunden) ich bekomme das einfach nicht hin, denke die syntax ist bei mir jedes mal komplett falsch. Ich weiss dass ich z.b. noch ids vertrilen muss.

Wäre nett wenn mir jemand helfen könnte.

Danke schonmal im Vorraus! :)

3 Antworten

RakonDark

Nutzer, der sehr aktiv auf gutefrage ist

im Thema HTML

06.10.2015, 21:28

toggle ist JQuery .

http://api.jquery.com/toggle/

RakonDark

Nutzer, der sehr aktiv auf gutefrage ist

im Thema HTML

06.10.2015, 13:06

Dein Tabellen Layout ist voriges Jahrhundert .

Damit würde ich nicht mehr weiter machen .

Nur da eine Tabelle wo auch tabellarische Werte sind . Also die untere Tabelle ok . Alles andere in div mit entsprechendem css.

EightSix

06.10.2015, 10:52

Sehe da gar keinen JS Code irgendwie..

Ähnliche Beiträge

We rechnet man Kindesunterhalt aus?

Hallo hab die Düsseldorfer Tabelle angeschaut leider wird dort nur ab 1900 Netto angezeigt ich verdiene ohne Prozente 1590 Netto .

Mit Prozente 1640 Netto

Dazu kommt das ich ein Kredit/Darhlen hab und dort 1700 im Minus bin und Monatlich wird 59 Euro abgebucht

Meine Miete 566 Euro .

Ich bin mit der Mutter noch zusammen Kind Lebt bei Ihr und zum Teil bei mir.

Die Mutter bekommt 488 Euro Hartz4 Plus Miete 490 Warm.

Es sind 2 Kinder ein eheliches, allerdings Lebt Sie noch in Scheidung

Kann mir da einer sagen was ich zahlen muss ?

...zum Beitrag

JS overlay schließen?

ich habe eine Problem mit meiner schließungs-funktion.

$('#overlay-contact').on('click', function(ev) {
    console.log(ev.target)
    if (ev.Target = $('#overlay-wrapper-contact')) {
        $("#overlay-contact").removeClass('show-overlay');
    }
});

die Class 'show-overlay' wird durch einen Button hinzugefügt

$('#toggle-btn-contact').on('click', function(){
    var elem = $('#overlay-contact');
    elem.addClass("show-overlay");
});

<div id="overlay-contact" class="overlay">
  <div id="overlay-wrapper-contact" class="overlay-wrapper">
    <div class="o_contact-form">    
      <form action="index_submit" accept-charset="utf-8">
        <textarea placeholder="Name:" name="Name"></textarea>
        <textarea placeholder="E-Mail:" name="E-mail"></textarea>
        <textarea placeholder="Anliegen:"></textarea>
      </form>
    </div>  
  </div>
</div>

#overlay-contact.overlay
display: none
position: fixed
height: 100vh
width: 100vw
background: $bg-color
z-index: 999

.overlay-wrapper
   display: flex
   margin: auto
   background: red
   padding: 25px

#overlay-contact.show-overlay
   display: flex

   .overlay-wrapper
      animation: slide-down 0.5s ease

das Problem ist das wenn ich außerhalb clicke geht das overlay weg (wie es ja soll), aber wenn ich innerhalb clicke geht es auch weg :/

hier noch als CodePen für (hoffentlich) bessere Übersicht

https://codepen.io/Ezio__/pen/JNevya

hoffe einer kann helfen :)

...zum Beitrag

Wie kann ich ein CodePen (HTML, CSS und JavaScript) auf einer Seite einbetten?

Hallo,

ich habe dieses Widget für HTML auf CodePen gefunden:

https://codepen.io/eehayman/pen/jVPKpN

Nun möchte ich das auf einer Seite einbetten. Könnte mir da jemand helfen?

...zum Beitrag

Was ist eine SCSS Datei und wie kann ich sie einbinden?

Hallo, habe mir von Codepen dieses Sript rausgesucht: https://codepen.io/alphardex/pen/dyPorwJ

Ich habe die Sachen ganz normal in meine CSS und HTML Datei kopiert. Dann ist mir aufgefallen, dass es sich um eine SCSS Datei handelt… was genau ist das? Und wie binde ich sie ein? Ich habe es mit umbennen probiert, aber leider jetzt nur einen Schneepunkt oben links in der Ecke (siehe Screenshot) Und ja ich weiß ein iPad ist alles andere als optimal zum Programmieren bin aber gerade unterwegs und kann nicht an den PC (dort sieht es aber genau so aus)

...zum Beitrag

Tabelle erstellen und diese ein/ausklappen?

Hey,

ich bekam letzte Woche die Aufgabe eine Tabelle zu erstellen, diese soll ein/ausklappbar sein und die einzelnen Kacheln sollen Themen beinhalten, diese soll man anklicken können und dann öffnet sich in der Tabelle ein Fenster.

Das soll dann ungefähr so aussehen. (hab das grob nachgemacht, da ich gerade nicht den Bogen in der Hand hab.)

So weit ich weiß darf ich HTML, CSS und Javascript nutzen, habe aber nur ein wenig Ahnung in HTML und CSS, Javascript habe ich noch gar nicht gelernt, wäre aber bereit dazu

Ich würde eine Nav bar erstellen, ich denke das schaffe ich auch und dann bräuchte ich Hilfe. Ich würde um die Themenauswahl auszuwählen und diese Tabelle zu öffnen "Themenübersicht" nennen. Nachdem ich auf "Themenübersicht" klicke möchte ich, dass diese Tabelle auftaucht und jedes Thema (müssen keine Namen haben) soll eine "blablabla" Seite direkt daneben haben.

Falls sich jemand beschweren sollte, wieso ich das nicht alleine hinkriege oder zu faul sei, ich bin ein Neuling in dem ganzen Programmier Ding und schaffe es noch nicht alleine, deswegen hätte ich gerne Unterstützung.

...zum Beitrag

PHP Datum minus eine anzahl von tagen

Ich habe eine Html seite wo ich eintragen kann min(30) und max(60) anzahl von tagen diese seite übergibt dann diese werte an eine php seite diese soll dann die beiden datumsergebnisse ausrechnen. und dann sollen per abfragen aus 2 Tabellen die Daten rausgeholt werden mein Problem ich kriege es nicht hin das die beiden ergebnisse als datum dargestelt werden sondern nur als zahlen 13738051 631372509163 was mache ich falsch

...zum Beitrag

JavaScript +/- Increment and Decrement Number in 5er Schritten?

Hallo zusammen,

ich habe folgenden +/- Increment and Decrement Select Button.

Bei +/- ändert sich der Wert immer 1. Dies möchte ich allerdings in 5er Schritten. Hat da jemand eine Lösung?

HTML:

</div>

CSS:

.wrapper{

height: 120px;

min-width: 380px;

display: flex;

align-items: center;

justify-content: center;

background: #FFF;

border-radius: 12px;

box-shadow: 0 5px 10px rgba(0,0,0,0.2);

}

.wrapper span{

width: 100%;

text-align: center;

font-size: 55px;

font-weight: 600;

cursor: pointer;

user-select: none;

}

.wrapper span.num{

font-size: 50px;

border-right: 2px solid rgba(0,0,0,0.2);

border-left: 2px solid rgba(0,0,0,0.2);

pointer-events: none;

}

JavaScript:

const plus = document.querySelector(".plus"),

minus = document.querySelector(".minus"),

num = document.querySelector(".num");

let a = 1;

plus.addEventListener("click", ()=>{

a++;

a = (a < 10) ? "0" + a : a;

num.innerText = a;

});

minus.addEventListener("click", ()=>{

if(a > 1){

a--;

a = (a < 10) ? "0" + a : a;

num.innerText = a;

}

});

...zum Beitrag

JavaScript Maximalwert setzen und schneller Value-Wechsel?

Hallo zusammen,

ich habe folgenden +/- Increment und Decrement Button. Kann ich dort einen Maximalwert setzen?

Außerdem möchte ich gerne wenn man + bzw. - gedrückt hält den Value schneller wechseln kann. Wie ist das möglich?

Vorab danke für die Antworten!

HTML:

 <div class="wrapper">
   <span class="minus">-</span>
   <span class="num">01</span>
   <span class="plus">+</span>
</div>

CSS:

.wrapper{
 height: 120px;
 min-width: 380px;
 display: flex;
 align-items: center;
 justify-content: center;
 background: #FFF;
 border-radius: 12px;
 box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}
.wrapper span{
 width: 100%;
 text-align: center;
 font-size: 55px;
 font-weight: 600;
 cursor: pointer;
 user-select: none;
}
.wrapper span.num{
 font-size: 50px;
 border-right: 2px solid rgba(0,0,0,0.2);
 border-left: 2px solid rgba(0,0,0,0.2);
 pointer-events: none;
}

JavaScript:

const plus = document.querySelector(".plus"),
   minus = document.querySelector(".minus"),
   num = document.querySelector(".num");
   let a = 1;
   plus.addEventListener("click", ()=>{
     a++;
     a = (a < 10) ? "0" + a : a;
     num.innerText = a;
   });
   minus.addEventListener("click", ()=>{
     if(a > 1){
       a--;
       a = (a < 10) ? "0" + a : a;
       num.innerText = a;
     }
   });

...zum Beitrag

Welche Formel für Exel , wenn Spalte A plus ,Spalte B minus und SpalteC das Ergebnis in jeder Zeile stehen soll, in Zeile 4 aber gar nichts steht?

Ich habe eine Tabelle mit Zeilen 1-5 und Spalten A-C. In Spalte C sollen meine Ergebnisse stehen. Spalte A soll zum jeweiligen Ergebnis der vorausgehenden Zeile addiert und Spalte B subtrahiert werden. Problem: In Zeile 4 steht gar nichts und da sollte auch in Spalte C nichts stehen. Bisher habe ich "Summenformel" und "Wenn Dann Formel" versucht. Da in Zeile 4 nichts stehen darf finde ich nicht die richtige Formel, damit in C5 auch noch ein Ergebnis steht.

...zum Beitrag

Musik lauter machen in JS?

Hi Liebe Community,

Ich habe folgendes Problem:

Ich habe mit JavaScript und HTML einen Button gemacht, der Musik spielt. Jetzt würde ich es gerne so machen, das, wenn man auf zwei andere Button drückt, einer plus und minus, die Musik immer ein bisschen lauter und/oder ein bisschen leiser wird (halt so, das man mehrmals auf den Button drückt, damit es pro Click ein bisschen lauter/leiser wird , aber ich komme nicht weiter, könnt ihr mir helfen?

Danke im voraus, für die Hilfe

Quellcode:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="playMusic()">starte Musik</button>
    <button onclick="volumeeUp()">+</button>
    <button onclick="volumeDown()">-</button>
</body>
<script>
    const audio = new Audio();
    audio.src = "musik.mp3"
    audio.loop = true;

    function playMusic() {
        audio.play();
    }

    function volumeUp(){
        audio.volume = +1;
    }

    function volumeDown(){
        audio.volume = -1
    }
</script>
</html>

...zum Beitrag

Plus und Minus verwechselt - Nun defekt - Wie messe ich die Bauteilr?

Hallo,
leider habe ich, als ich meinen Schlagschrauber, dem AEG SD 340, an die Batterie vom Roller angeschlossen habe, Plus und Minus verwechselt.

Nun schraubt der Schrauber nicht, oder dreht langsam und ruckelnd.
Wenn ich den Schalter zum Schrauben mehrfach hintereinander drücke, kann ich ihn gelegentlich überreden, doch mit Schlägen zu schrauben, also komplett dürfte er nicht hin sein.

Das Display zeigt nur noch wirr an und es springt hin und her.
Defekt ist es nicht, es zeigt auch mal alle Striche an.

Den Drehmoment kann ich natürlich auch nicht mehr einstellen.

Könnt ihr mir bitte verraten, was die Abkürzungen auf der Platine bedeuten und wie man die Bauteile messen kann?

R ist klar, dass sind Widerstände, die ich mit meinem digitalen Multimeter gemessen habe, die sind in Ordnung.

C dürften Kondensatoren sein.

Aber was ist U?

U3 ist ein L7805CV der sehr heiß wird, wenn der Schrauber mit Spannung versorgt wird.

Könnte dieser, der laut Conrad ein Festspannungsregler ist, das Problem sein?
https://www.conrad.de/de/festspannungsregler-1-a-positiv-stmicroelectronics-l7805cv-gehaeuseart-to-220-ausgangsspannung-5-v-i-out-1-a-179205.html

Wie messe ich die Bauteile?
Ich habe nur ein digitales Multimeter und einen digitalen Duspol.

Vielen Dank!

...zum Beitrag

Wie kann ich in Excel positive und negative Werte addieren?

Hallo zusammen,

ich führe für die Arbeit eine Tabelle mit folgenden Daten: Arbeitszeitbeginn, Arbeitszeitende, Pausenzeit, Arbeitszeit, Überstunden

Die Arbeitszeit berechnet sich mit: Beginng minus Ende minus Pause. Die Überstunden schreibe ich manuell hin.

Wie aber kann ich bei der Spalte "Überstunden" auch meine Minusstunden eintragen? Alle Überstunden/Minusstunden sollen außerdem am Ende des Monats eine Summe ergeben (also Plus minus Minusstunden).

Ich krieg es einfach nicht hin. Eine negative Zahl zu schreiben klappt bei mir schon nur, wenn ich ein ' davor setze. Aber rechnen tut Excel damit dann nicht für mich.

Wer kann mir helfen?

Anmerkung: Ich bin kein Profi in Sachen komplizierte Formeln. Die einfachste Lösung wäre für mich die beste!

Danke im Voraus! Sarah

...zum Beitrag

html hintergrund?

hey,

ich habe ein problem mit den hintergrund

wenn ich ein div mache und den ein hintergrund zu weise wird es nicht angezeigt wenn ich es in den body tag rein schreibe wird es angezeigt aber dann wenn ich eine neue section machen will ändert es das bild vom body tag

und ich wollte jetzt fragen wie ich es hinkriege das das hintergrund bild vom div angezeigt wird

...zum Beitrag

Chemie: Anionen, Kationen, Katode, Anode: wohin wandern welche?

Hwy, http://www.chemie.de/lexikon/Reduktion_%28Chemie%29.html hier steht (bei Wikipedia auch), Anionen wandern zur Anode und Kationen zur Katode. Da die Reduktion bei der Katode und die Oxidation bei der Anode abläuft, bedeutet das die Katode benötigt Elektronen (Anionen), also fließen die Elektronen zur positiv geladenen Katode. Aber das wiederspricht ja der Website. Wo liegt mein Denkfehler?

Reduktion (an der Katode) = Aufname von Elektronen (Anionen) -> Anionen werden an der Katode gebraucht -> Anionen wandern von der Anode zur Katode (Elektronen wandern von plus zu minus)

...zum Beitrag

Was möchtest Du wissen?

Deinen Beitrag erstellen