Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Trent Stenoien
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Trent Stenoien
Full Stack JavaScript Techdegree Graduate 21,052 Points
Posted by Trent Stenoien
.a{fill-rule:evenodd;}techdegree seal-36
Trent Stenoien
Full Stack JavaScript Techdegree Graduate 21,052 Points

How do I send selected radio button to a JavaScript function?

Hi! I'm just learning to code, started in January or February and have been powering through the courses on here and elsewhere. I figured I would challenge myself to make a program that runs Yahtzee. I've made great progress for my first project, but I've run into a snag and I can't seem to sort it out.

I'm working on scoring right now and am having trouble reading the user input. I have radio buttons in HTML and in JS I have an object containing scoring functions, but I can't figure out how to figure out how to use the the radio buttons to select which JS function to run. Any help would be appreciated!

In doing this I would prefer to stay on the page without refreshing. I would also love to be able to calculate and display the points for a radio button before a user submits it.

Bonus points: I never learned about HTML tables so I copy/pasted the one I'm using from another thread. Any advice or pointers on mine would be welcome.

JavaScript variables

const scorecard = document.querySelector('form');
const radioInput = document.querySelectorAll('input');
const scoreButton = document.querySelector('#scoreButton');
const scoring = {
    one: () => {}
    two: () => {}
}

Snippet of table HTML

<tbody>
    <form>
        <tr>
            <th>Upper Section</th>
            <th>Rule</th>
            <th>Points</th>
        </tr>
        <tr>
            <td>
                <div class="radio">
                    <input type="radio" name="optradio" id="one">
                </div>
            </td>
            <td>
                <div class="radiotext">
                    <label>Aces</label>
                </div>
            </td>
            <td>
                <div class="radiotext">
                    <label>Sum of ones</label>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="radio">
                    <input type="radio" name="optradio" id="two">
                </div>
            </td>
            <td>
                <div class="radiotext">
                    <label>Twos</label>
                </div>
            </td>
            <td>
                <div class="radiotext">
                    <label>Sum of twos</label>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <button id="scoreButton" type="button">Score Now</button>
            </td>
        </tr>
    </form>
</tbody>

1 Answer

Simon Coates
Simon Coates
28,693 Points
Simon Coates
Simon Coates
28,693 Points

the following differentiates function depending on which input is selected:

<tbody>
    <form>
        <tr>
            <th>Upper Section</th>
            <th>Rule</th>
            <th>Points</th>
        </tr>
        <tr>
            <td>
                <div class="radio">
                    <input type="radio" name="optradio" id="one">
                </div>
            </td>
            <td>
                <div class="radiotext">
                    <label>Aces</label>
                </div>
            </td>
            <td>
                <div class="radiotext">
                    <label>Sum of ones</label>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="radio">
                    <input type="radio" name="optradio" id="two">
                </div>
            </td>
            <td>
                <div class="radiotext">
                    <label>Twos</label>
                </div>
            </td>
            <td>
                <div class="radiotext">
                    <label>Sum of twos</label>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <button id="scoreButton" type="button">Score Now</button>
            </td>
        </tr>
    </form>
</tbody>


<script>

const scoring = {
    one: () => { console.log("one");},                //ADDED COMMA
    two: () => {console.log("two"); }
}

const radioInput = document.querySelectorAll('input');
radioInput[0].addEventListener('click', scoring.one);
radioInput[1].addEventListener('click', scoring.two);
</script>

there are at least a bunch of other ways to take different paths on different radios.

Simon Coates
Simon Coates
28,693 Points
Simon Coates
Simon Coates
28,693 Points

i didn't take things any further because i don't know how to play Yahtzee, so don't get how you need things to function.

Trent Stenoien
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Trent Stenoien
Full Stack JavaScript Techdegree Graduate 21,052 Points
Trent Stenoien
.a{fill-rule:evenodd;}techdegree seal-36
Trent Stenoien
Full Stack JavaScript Techdegree Graduate 21,052 Points

Correct me if I'm wrong but it looks like this will execute scoring.one right away when I click right? Is there a way to let the user select their choice then use the button to submit it? I've seen the submit of course, but it refreshes the page and (from what I understand) sends the info to an external page.

Simon Coates
Simon Coates
28,693 Points
Simon Coates
Simon Coates
28,693 Points

i'm a bit of a tourist in javascript, but i'm thinking something like:

<script>
const scoring = {
    one: () => { console.log("one");},
    two: () => {console.log("two"); }
}

const radioInput = document.querySelectorAll('input');

const button = document.querySelector('button');
button.addEventListener('click', function (){    
    if(radioInput[0].checked){
        scoring.one();
    }   
});
</script>

I may be wrong, but i think the button only navigates to another page if it is a submit button (and even then you can make it stop by returning false using javascript or blocking default behaviour using jquery.).