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

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

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

这是最初的测量值：虽然做了一些更改

然后，我得到了另一个长函数，它只在输入和单击按钮时发生

我最初使用follow 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（x=xyz）{
addHTML+='诸如此类
}否则如果（x=yz）{
addHTML+='诸如此类的废话；
否则{
addHTML+='诸如此类
}

if/else语句的工作原理如上图所示（如果它与用户的输入匹配，则会添加HTML行）

仪表本身也可以工作（如果我在运行之前在HTML文档中包含

）

我遇到的问题是，我无法直接从上面的if/else语句添加仪表。我尝试了多种方法，但都没有成功，例如：

addHTML+=''+gaugeProgress（0.5）+'；

及

addHTML+='
；
addHTML+=document.getElementById（“图表标尺”）.innerHTML=gaugeProgress（0.5）；

---

非常感谢您的帮助！

您必须在调用

innerHTML

之前输出html！并且您尝试将DOM对象作为字符串添加到

addHTML

中…选择类似

document..id..（id）的内容.innerHTML=addHTML

，然后执行你的标尺进程。谢谢你的回答！虽然我不太清楚你所说的“在调用innerHTML之前输出html”是什么意思？这不是我用

addHTML+='
'；addHTML+=document.getElementById（“图表标尺”）.innerHTML=gaugeProgress（0.5）所做的吗；

？如果不清楚，很抱歉……您正在为字符串分配

”
“

。因此，typeof

addHTML

是一个字符串。之后，您尝试使用id

chart gauge

获取DOM对象，该id目前只是一个字符串，并使用

gaugeProgress

分配它。这并不清楚，只是我缺乏编程知识！我现在明白您的意思了，但是，有没有办法做到这一点最初不向html文档添加任何内容（与您的示例相同，但不在html文档中包含

）？您能否在JSFIDLE或codepen上发布您的

gaugeProgress

？

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