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

JavaScript Interactive Web Pages with JavaScript Traversing and Manipulating the DOM with JavaScript Perfect

Vittorio Somaschini
Vittorio Somaschini
33,371 Points
Posted by Vittorio Somaschini
Vittorio Somaschini
33,371 Points

Can't use the OR operator

Hi.

I am trying to make the to do list app a little better in the javascript course.

First hint from Andrew is: avoid the insertion of empty tasks.

Ok, pretty easy (after the whole course) :

var addTask = function() {
  if (taskInput.value != "") {
    console.log("Add task...");
    //When the button is pressed
    //Create a new list item with the text from #new-task:
    var listItem = createNewTaskElement(taskInput.value);

    // Append listItem to incompleteTaskHolde
    incompleteTasksHolder.appendChild(listItem);
    bindTaskEvents(listItem, taskCompleted);

    taskInput.value = "";

 } else {

      taskInput.value = "";
      taskInput.select();  
  }
}

I have simply added an if statement and a select status.

But I would like to fill in a sentence also (together with the select status) in the taskInput value.

Ok, I have added a var noGoodInputValue = "Please insert new task here" at the beginning and in the else statement I have now:

taskInput.value = noGoodInputValue;
taskInput.select();

Which works fine, I obtain the result I want.

The problem is that if the user clicks the addButton straight after, the app inserts the noGoodInputValue string assigned.

I have tried to use an OR operator like this:

var addTask = function() {
  var noGoodInputValue = "Please insert new task here";
  if (taskInput.value != "" || taskInput.value = noGoodInputValue) {
    console.log("Add task...");
    //When the button is pressed
    //Create a new list item with the text from #new-task:
    var listItem = createNewTaskElement(taskInput.value);

    // Append listItem to incompleteTaskHolder
    incompleteTasksHolder.appendChild(listItem);
    bindTaskEvents(listItem, taskCompleted);

    taskInput.value = "";

 } else {

      taskInput.value = noGoodInputValue;
      taskInput.select();  
  }
}

I get an uncaught referenceError: invalid left-hand side in assignment.

So it is not working, but also I think that the second check should go inside the else statement, because we are now in that situation.

So, I have tried to make another if else statement inside the first else statement, but I haven't managed to have it work.

Can someone point in the right direction?

Hopefully I have made it clear.

Thanks

Vittorio

3 Answers

Paolo Scamardella
Paolo Scamardella
24,828 Points
Paolo Scamardella
Paolo Scamardella
24,828 Points

Should be taskInput.value == noGoodInputValue and not a single =. You are comparing, not assigning. I didn't run the code, so I didn't test it.

Not: if (taskInput.value != "" || taskInput.value = noGoodInputValue) Should be: if (taskInput.value != "" || taskInput.value == noGoodInputValue)

Vittorio Somaschini
Vittorio Somaschini
33,371 Points
Vittorio Somaschini
Vittorio Somaschini
33,371 Points

Yes Paolo.

It looks like I have messed up when finally asking the question here.

The reference error is for that as in the last instance I have left it with 1 = only.

But I have tested it we both == and === and it did not work. I mean it works fine, but when user clicks again on the addButton it inserts the noGoodInputValue variable.

Paolo Scamardella
Paolo Scamardella
24,828 Points
Paolo Scamardella
Paolo Scamardella
24,828 Points

Sorry Vittorio, I'm not understanding your question. I get "uncaught referenceError: invalid left-hand side in assignment" error was fixed by adding the extra equals sign(=), but I'm not understanding your question after that. Could you please rephrase your question? Also, please paste your whole code in jsfiddle or something like that, so I can see what's going on.

Vittorio Somaschini
Vittorio Somaschini
33,371 Points
Vittorio Somaschini
Vittorio Somaschini
33,371 Points

Ok Paolo.

I have resolved.

I wasn't able to have it check 2 conditions using the OR operator.

But now I have simply swapped places, I have put the "bad" condition in the if statement and the "good" condition in the else statement. Were bad means no execution of addTask() and good its execution.

It simply works wonderful, precisely as I wanted.

My final code for the addTask function is so:

var addTask = function() {
  var noGoodInputValue = "Please insert new task here";
  if (taskInput.value == "" || taskInput.value == noGoodInputValue) {
    taskInput.value = noGoodInputValue;
    taskInput.select();;

 } else {

    console.log("Add task...");
    //When the button is pressed
    //Create a new list item with the text from #new-task:
    var listItem = createNewTaskElement(taskInput.value);

    // Append listItem to incompleteTaskHolder
    incompleteTasksHolder.appendChild(listItem);
    bindTaskEvents(listItem, taskCompleted);

    taskInput.value = ""; 
  }
}

This has all included.

Thanks for your effort, I can't explain how but it pointed me in the right direction. It looks like I struggled with the comparison using the or operator and the != operator together.

Vittorio