RzeIMz RzeIMz - 14 days ago 5
Javascript Question

Javascript compare two text fields

I'm trying to compare two Textfields with Javascript. But one of them must have a bigger value then the other one, like 5 = 4.

I dont know why.

<script>

document.getElementById("text1").addEventListener("keydown", testpassword2);

function testpassword2() {

var text1 = document.getElementById("text1");
var text2 = document.getElementById("text2");

if(text1.value == text2.value){
text2.style.borderColor = "#2EFE2E";
}
else{
text2.style.borderColor = "red";
}}

</script>

Answer

Some issues with your code:

  • You only had an event listener on the first input. You'll need to add an event listener to the second input as well.
  • The value on keydown won't contain the same value as on keyup. You'll need to do keyup to keep up with user input.

Working fiddle here.

document.getElementById("text1").addEventListener("keyup", testpassword2);
document.getElementById("text2").addEventListener("keyup", testpassword2);

function testpassword2() {
  var text1 = document.getElementById("text1");
  var text2 = document.getElementById("text2");
  if (text1.value == text2.value)
    text2.style.borderColor = "#2EFE2E";
  else
    text2.style.borderColor = "red";
}
<body>                
<input type="text" id="text1" size="30">
<input type="text" id="text2" size="30">   
</body>