Error: Unable to access 'amtSavingsInput' variable before it has been initialized

Question

Error: Unable to access 'amtSavingsInput' variable before it has been initialized

I encountered an issue with form3/chart3 while trying to replicate the success of form1/chart1 and form2/chart2. Despite following the same steps and structure, form3/chart3 seems to be malfunctioning. The error message I'm receiving is "Uncaught ReferenceError: can't access lexical declaration 'amtSavingsInput' before initialization."

Below is the code snippet for form3/chart3:

// The code for form3/chart3 goes here...

Accompanied by a simple HTML bootstrap form:

  <div class="col-md-6">
                <h2>Savings and Investments</h2>
                <p>Growing wealth is about holding onto money. Choose how much of your £<span class="inline-block"
                        id="cashLeftDisplay2"></span> (cash leftover) that you will save or invest.</p>
                <form> <!-- Savings & Investments form-->
                    <div class="mb-3">
                        <label for="amt_Savings" class="form-label">Amount in a Savings Account</label>
                        <input type="text" class="form-control" id="amt_Savings" value="0" placeholder="0">
                      </div>
                      <div class="mb-3">
                        <label for="yield_Savings" class="form-label">Yearly Interest % Earned</label>
                        <input type="text" class="form-control" id="yield_Savings" value="0" placeholder="0">
                      </div>
                      <div class="mb-3">
                        <label for="amt_Vanguard" class="form-label">Amount in Vanguard Account</label>
                        <input type="text" class="form-control" id="amt_Vanguard" value="0" placeholder="0">
                      </div>
                      <div class="mb-3">
                        <label for="yield_Vanguard" class="form-label">Benchmark % Return</label>
                        <input type="text" class="form-control" id="yield_Vanguard" value="0" placeholder="0">
                      </div> 
                </form>
                <button class="btn btn-primary" id="nextButton">Next</button>
            </div>

javascript

Answer 1

Answer №1

No issues were found with the code, it just needs to include the canvas element. The code runs smoothly without any errors

let amtSavingsInput = document.getElementById('amt_Savings');
let yieldSavingsInput = document.getElementById('yield_Savings');
let amtVanguardInput = document.getElementById('amt_Vanguard');
let yieldVanguardInput = document.getElementById('yield_Vanguard');

// Locate the cashInChart canvas element
const moneyMapChartElement = document.getElementById('moneyMapChart');

// Provide initial chart data
const chart3 = {
  labels: ['1', '2', '3', '4', '5'],
  datasets: [
    {
      label: '',
      data: [],
      backgroundColor: 'rgba(75, 192, 192, 0.6)',
      borderWidth: 1
    }
  ]
};

// Create the chart
const moneyMapChart = new Chart(moneyMapChartElement, {
  type: 'bar',
  data: chart3,
  options: {
    responsive: false,
    scales: {
      y: {
        type: 'linear', // Scale type set to 'linear'
        beginAtZero: true
      }
    }
  }
});

// Function to calculate and update the chart
function updateChart() {
  let amtSavings = parseFloat(amtSavingsInput.value);
  let yieldSavings = parseFloat(yieldSavingsInput.value);
  let amtVanguard = parseFloat(amtVanguardInput.value);
  let yieldVanguard = parseFloat(yieldVanguardInput.value);

  // Convert monthly savings to yearly savings
  amtSavings *= 12;
  amtVanguard *= 12;

  const years = 5; // Desired number of years

  const capitals = calculateCapitalGrowth(amtSavings, yieldSavings, amtVanguard, yieldVanguard, years);

  // Update the chart data
  moneyMapChart.data.datasets[0].data = capitals;
  moneyMapChart.update();
}

// Add event listeners to input fields
amtSavingsInput.addEventListener('input', updateChart);
yieldSavingsInput.addEventListener('input', updateChart);
amtVanguardInput.addEventListener('input', updateChart);
yieldVanguardInput.addEventListener('input', updateChart);

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 <div class="col-md-6">
                <h2>Savings and Investments</h2>
                <p>Growing wealth is about holding onto money. Choose how much of your £<span class="inline-block"
                        id="cashLeftDisplay2"></span> (cash leftover) that you will save or invest.</p>
                <form> <!-- Savings and Investments form-->
                    <div class="mb-3">
                        <label for="amt_Savings" class="form-label">Amount in a Savings Account</label>
                        <input type="text" class="form-control" id="amt_Savings" value="0" placeholder="0">
                      </div>
                      <div class="mb-3">
                        <label for="yield_Savings" class="form-label">Yearly Interest % Earned</label>
                        <input type="text" class="form-control" id="yield_Savings" value="0" placeholder="0">
                      </div>
                      <div class="mb-3">
                        <label for="amt_Vanguard" class="form-label">Amount in Vanguard Account</label>
                        <input type="text" class="form-control" id="amt_Vanguard" value="0" placeholder="0">
                      </div>
                      <div class="mb-3">
                        <label for="yield_Vanguard" class="form-label">Benchmark % Return</label>
                        <input type="text" class="form-control" id="yield_Vanguard" value="0" placeholder="0">
                      </div> 
                </form>
                <button class="btn btn-primary" id="nextButton">Next</button>
            </div>
