Question

我对 js 很陌生。
我想在选择值改变时执行函数 buildChart。

但我一直收到以下错误。

Uncaught ReferenceError: buildChart is not defined

有人知道如何解决这个问题吗？
非常感谢您提前！你会很有帮助的！！

我的JS函数如下：

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();

我的 HTML 如下：

{% 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

多亏了 Teemu，我才能够解决这个问题。
魔法在最后一行。

这是我的代码：

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);

当带有 dropdown-pp 的 select 标签改变时，函数 buildChart 被调用。

非常感谢提姆！！！！！！！！！！！！

select tag onchange 不执行，函数失败：Uncaught ReferenceError: ... is not defined

1 个答案: