更改模糊元素的边框颜色

Question

I'm trying to change my text box's border color on blur

var checking = document.getElementById("checking");
function checkTextField() {
       document.getElementById("checking").style.border = "2px solid green";
}

function blurEventFunc() {
      if (document.getElementById("checking") === ''){
        document.getElementById("checking").style.border = "2px solid red";
    } else {
       document.getElementById("checking").style.border = "2px solid green";
    }
}

Answer 1

您将需要检查值而不是整个元素

if (document.getElementById("checking").value === '')

Answer 2

you need to check if the value is empty, not the element its self. also inside the blur function, you can refer to the element using the this keyword

 function blurEventFunc() { if (this.value === ''){ this.style.border = "2px solid red"; } else { this.style.border = "2px solid green"; } } document.getElementById("checking").addEventListener('blur', blurEventFunc); 

 <input type="text" id="checking" />