求助：使用JavaScript的if/else语句修改文本颜色失败问题

Hey there! 作为JS新手踩这些坑太正常啦，我帮你梳理下代码里的几个关键问题，改完就能正常运行啦～

你代码里的核心错误 #

• 混淆了赋值=和比较===：你所有if条件里用的都是=，这是把右边的值赋给左边的变量，不是判断相等！比如if (element.value = 'Submitted')会直接把'Submitted'赋值给element.value，然后这个表达式的结果就是'Submitted'（真值），所以第一个if永远会执行，后面的分支根本不会触发。正确的比较应该用===（严格相等）或者==。
• <td>元素没有value属性：value是给表单元素（比如input、select）用的，要获取里的文本内容，得用textContent或者innerText。
• 语法错误：你多分支代码里的else if (document.getElementById('payment_status_cl').value = 'Warning'{少了一个闭合的)，导致整个函数语法报错，浏览器根本无法执行这段代码。
• DOM元素和字符串直接比较：你最后那段代码里var status = document.getElementById("payment_status_cl");，这里的status是DOM节点对象，不是文本内容，直接和字符串'Submitted'比较肯定不相等，得先取它的文本内容。

修正后的完整代码 #

先把HTML和JS整合好，这里给你两种实现方式：

方式1：直接修改的文字颜色 #

<td id="payment_status_cl" style="text-align: center; height:25px"><%=resultSet.getString("payment_status")%></td>

<script>
function f_color(){ 
  const statusElement = document.getElementById('payment_status_cl');
  // 获取<td>里的文本内容，trim()去掉前后空格避免空格干扰
  const statusText = statusElement.textContent.trim();

  if (statusText === 'Submitted') { 
    statusElement.style.color = "Green"; 
  } else if (statusText === 'Pending') { 
    statusElement.style.color = "Orange"; 
  } else if (statusText === 'Warning') { 
    statusElement.style.color = "Yellow"; 
  } else if (statusText === 'Overdue') { 
    statusElement.style.color = "Red"; 
  } 
} 
// 确保DOM加载完成后再执行函数，避免找不到元素
document.addEventListener('DOMContentLoaded', f_color);
</script>

方式2：修改div的背景色（对应你最后尝试的需求） #

<td id="payment_status_cl" style="text-align: center; height:25px"><%=resultSet.getString("payment_status")%></td>
<div id="centerbox1">...</div>

<script>
function fcolor() { 
  const statusElement = document.getElementById("payment_status_cl");
  const statusText = statusElement.textContent.trim();
  const centerBox = document.getElementById("centerbox1");

  if (statusText === 'Submitted') { 
    centerBox.style.backgroundColor = '#99C262'; 
  } else if (statusText === 'Pending') { 
    centerBox.style.backgroundColor = '#F8D347'; 
  } else if (statusText === 'Warning') { 
    centerBox.style.backgroundColor = '#FF6C60'; 
  } 
}
// 同样确保DOM加载完成后执行
document.addEventListener('DOMContentLoaded', fcolor);
</script>

额外小提示 #

• 用const或者let代替var，避免变量提升带来的问题。
• 把DOM元素的获取放在函数里或者DOM加载完成后，不然可能出现元素还没渲染就执行JS，导致getElementById返回null的情况。
• 用trim()去掉文本前后的空格，避免后端返回的字符串带空格导致匹配失败。

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