Tôi đang gặp khó khăn với mã javascript này để thay đổi màu nền của kiểu nhập văn bản nếu đầu vào trống.Thay đổi màu nền của đầu vào hộp văn bản không hoạt động khi trống
Đây là mã:
function checkFilled() {
var inputVal = document.getElementById("subEmail").value;
if (inputVal == "") {
inputVal.style.backgroundColor = "yellow";
}
}
Ví dụ: http://jsfiddle.net/2Xgfr/
tôi mong chờ các textbox để đi ra vàng ngay từ đầu.
DEMO-->http://jsfiddle.net/2Xgfr/829/
HTML
<input type="text" id="subEmail" onchange="checkFilled();">
Javascript
function checkFilled() {
var inputVal = document.getElementById("subEmail");
if (inputVal.value == "") {
inputVal.style.backgroundColor = "yellow";
}
else{
inputVal.style.backgroundColor = "";
}
}
checkFilled();
Lưu ý: Bạn đã kiểm tra giá trị và đặt màu thành giá trị không được phép, đó là lý do tại sao nó cho bạn lỗi. thử như trên.
Đừng thêm phong cách cho giá trị của đầu vào để sử dụng như
function checkFilled() {
var inputElem = document.getElementById("subEmail");
if (inputElem.value == "") {
inputElem.style.backgroundColor = "yellow";
}
}
Bạn đã không gọi hàm và bạn có các lỗi khác, nên là:
function checkFilled() {
var inputVal = document.getElementById("subEmail");
if (inputVal.value == "") {
inputVal.style.backgroundColor = "yellow";
}
}
checkFilled();
Bạn đã đặt inputVal thành giá trị chuỗi của đầu vào, nhưng sau đó bạn đã cố gắng đặt style.backgroundColor trên nó, mà sẽ không hoạt động bởi vì nó là một chuỗi, không phải là yếu tố. Tôi đã thay đổi biến của bạn để lưu trữ đối tượng phần tử thay vì giá trị của nó.
trên onLoad thân thẻ thử thiết lập nó như
document.getElementById("subEmail").style.backgroundColor = "yellow";
và sau đó về việc thay đổi đó kiểm tra lĩnh vực đầu vào nếu một số giá trị là có, hoặc sơn nó màu vàng như
function checkFilled() {
var inputVal = document.getElementById("subEmail");
if (inputVal.value == "") {
inputVal.style.backgroundColor = "yellow";
}
}
Hãy thử điều này:
function checkFilled() {
var inputVal = document.getElementById("subEmail");
if (inputVal == "") {
inputVal.style.backgroundColor = "yellow";
}
}
<! DOCTYPE html>
<html>
<head></head>
<body>
<input type="text" id="subEmail">
<script type="text/javascript">
window.onload = function(){
var subEmail = document.getElementById("subEmail");
subEmail.onchange = function(){
if(subEmail.value == "")
{
subEmail.style.backgroundColor = "red";
}
else
{
subEmail.style.backgroundColor = "yellow";
}
};
};
</script>
</body>
Bạn có thể tạo kiểu cho nó bằng javascript và css. Thêm phong cách vào css và sử dụng javascript thêm/xóa kiểu bằng cách sử dụng thuộc tính danh sách lớp. Đây là JSFiddle cho nó.
<div class="div-image-text">
<input class="input-image-url" type="text" placeholder="Add text" name="input-image">
<input type="button" onclick="addRemoteImage(event);" value="Submit">
</div>
<div class="no-image-url-error" name="input-image-error">Textbox empty</div>
addRemoteImage = function(event) {
var textbox = document.querySelector("input[name='input-image']"),
imageUrl = textbox.value,
errorDiv = document.querySelector("div[name='input-image-error']");
if (imageUrl == "") {
errorDiv.style.display = "block";
textbox.classList.add('text-error');
setTimeout(function() {
errorDiv.style.removeProperty('display');
textbox.classList.remove('text-error');
}, 3000);
} else {
textbox.classList.remove('text-error');
}
}
cách xóa màu nếu có nội dung nào đó trong hộp văn bản? – samyb8
@ samyb8 cập nhật fiddle ... –
Tại sao nó không hoạt động nếu thay vì getElementsById tôi đặt getElementsByClassName và thay đổi id cho lớp trong HTML? – samyb8