Question

我有一个HTML表单文档，我想要比较人们输入的id值。

当id值大于另一个时，我想要将值文本颜色更改为红色，如果它更小则将其更改为绿色。

Javascript可能会成功，但这不属于我的联盟。有人可以给我一块骨头吗？

您可以在此处找到表单： http://www.integratech.be/nl/calculator/

我想比较页面中的结果。左栏中的Jaar1到右栏中的Jaar1，依此类推。

谢谢。

Answer 1

我认为Javascript确实是最好的方法，但它不会那么难。在输入中添加一个onchange函数：

<input type="text" onchange="changeValue(this.value)"/>

将以下脚本添加到您的页面：

<script>
function changeValue(val) {
    //Get the value in the other column
    otherVal = document.getElementById("Id of the other text input").value;

    if (val > otherVal) {
        //Change your color here
    }
    else {
        //Change your color here
    }
}
</script>

Answer 2

您应该听取输入的更改。当其中一个发生变化时，请比较这些值。完成后，您可以确定颜色。

获取DOM元素引用的一种方法（通过ID）：MDN

有关eventListeners的一些信息：MDN

将这两者结合起来可能会产生类似的结果：

// references to the elements in the HTML
var input1 = document.getElementById('input1');
var input2 = document.getElementById('input2');

// compare both values
function compare() {
  // get value from input1 (0 if the field is empty)
  var val1 = parseFloat(input1.value) || 0;

  // get value from input2 (0 if the field is empty)
  var val2 = parseFloat(input2.value) || 0; 

  // here you could compare the values
}

// listen for changes on the elements
input1.addEventListener('input', compare);
input2.addEventListener('input', compare);

<强> Fiddle

比较ID值并更改其颜色

2 个答案: