如何基于JS的if else条件在HTML指定div调用变量并修复价格显示代码

• 函数定义不规范：JS中普通函数需要加function关键字声明，现有写法不符合基础语法规则
• 变量引用错误：${}是模板字符串专属语法，必须包裹在反引号`内才会被解析为变量，放在普通双引号中无法生效
• 字符串拼接错误：代码中使用阿拉伯句号۔和英文句号.作为拼接符，JS字符串拼接应使用+，或直接用模板字符串无需额外拼接符
• 引号嵌套冲突：HTML标签的双引号和外层包裹的双引号未做转义，会直接触发语法报错
• 无内容输出逻辑：仅定义了data变量存储HTML字符串，没有将内容插入到页面指定位置，调用函数后无任何显示效果
• 空值判断不严谨：仅判断了不等于空字符串，未覆盖null、undefined等其他空值场景

方案1：模板字符串实现（写法简洁，适合快速开发） #

JS文件代码：

// 请确保specialprice、price两个变量在函数执行前已完成赋值
function hasspecialprice() {
    // 严谨校验specialprice是否为有效值
    if (specialprice && specialprice.trim() !== '') {
        return `
            <p class="specialprice">${specialprice},-</p>
            <p class="price"><span class="visibleprice">${price},-</span></p>
        `;
    } else {
        return `<p class="price"><span class="visibleprice">${price},-</span></p>`;
    }
}

HTML调用代码：

<div class="priceplace">
    <script>document.write(hasspecialprice());</script>
</div>

方案2：DOM操作实现（更安全，避免document.write的潜在问题） #

JS文件代码：

// 请确保specialprice、price两个变量在函数执行前已完成赋值
function renderPrice() {
    const priceContainer = document.querySelector('.priceplace');
    if (!priceContainer) return;

    let htmlContent = '';
    if (specialprice && specialprice.trim() !== '') {
        htmlContent += `<p class="specialprice">${specialprice},-</p>`;
    }
    htmlContent += `<p class="price"><span class="visibleprice">${price},-</span></p>`;
    priceContainer.innerHTML = htmlContent;
}
// 页面DOM加载完成后自动执行渲染
document.addEventListener('DOMContentLoaded', renderPrice);

HTML调用代码：

<!-- 无需内嵌script调用，JS会自动识别容器完成渲染 -->
<div class="priceplace"></div>

内容的提问来源于stack exchange，提问作者Mr.Devops