如何从单选按钮获取值并使用 chart.js 显示它？

Question

我正在尝试制作马里奥卡丁车计算器。我觉得我几乎明白了。但我似乎无法让它工作。本质上它应该计算统计数据并将它们显示在条形图上。这是我得到的错误，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>

这是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)',}]
    }
  })
})