Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Tech Solutions
6,077 PointsDisabling Add button if input is empty - Interactive Web Pages with JavaScript
Hi,
I've solved the first part of the final challenge on the 'Interactive Web Pages with JavaScript' course, toggling the 'Edit' text to 'Save' but I can't work out how to disable the Add button if the input field is empty.
I think I'm pretty close, if I click Add when the field is empty the button is disabled but then if I enter a value the button isn't enabled again. Likewise if I refresh and enter a value first it will enable the button and add the item but then the button remains enabled even when no input value is added.
Can you help?
Here's my script from the add task section:
//add tasks
var addTask = function(){
if(taskInput.value.length === 0){
addButton.disabled = true;
console.log('button disabled');
}else{
console.log('task added');
addButton.disabled = false;
console.log('button enabled');
var listItem = createNewTaskElement(taskInput.value);
//incompleteTasksHolder
incompleteTasksHolder.appendChild(listItem);
bindTaskEvents(listItem, taskCompleted);
taskInput.value = " ";
}
}
Andrew Shook
31,709 PointsI think Steven Heigl's idea is right, but I would recommend using the onchange event listener.
Tech Solutions
6,077 PointsHmm sounds like a good plan but still can't get it to work, have messed about with your code and almost got it working but still not perfect
var add = document.getElementById('add');
addButton.addEventListener("click",function(){
if(taskInput.value.length === 0){
console.log('disabled');
add.disabled = true;
}else{
console.log('enabled');
add.enabled = true;
}
});
4 Answers
Blake Feggans
11,172 PointsInstead of using "change", I was able to achieve your desired result by listening for the "keyup" event.
var add = document.getElementById('add');
var taskInput = document.getElementById('new-task');
var input = taskInput.val;
taskInput.addEventListener("keyup",function(){
if(taskInput.value.length === 0){
console.log('disabled');
add.disabled = true;
}
else {
console.log('enabled');
add.disabled = false;
}
});
Tech Solutions
6,077 PointsThanks for your help Blake that's almost solved it :)
I changed your code a bit to disable the button before the if else statement runs and now if you try add text when it's empty the button is disabled and if you enter text the button is enabled. The only problem remaining is that it doesn't seem to be checking the next time I try enter a blank value, i.e. if I enter some text and add it the button is enabled and stays enabled allowing me to add blank tasks afterwards.
var add = document.getElementById('add');
var taskInput = document.getElementById('new-task');
var input = taskInput.val;
add.disabled = true;
taskInput.addEventListener("keyup",function(){
if(taskInput.value.length === 0){
console.log('disabled');
add.disabled = true;
}else{
console.log('enabled');
add.disabled = false;
}
});
addButton.addEventListener('click', addTask);
Update
I've solved it now :D
adding to your code I also set the button back to disabled after each new task was added:
//add tasks
var addTask = function(){
console.log('task added');
var listItem = createNewTaskElement(taskInput.value);
incompleteTasksHolder.appendChild(listItem);
bindTaskEvents(listItem, taskCompleted);
taskInput.value = " ";
//disable add button again
add.disabled = true;
console.log('disabled');
}
Blake Feggans
11,172 PointsEchoing Andrew, I think you'll want to use "change" or "onchange" instead of the "click" listener. Right now the button activation or de-activation will only happen when the addButton is physically clicked.
This should work --> addButton.addEventListener("change",function().......
I would need to take a look at your HTML for the project to be certain.
Tech Solutions
6,077 PointsI've been trying to use change instead but not having much luck, here's my markup:
<label for="new-task">Add Item</label><input id="new-task" type="text" ><button id="add">Add</button>
Tech Solutions
6,077 PointsAndrew Chalkley can you help with this one? been stuck on it for a while, the logic seems right to me but still it doesn't work, here's my current script:
taskInput.addEventListener('onchange', function(){
if(taskInput.value.length === 0){
console.log('disabled');
addButton.disabled = true;
}else{
addButton.disabled = false;
console.log('enabled');
}
});
addButton.addEventListener('click', addTask);
Blake Feggans
11,172 PointsYou should be able to disable it again as a part of your addTask function. This way the button will be disabled on page load and after every time a task is added.
Tech Solutions
6,077 Pointsyep that's what I've done, just solved it :) see my update above
Steven Heigl
3,795 PointsSteven Heigl
3,795 PointsI believe the way that the addTask worked is that it runs that function on click of the Add Task button. So, if the add button becomes disabled, there's no way for it to run the function to check whether or not the field is now populated.
I think maybe a better way to run the validation is to add an event listener for that field and have the validation function within that listener. You'll have to move this chunk of code outside of the addTask function and set the button to be disabled by default.
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener
It would be something like this, so that way every time you press a key in that field it'll check to see if the Add Task button should be disabled or not.
I'll have to go back and check my notes on this project, but I think I added an alert popup if the user tried to enter a value with no data, but disabling the button I think is a better solution. Hope this works!