需要幫助的JavaScript增添類

這是我的代碼：需要幫助的JavaScript增添類

<form> 
<input type="text" id="username" onblur="class();" name="username"> 
</form> 
<script> 
    function class() { 
     var username = document.getElementById('username'); 
     if (username == "") { 
      //Now here I want to add a class 
     } 
    } 
</script>

現在我想的時候不會給出用戶名值添加類。我怎樣才能做到這一點？

來源

2015-10-19 Samiul Haque Sohan

'用戶名== 「」'是不正確的，因爲一個元素不能爲空字符串。 – Xufox

你的意思是說'input'是空的？ –

注意：你不能在函數聲明中使用'class'作爲函數的名字（你上面有什麼），因爲名字必須有* Identifier *，* Identifier *是* * IdentifierName *而不是* ReservedWord *」。 'class'是一個保留字（他們實際上是在ES2015中開始做的）。 –

與您的代碼的主要問題是：

您使用class其中一個標識符預期，但不能使用class作爲標識符，因爲它是一個保留字。
你得到元素爲username字段，而不是它的值。

聽起來好像你想要在blur事件中添加一個類到失去焦點的元素。如果是這樣，用你的代碼改變最小，您：

使用的功能不同的名稱，如function class() { ... }是無效的，class是一個保留字。
通過this進入您的函數onblur。
爲你的函數聲明一個elm參數（無論你想要什麼名字）。
將課程添加到elm.classList（在現代瀏覽器上）或element.className（用於最大兼容性）。

例子：

function checkUserName(elm) { 
 
    var username = elm.value; // Or ... this.value.trim(); 
 
    if (!username) { 
 
    elm.className += " no-name"; 
 
    } else { 
 
    elm.className = elm.className.replace(/\bno-name\b/, ''); 
 
    } 
 
}

.no-name { 
 
    background-color: yellow; 
 
    border: 1px solid red; 
 
}

<form> 
 
    <input type="text" id="username" onblur="checkUserName(this);" name="username"> 
 
</form>

說了這麼多，我不會用老式onxyz屬性可言。相反，我會用現代的事件處理：

document.getElementById("username").addEventListener("blur", function(e) { 
 
    var username = this.value; // Or ... this.value.trim(); 
 
    if (!username) { 
 
    this.className += " no-name"; 
 
    } else { 
 
    this.className = this.className.replace(/\bno-name\b/, ''); 
 
    } 
 
}, false);

.no-name { 
 
    background-color: yellow; 
 
    border: 1px solid red; 
 
}

<form> 
 
    <input type="text" id="username" onblur="checkUserName(this);" name="username"> 
 
</form>

來源

2015-10-19 16:30:20

感謝您的幫助:) –

-1

var username = document.getElementById('username').value 

if (username == "") { 
    document.getElementById('username').className += " someClass"; 
}

來源

2015-10-19 16:30:51 SoluableNonagon

需要幫助的JavaScript增添類

回答

相關問題