How do I make different radio buttons do different things?

Question

I have to do a project for school where the site will do different calculations based on which radio button is checked. The site is about solar panels and calculating the price. I have no idea where to even start, so I just copied some things from some tutorials and got this:

function cena ()

{

        let opcja = document.getElementsByName('opcja');
        opcja.forEach((opcja) => {
            if (opcja.checked) {
            
            if opcja = document.getElementById("standard");
            document.getElementById("wynik").innerHTML="A";
            else
            if opcja = document.getElementById("premium");
            document.getElementById("wynik").innerHTML="B";
            
            }
        })
    ;

}

This, of course, doesn't work and I'm totally lost, so I'm asking for some help or a recommendation on a website where this is explained. The goal is for when the "standard" option is selected, the script will use a lesser value/coefficient to calculate the price.

Does this answer your question? [How can I check whether a radio button is selected with JavaScript?](https://stackoverflow.com/questions/1423777/how-can-i-check-whether-a-radio-button-is-selected-with-javascript) — Shoejep, May 29 '21 at 10:23
If this is “*a project for school*” I would imagine you would have already spent class time reviewing the proper syntax for JavaScript, no? Your `if`s are especially concerning - what have you researched on your own in order to rectify the fact that your script “*doesn't work*”? How about [the MDN page for `if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else)? You should also update your question with a clearer problem statement (specifically *what* isn’t working, expected vs. actual behavior, error messages) in accordance with [ask]. — esqew, May 29 '21 at 10:27
As @esqew already said: look at your `if ...` statements. When you want to do a comparison you will need to use the comparison operator `==` or `===` but not the assignment operator `=`. — Carsten Massmann, May 29 '21 at 11:11

score -1 · Accepted Answer · answered May 29 '21 at 10:32

Here is some code that i just made and it works. If the radio button is checked then it outputs Checked. Hope this helps. And if so click the Check mark! It would really help!

<!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>
        <input type="radio" name="radio_btn" id="radio_1" value="radio_1">
        <input type="button" value="Check" onclick="check_radio()">

        <script>
            const radio_button = document.getElementById('radio_1'); // Get element in document


            function check_radio() {
                if (radio_button.checked == true) {
                    // Do you thing
                    console.log("Checked") // Logs "checked"
                }
            }

        </script>
    </body>

</html>

Per - Christian Schnapka · Answer 2 · 2021-05-29T11:03:04.907

The easiest way would be to use jQuery. But in your case I suggest, you need plain javascript. The best option would be to use a document selector. by this you can directly switch on the selected radio button value to different workflows.

Hope this helps

<!-- language: lang-html -->

    

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
<input type="radio" name="radio_btn" id="radio_1" value="val1">
<input type="radio" name="radio_btn" id="radio_2" value="val2">
<input type="radio" name="radio_btn" id="radio_3" value="val3">
<input type="button" value="Check" onclick="check_radio()">

<script>



    function check_radio() {
        switch (document.querySelector('input[name="radio_btn"]:checked').value) {
            case 'val1':
                console.log('val1 given');
                break;
            case 'val2':
                console.log('val2 given');
                break;
            case 'val3':
                console.log('val3 given');
                break;
        }
    }

</script>
</body>

</html>

How do I make different radio buttons do different things?

2 Answers2