Helpmij.nl
Helpmij.nl
Helpmij.nl
Steun Helpmij.nl! Klik hier     Computerprobleem? Klik hier!

Quote

Weergeven resultaten 1 tot 5 van 5

Onderwerp: kleur button wijzigen als andere buttons groen zijn

  1. #1
    Senior Member
    Geregistreerd
    1 november 2010
    Vraag is opgelost

    kleur button wijzigen als andere buttons groen zijn

    heb webpage met aantal rode buttons. een button opent tabel waar checkmarks ingevuld kunnen worden. Als alle checkmarks gezet zijn dan veranderd kleur button naar groen.
    Nu wil ik overkoepende rode button ("GC_POD1") groen laten worden als alle onderliggende butons ook groen zijn.

    Klik op afbeelding voor grotere versie

Naam:  buttons_groen.JPG
Bekeken: 10
Grootte:  26,2 KB

    en Klik op afbeelding voor grotere versie

Naam:  buttons_groen_check.JPG
Bekeken: 11
Grootte:  44,1 KB

    Hoe kan ik kleur van buttons n javascript controleren en dan button "GC_POD1" ook groen laten worden

    Alvast bedankt

  2. #2
    Beheerder bron's avatar
    Geregistreerd
    13 augustus 2013
    Locatie
    Voorburg
    Afstand tot server
    ±160 km
    Je laat geen code zien dus het is gissen. Je kan dit concept zelf verder uitwerken.
    Code:
    <style>
    .rood  { background: red }
    .groen { background: green }
    </style>
    
    <form id="formulier">
    <button id="GC_POD1" class="rood" type="button">GC_POD1</button>
    <table>
      <tr>
        <td><button type="button" class="groen">button 1</button>
        <br><label><input type="checkbox" value="A"> checkbox A</label>
        <br><label><input type="checkbox" value="B"> checkbox B</label></td>
      </tr>
      <tr>
        <td><button type="button" class="groen">button 2</button>
        <br><label><input type="checkbox" value="C"> checkbox C</label>
        <br><label><input type="checkbox" value="D"> checkbox D</label></td>
      </tr>
    </table>
    </form>
    
    <script>
    function allButtonsGreen() {
        var subButtons = document.querySelectorAll("#formulier table button");
        for (var i = 0; i < subButtons.length; i++) {
            if (subButtons[i].className.indexOf('rood') != -1) return false;
        }
        return true;
    }
    var formObj = document.getElementById('formulier');
    formObj.addEventListener("change", function(e) {
        e.preventDefault();
        var gcPod1  = document.getElementById('GC_POD1');
        var gcClass = (allButtonsGreen() == true) ? "groen" : "rood";
        gcPod1.classList.remove("groen", "rood");
        gcPod1.classList.add(gcClass);
    });
    </script>
    De EventListener luistert naar veranderingen in het formulier.
    Als er iets verandert wordt in functie allButtonsGreen gekeken of alle buttons groen zijn.
    Zoja, dan wordt GC_POD1 ook groen.

    Er wordt hierboven met class=".." gewerkt omdat dit minder code vraagt.

    Suc6. Have fun.
    Bestaande- en nieuwe websites op smartphone, tablet en pc.

  3. #3
    Senior Member
    Geregistreerd
    1 november 2010
    Hallo Bron,

    bedankt voor je voorstel, maar het doet niet helemaal wat ik wil.

    Klik op afbeelding voor grotere versie

Naam:  Button_rood_groen_1.JPG
Bekeken: 10
Grootte:  13,5 KB
    Dit heb je als uitgangspositie, maar als checkboxes niet geselecteerd zijn dan moeten buttons rood zijn. Als checkbox A en checkbox B geselecteerd zijn dan moet button_1 pas groen worden. Hetzelfde voor button_2.
    En als button_1 en button_2 groen zijn, dan pas moet button GCPOD1 pas groen worden. Maar als je een checkmark uncheck dan moet de button van die checkbox weer rood worden en ook de overkoepelende button GCPOD1

    Klik op afbeelding voor grotere versie

Naam:  Button_rood_groen_2.JPG
Bekeken: 10
Grootte:  13,8 KB
    Hier zie je dat maar 1 checkbox geselecteerd is en toch zijn alle buttons groen.

    Klik op afbeelding voor grotere versie

Naam:  Button_rood_groen_3.JPG
Bekeken: 10
Grootte:  13,4 KB
    Hier is checkmark weer unchecked en toch blijven alle buttons groen.

    hoop dat ik het goed uitgelegd heb en dat je een oplossing wet

    Alvast bedankt,

  4. #4
    Beheerder bron's avatar
    Geregistreerd
    13 augustus 2013
    Locatie
    Voorburg
    Afstand tot server
    ±160 km
    Als alle checkmarks gezet zijn dan veranderd kleur button naar groen.
    Nu wil ik overkoepende rode button ("GC_POD1") groen laten worden als alle onderliggende butons ook groen zijn.
    De code gaat uit van de situatie die je hebt beschreven, dat de check's er al voor zorgen dat de bijbehorende button van kleur verandert.
    Je vraagt alleen naar een 'overkoepelende button'. Werken de check's niet op de bijbehorende button?
    Bestaande- en nieuwe websites op smartphone, tablet en pc.

  5. #5
    Senior Member
    Geregistreerd
    1 november 2010
    Hallo Bron,

    Het klopt dat de buttons nu al van kleur veranderen als de checkmarks geselecteerd zijn.

    Uitgangssituatie is de button GCPOD1 rood en ook 1 van de onderliggende buttons is nog rood. Pas als alle checkboxen onder de rode button geselecteerd worden, zal ook die button groen worden. En als dan de twee onderliggende buttons groen zijn zal ook de overkoepelende button GCPOD1 groen worden.

    Wordt er 1 checkbox unchecked, dan zal die button weer rood worden en ook dus de overkoelende button

    Hoop dat ik het een beetje duidelijk heb uitgelegd

    Groet

Berichtenregels

  • U mag geen nieuwe vragen starten.
  • U mag niet reageren op berichten.
  • U mag geen bijlagen versturen.
  • U mag uw berichten niet bewerken.
  •  
Helpmij.nl
Helpmij.nl

Helpmij.nl en business

Partners
Sponsoren