select 标记 onchange 未执行，function 失败：未捕获的 ReferenceError：...未定义

Question

I'm pretty new to js.
I want to execute the function buildChart when the select value changes.

But I get the following error all the time.

 Uncaught ReferenceError: buildChart is not defined

Does anybody have an idea how to solve that?
Thank you very much in advance! You would be a great help!!

My JS function is as follows:

 class GetData { getCanvasUrl(id) { return document.getElementById(id).getAttribute("data-url") } getDropdownValue() { return document.getElementById("dropdown-pp").value; } async fetchData(url) { const response = await fetch(url); return await response.json(); } } const getData = new GetData(); function buildChart() { let dropdownValue = getData.getDropdownValue(); if (dropdownValue === "All Generations") { console.log("All Generations") } else { console.log("other") } } buildChart();

My HTML follows here:

 {% extends "base.html"%} {% load static %} {% block head %} <script rel="script" type="module" src="{% static 'js/productionplan/productionplan.js' %}" defer></script> {% endblock head %} {% block body %} <select id="dropdown-pp" onchange="buildChart();" class="form-select" aria-label="Default select example"> {% endblock %}

Answer 1

Thanks to Teemu I was able to solve the problem.
The magic is in the last line.

Here is my code:

import  { stackedBar } from '../charts.js'

stackedBar("#bar-chart");


class GetData {

    getCanvasUrl(id) {
        return document.getElementById(id).getAttribute("data-url")
    }

    getDropdownValue() {
        return document.getElementById("dropdown-pp").value;
    }

    async fetchData(url) {
        const response = await fetch(url);
        return await response.json();
    }
}

const getData = new GetData();

function buildChart() {
    let dropdownValue = getData.getDropdownValue();
    if (dropdownValue === "All Generations") {
        console.log("All Generations")
    } else {
        console.log("other")
    }
}

document.getElementById("dropdown-pp").addEventListener("change", buildChart);

When the select tag with dropdown-pp changes the function buildChart is called.

Thanks a lot Teemu!!!!!!!!!!!