Displaying average values

[temple]

I want to select 1 radiobutton each colum and then click the button average and display the average in the textbox without conflicting to the 2nd table please help me with this currently i have 3 tables and the codes are too long
note: i used html and javascript

[Dormilich]

@jeffm

without conflicting to the 2nd table

only select radio buttons within a table, not globally.

[MartinMuzatko]

Hey there! You can develop this functionality in a way to make it work in a component-based fashion. Here is how:

Instead of giving the table an ID to select and apply code, you can use a class and sub-classes.

The main trick here, is to use a class and loop through all occurrences when setting up.

The HTML

<table class="js-average-options">
    <tr>
        <td><input type="radio" name="group1">1</td>
        <td><input type="radio" name="group2">1</td>
        <td><input type="radio" name="group3">1</td>
        <td><input type="radio" name="group4">1</td>
    </tr>
    <tr>
        <td><input type="radio" name="group1">2</td>
        <td><input type="radio" name="group2">2</td>
        <td><input type="radio" name="group3">2</td>
        <td><input type="radio" name="group4">2</td>
    </tr>
</table>

Depending on your needs, this table will get out of hand quickly. It is a little too big to manually create the HTML.

Also - a big problem here, is that we have to come up with new input group names. Otherwise, we will deselect a value in a table, when we select a radio button in another table.

So in the optimal case, we can programmatically create the table, based on two values - the option groups and the values. This way we can create a table matrix.

function createTableRows(table, groups, values) {
    // get a random id between 0 and 100000
	var randomId = Math.random() * 100000 | 0
	var html = values.map(value=>{
		var td = groups.map(group=>{
			return `<td><input type="radio" value="${value}" name="group-${randomId}-${group}"> ${value}</td>`
		}).join('')
		return '<tr>'+td+'</tr>'
	})
    // create a row with your result
    table.innerHTML = html.join('')+'<tr><td class="js-average-options-result" colspan="4">0</tr>'
}

Now we also need event listeners on the inputs to calculate the average.

Add this to the function:

var result = table.querySelector('.js-average-options-result')
var inputs = table.querySelectorAll('input')
for (var input of inputs) {
    input.addEventListener('change', (event)=>{
        // get all checked inputs
        var checkedInputs = table.querySelectorAll('input:checked')
        var average = 0
        // calculate average based on value
        for (var checkedInput of checkedInputs) {
            average += parseInt(checkedInput.value)
        }
        // Render result to result element and calculate average with the amount of checked inputs.
        result.innerHTML = result.innerHTML = (average/checkedInputs.length).toFixed(2)
    })
}

In the code above, we listen to input changes and then calculate the average based on the amount of checked inputs. We can only do that, because in our generated HTML, we set a value for each checkbox.

What is left to do, is to initialize the tables:

var tables = document.querySelectorAll('.js-average-options')
for (var table of tables) {
    createTableRows(table, [1,2,3], [1,2,3,4,5])    
}

You can see it here in action:

Going further
You can use your own parameters for generating the tables, groups and values are arrays of numbers. So if you need four groups and four values, just use
createTableRows(table, [1,2,3,4], [1,2,3,4])

Thats it.