Javascript 根据从下拉列表中选择的选项渲染模板

我一直试图根据用户从下拉列表中选择的选项呈现模板，但不幸的是，这对我不起作用。我的代码如下所示

const啤酒={
名称：“比利时智慧”，
酿酒厂：`汽笛酿酒厂'，
关键词：[“苍白”、“多云”、“五香”、“酥脆”]，
短信：“你好”
};
函数renderKeywords（关键字）{
返回`
${keywords.map（关键字=>`${keyword}`）}
`;
}
函数renderHtml（texto）{
返回`
`;
}
功能选择元件（elem）{
如果（元素值==‘多个’）{
document.getElementById（'p2'）。innerHTML=${
renderKeywords（啤酒.关键词）
};
}否则{
document.getElementById（'p2'）。innerHTML=${
renderHtml（beer.texto）
};
}
}
常量标记=`
${beer.name}
${beer.brewery}
选择
倍数
仅有一个的
`;
document.getElementById（'panel'）。innerHTML=标记
似乎是个打字错误，伙计。行
${renderKeywords（beer.keywords）}
和
${renderHtml（beer.texto）}
抛出错误，因为您试图将
${}
从模板文本传递到
innerHTML
属性，但没有反勾号

尽管不需要反勾号和方括号，因为
renderKeywords（）
已经返回字符串

...
  if (elem.value === 'multiple') {
    document.getElementById('p2').innerHTML = $ {
      renderKeywords(beer.keywords)
    };
  } else {
    document.getElementById('p2').innerHTML = $ {
      renderHtml(beer.texto)
    };
  }
...


const啤酒={
名称：“比利时智慧”，
酿酒厂：`汽笛酿酒厂'，
关键词：[“苍白”、“多云”、“五香”、“酥脆”]，
短信：“你好”
};
函数renderKeywords（关键字）{
返回`
${keywords.map（关键字=>`${keyword}`）}
`;
}
函数renderHtml（texto）{
返回`
`;
}
功能选择元件（elem）{
如果（元素值==‘多个’）{
document.getElementById（'p2'）.innerHTML=renderKeywords（beer.keywords）；
}否则{
document.getElementById（'p2'）.innerHTML=renderHtml（beer.texto）；
}
}
常量标记=`
${beer.name}
${beer.brewery}
选择
倍数
仅有一个的
`;
document.getElementById（'panel'）。innerHTML=标记