使用 JavaScript 根据输入值更改 innerText 的颜色

Question

下面是通过输入文本中的值更改 InnerText 颜色的示例代码。

输出如下所示。颜色不变

function validate() {
  var msg;
  var result;
  if (document.myForm.userPass.value.length > 5) {
    msg = "good";
    result = msg.fontcolor("green");
  } else {
    msg = "poor";
    result = msg.fontcolor("red");
  }
  document.getElementById('mylocation').innerText = result;
}

<form name="myForm">
  <input type="password" value="" name="userPass" onkeyup="validate()"> Strength:
  <span id="mylocation">no strength</span>
</form>

给出的答案 here 不是我需要的答案。

Answer 1

由于 HTML5 没有使用字体标签，所以旧的 fontcolor 方法在浏览器中不起作用。

所以我尝试了下面的代码。

function validate() {
  var msg;

  if (document.myForm.userPass.value.length > 5) {
    document.getElementById('mylocation').style.color = "green";
    msg = "good";
  } else {
    document.getElementById('mylocation').style.color = "red";
    msg = "poor";
  }
  document.getElementById('mylocation').innerText = msg;
}

<form name="myForm">
  <input type="password" value="" name="userPass" onkeyup="validate()"> Strength:
  <span id="mylocation">no strength</span>
</form>
<hr/>

使用 JavaScript 根据输入值更改 innerText 的颜色

Change the color of innerText according to the input value using JavaScript

javascript

innertext