如何使html，JS和css计算器上的负值输出显示为红色？

<div id="result" class="output">计算结果： <span id="outputValue">0</span></div>

.output {
  font-size: 18px;
}

.negative-value {
  color: red;
}

// 获取计算结果的值
var result = -10;

// 判断是否为负数
if (result < 0) {
  // 获取输出元素
  var outputElement = document.getElementById("outputValue");
  
  // 为输出元素添加类名
  outputElement.classList.add("negative-value");
}

// 更新输出值
outputElement.textContent = result;