Jquery Question posted in
The official Jquery Api Documentation can be found here.

how do i change the color of a div in jquery with radio button clicked and change the background color with the second radio button clicked?

<body>
<input type="radio" id="txtElement3" />Voorgrond<br />
<input type="radio" id="txtElement2" />Achtergrond<br />
<input type="text" id="txtElement">
<button id="btnKnop1">Stel kleur in</button>
<div id="divResult">Voorbeeld tekst</div>
<script>
    $(document).ready(function () {
        $("#btnKnop1").on('click', function () {
            if ($('#txtElement3').is(':checked')) {
                var txtElement = $('#txtElement').val()
                $('#divResult').css('color', txtElement)
            } if ($('txtelement2').is(':checked')) {
                var txtElement = $('#txtElement').val()
                $('#divResult').css('background-color', txtElement)
            }
        })
    })
</script>
</body>

I tried this, at first it did work, now it doesn’t work anymore.
How to change the div color, and background color when radio button is checked and on button click?

Tags:

2

Answers


  1. 0

    Changes I did:

    • added a name to the radio buttons so if you click one, the other is deactivated
    • fixed the CSS selectors
    • overriden the result to the search
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<body>
<input type="radio" name="col" id="txtElement3" />Voorgrond<br />
<input type="radio" name="col" id="txtElement2" />Achtergrond<br />
<input type="text" id="txtElement">
<button id="btnKnop1">Stel kleur in</button>
<div id="divResult">Voorbeeld tekst</div>
<script>
    $(document).ready(function () {
        $("#btnKnop1").on('click', function () {
            if ($('#txtElement3').is(':checked')) {
                var txtElement = $('#txtElement').val()
                $('#divResult').css('color', txtElement).css('background-color', 'white');
            } if ($('#txtElement2').is(':checked')) {
                var txtElement = $('#txtElement').val()
                $('#divResult').css('background-color', txtElement).css('color', 'black');
            }
        })
    })
</script>
</body>
    Login or Signup to reply.
  2. 0

    For the radio button with label Achtergrond has id txtElement2 but in the code you wrote txtelement2 and also there is no # before it.

    <html lang="en">

<body>
    <input type="radio" id="txtElement3" name="txtElement" />Voorgrond<br />
    <input type="radio" id="txtElement2" name="txtElement" />Achtergrond<br />
    <input type="text" id="txtElement">
    <button id="btnKnop1">Stel kleur in</button>
    <div id="divResult">Voorbeeld tekst</div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

    <script>
        $(document).ready(function() {
            $("#btnKnop1").on('click', function() {
                var txtElement = $('#txtElement').val();
                if ($('#txtElement3').is(':checked')) {
                    $('#divResult').css('color', txtElement).css('background-color', 'inherit');
                }
                if ($('#txtElement2').is(':checked')) {
                    $('#divResult').css('background-color', txtElement).css('color', 'inherit');
                }
            })
        })
    </script>
</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search