如何让IF语句的执行结果显示在网页而非控制台中？

你的原始代码如下：

let price = 100;
let discount = false;
let discountAmount = 30;
let country = "Syria";

if (discount === true) {
    price -= discountAmount;
} else if (country === "Egypt") {
    price -= 40;
} else if (country === "Syria") {
    price -= 50;
} else {
    price -= 10;
}

console.log(price);

下面是几种把结果显示在网页上的实用方法：

方法1：修改页面中已有的元素 #

先在HTML里添加一个用来显示价格的元素，比如：

<div id="price-output"></div>

然后在你的JavaScript代码里，把console.log(price)替换成下面的代码，就能把计算后的价格插入到这个元素里：

// 获取页面上的目标元素
const priceElement = document.getElementById('price-output');
// 设置元素的文本内容为计算后的价格
priceElement.textContent = `最终价格：${price}元`;
// 如果需要添加HTML样式，也可以用innerHTML（*注意XSS风险*）
// priceElement.innerHTML = `<strong>最终价格：${price}元</strong>`;

方法2：动态创建新元素并添加到页面 #

如果页面里没有现成的元素，也可以直接在JS里创建一个新元素，然后添加到页面中：

// 创建一个p标签元素
const newPriceElement = document.createElement('p');
// 设置元素内容
newPriceElement.textContent = `最终价格：${price}元`;
// 把这个元素添加到页面的body中
document.body.appendChild(newPriceElement);

方法3：用弹窗显示结果（快速测试用） #

如果只是临时测试，也可以用弹窗直接弹出价格，不过这不是在页面内显示，而是独立弹窗：

alert(`最终价格：${price}元`);

内容的提问来源于stack exchange，提问作者Abdullah