I’m trying to make a Mario kart calculator. I feel like I almost got it. but I can’t seem to get it to work. Essentially its supposed to calculate the stats and display them on a bar chart. This is the error I get, ReferenceError: getSelectedRadioValue is not definedhttps://dea30f85-b4db-45de-86bc-4dd63141dd32.id.repl.co/script.js:36.
<h1>Mario Kart 8 Calculator</h1>
<div>
<label for="character">Character:</label>
<input type="radio" id="character0" name="character" value="0" checked>
<label for="character0">Mario</label>
<input type="radio" id="character1" name="character" value="1">
<label for="character1">Luigi</label>
<!-- Add more character options here -->
</div>
<div>
<label for="body">Body:</label>
<input type="radio" id="body0" name="body" value="0" checked>
<label for="body0">Standard</label>
<input type="radio" id="body1" name="body" value="1">
<label for="body1">Pipe Frame</label>
<!-- Add more body options here -->
</div>
<div>
<label for="glider">Glider:</label>
<input type="radio" id="glider0" name="glider" value="0" checked>
<label for="glider0">Super Glider</label>
<input type="radio" id="glider1" name="glider" value="1">
<label for="glider1">Cloud Glider</label>
<!-- Add more glider options here -->
</div>
<div>
<label for="wheels">Wheels:</label>
<input type="radio" id="wheels0" name="wheels" value="0" checked>
<label for="wheels0">Standard</label>
<input type="radio" id="wheels1" name="wheels" value="1">
<label for="wheels1">Roller</label>
<!-- Add more wheels options here -->
</div>
<button id="calculateBtn">Calculate</button>
<canvas id="chartCanvas"></canvas>
and here is the js
// Define an object to store the stats for each character, body, glider, and wheels
var stats = {
characters: [
{ name: 'Mario', miniTurbo: 3, acceleration: 3, speed: 4, handling: 3 },
{ name: 'Luigi', miniTurbo: 3, acceleration: 3, speed: 4, handling: 3 }
// Add more characters here with their respective stats
],
bodies: [
{ name: 'Standard', miniTurbo: 0, acceleration: 0, speed: 0, handling: 0 },
{ name: 'Pipe Frame', miniTurbo: 0, acceleration: 1, speed: 0, handling: 0 }
// Add more bodies here with their respective stats
],
gliders: [
{ name: 'Super Glider', miniTurbo: 0, acceleration: 0, speed: 0, handling: 0 },
{ name: 'Cloud Glider', miniTurbo: 1, acceleration: 0, speed: 0, handling: 0 }
// Add more gliders here with their respective stats
],
wheels: [
{ name: 'Standard', miniTurbo: 0, acceleration: 0, speed: 0, handling: 0 },
{ name: 'Roller', miniTurbo: 0, acceleration: 1, speed: 0, handling: 0 },
{ name: 'Test', miniTurbo: 0, acceleration: 0, speed: 1, handling: 0 }
// Add more wheels here with their respective stats
]
};
// Get the DOM elements for the radio inputs and chart canvas
var characterRadios = document.getElementsByName('character');
var bodyRadios = document.getElementsByName('body');
var gliderRadios = document.getElementsByName('glider');
var wheelsRadios = document.getElementsByName('wheels');
var chartCanvas = document.getElementById('chartCanvas');
// Add event listener to the calculate button
document.getElementById('calculateBtn').addEventListener('click', function() {
// Get the selected character, body, glider, and wheels
var character = stats.characters[getSelectedRadioValue(characterRadios)];
var body = stats.bodies[getSelectedRadioValue(bodyRadios)];
var glider = stats.gliders[getSelectedRadioValue(gliderRadios)];
var wheels = stats.wheels[getSelectedRadioValue(wheelsRadios)];
// Calculate the total stats by summing up the selected options
var totalMiniTurbo = character.miniTurbo + body.miniTurbo + glider.miniTurbo + wheels.miniTurbo;
var totalAcceleration = character.acceleration + body.acceleration + glider.acceleration + wheels.acceleration;
var totalSpeed = character.speed + body.speed + glider.speed + wheels.speed;
var totalHandling = character.handling + body.handling + glider.handling + wheels.handling;
// Create a chart using Chart.js library
var chart = new Chart(chartCanvas, {
type: 'bar',
data: {
labels: ['Mini Turbo', 'Acceleration', 'Speed', 'Handling'],
datasets: [{
label: 'Total Stats',
data: [totalMiniTurbo, totalAcceleration, totalSpeed, totalHandling],
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 0.2)',}]
}
})
})
