如何有条件地将JavaScript图表添加到HTML文档？

Question

我有一个函数，它接受一个数字变量并根据变量产生一个量表。

function gaugeProgress(number) {
    percent = number;
    barWidth = 40;
    numSections = 3;
    ...
};

这是最初的衡量标准：https://codepen.io/jaketrent/pen/eloGk虽然已经做了一些改动。

然后我得到了另一个长函数，只有在输入并点击一个按钮后才会出现。

我最初有跟随if / else语句，以确定输入是否匹配，并且如果有，则向HTML文档添加消息。

 if(x = xyz) {
     addHTML += '<p>blah</p>'
 } else if (x = yz) {
     addHTML += '<p>blah blah</p>';
 else {
     addHTML += '<p>blah blah blah</p>'
 }

if / else语句的工作方式如上所示（如果匹配用户的输入，它会添加HTML行。）

该指标也可单独使用（如果我在运行之前在我的HTML文档中包含<div class=chart-gauge></div>。

我遇到的问题是我无法直接从上面的if / else语句添加量表。我尝试了各种各样没有运气的方法，例如：

addHTML += '<div class="chart-gauge">' + gaugeProgress(0.5) + '</div>';

和

addHTML += '<p id="chart-gauge"></p>';
addHTML += document.getElementById("chart-gauge").innerHTML = gaugeProgress(0.5);

非常感谢任何帮助！