<canvas id=moneyMapChart></canvas> <!-- <== Added! -->

Answer 2

No issues were found with the code, it just needs to include the canvas element. The code runs smoothly without any errors

let amtSavingsInput = document.getElementById('amt_Savings');
let yieldSavingsInput = document.getElementById('yield_Savings');
let amtVanguardInput = document.getElementById('amt_Vanguard');
let yieldVanguardInput = document.getElementById('yield_Vanguard');

// Locate the cashInChart canvas element
const moneyMapChartElement = document.getElementById('moneyMapChart');

// Provide initial chart data
const chart3 = {
  labels: ['1', '2', '3', '4', '5'],
  datasets: [
    {
      label: '',
      data: [],
      backgroundColor: 'rgba(75, 192, 192, 0.6)',
      borderWidth: 1
    }
  ]
};

// Create the chart
const moneyMapChart = new Chart(moneyMapChartElement, {
  type: 'bar',
  data: chart3,
  options: {
    responsive: false,
    scales: {
      y: {
        type: 'linear', // Scale type set to 'linear'
        beginAtZero: true
      }
    }
  }
});

// Function to calculate and update the chart
function updateChart() {
  let amtSavings = parseFloat(amtSavingsInput.value);
  let yieldSavings = parseFloat(yieldSavingsInput.value);
  let amtVanguard = parseFloat(amtVanguardInput.value);
  let yieldVanguard = parseFloat(yieldVanguardInput.value);

  // Convert monthly savings to yearly savings
  amtSavings *= 12;
  amtVanguard *= 12;

  const years = 5; // Desired number of years

  const capitals = calculateCapitalGrowth(amtSavings, yieldSavings, amtVanguard, yieldVanguard, years);

  // Update the chart data
  moneyMapChart.data.datasets[0].data = capitals;
  moneyMapChart.update();
}

// Add event listeners to input fields
amtSavingsInput.addEventListener('input', updateChart);
yieldSavingsInput.addEventListener('input', updateChart);
amtVanguardInput.addEventListener('input', updateChart);
yieldVanguardInput.addEventListener('input', updateChart);

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 <div class="col-md-6">
                <h2>Savings and Investments</h2>
                <p>Growing wealth is about holding onto money. Choose how much of your £<span class="inline-block"
                        id="cashLeftDisplay2"></span> (cash leftover) that you will save or invest.</p>
                <form> <!-- Savings and Investments form-->
                    <div class="mb-3">
                        <label for="amt_Savings" class="form-label">Amount in a Savings Account</label>
                        <input type="text" class="form-control" id="amt_Savings" value="0" placeholder="0">
                      </div>
                      <div class="mb-3">
                        <label for="yield_Savings" class="form-label">Yearly Interest % Earned</label>
                        <input type="text" class="form-control" id="yield_Savings" value="0" placeholder="0">
                      </div>
                      <div class="mb-3">
                        <label for="amt_Vanguard" class="form-label">Amount in Vanguard Account</label>
                        <input type="text" class="form-control" id="amt_Vanguard" value="0" placeholder="0">
                      </div>
                      <div class="mb-3">
                        <label for="yield_Vanguard" class="form-label">Benchmark % Return</label>
                        <input type="text" class="form-control" id="yield_Vanguard" value="0" placeholder="0">
                      </div> 
                </form>
                <button class="btn btn-primary" id="nextButton">Next</button>
            </div>
<canvas id=moneyMapChart></canvas> <!-- <== Added! -->

Error: Unable to access 'amtSavingsInput' variable before it has been initialized

Answer №1

Similar questions

Avoid filling the container with an excessive amount of grids while maintaining the correct aspect ratio

Using AngularJS to display a targeted row in a table

Using D3.js for Page Navigation

Issue encountered with Cheerio while using Node.js

Error message: AngularJS Jasmine spyOn: number has no functionality

Despite making changes, the React Element continues to be rendered

Anticipating the arrival of the requested data while utilizing Ajax sending

What is the best way to display a header element in front of an article element?

The try and catch block in JavaScript is failing to correctly capture the HTTP status

Checkbox Selection - Modify Prompt to "Kindly mark this box to continue"

Mobile Chrome allows users to utilize the IFrame player API for enhanced video

Incorporating text sections into a div container and adjusting the width

Adjusting image width using jQuery

Implementing dynamic page loading with ajax on your Wordpress website

Retrieve Browser Screen Width and Height using MVC3 Razor in the View

"Unable to locate the specified file or directory" error message pops up while attempting to save a file

Determine the amount of time that can be allocated based on the attributes contained within the object

Creating toggling elements in Vue.js using dynamic v-show based on index and leveraging falsey v-if

To enable the radio button upon clicking the list item in JavaScript, simply check the radio button

Setting the value for a textbox using Jquery's .val() function works, while .attr() does not have the