Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

How to make the alert() work after creating a 'li' list by the function CreateLi();?

The alert(); should appear once the function creates a first ''li" item on the list. Once the addEventLister runs it should show the alert box, the function CreateLi works but the if statement doesn't.

HTML code:

<!DOCTYPE html>
<html lang="pl">
<head>

<!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">



    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


    <!-- Google Fonts -->

   <link href="https://fonts.googleapis.com/css?family=Roboto|Signika" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css?family=Chivo|Comfortaa" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css?family=Gudea|Open+Sans" rel="stylesheet">
   <link rel="stylesheet"  type="text/css" href="styles.css">


<title>Page Title</title>
</head>
<body>
<div class="container-fluid h_back">
    <div class="row">
            <div class="col-lg-12 ">
                <h1 class="text-center  ">Easy ToDO</h1>
            </div>
            <div class="col-lg-2 mt-2 ">

            </div>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-lg-4 offset-lg-4">
            <div class="input-group input-group-sm mb-3 mt-3">
                <input type="text" class="form-control addItemInput" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm" value= '+ Add an item...' id='AddItem'> 
            </div>
        </div>
        <div class="col-lg-1 offset-lg-2 mt-3">

                <p class="small text-center PrintMe"><img src="Icons/001-printer.png" class="mx-auto d-block" >Print list</p>
        </div>
        <div class="col-lg-1  mt-3">
            <p class="small text-center PrintMe"><img src="Icons/009-email-1.png" class="mx-auto d-block" ><a href="mailto:name@email.com">Send list</a></p>
        </div>
    </div>
    <div class="row">
        <div class="col-lg">
            <ul class="list-group">

            </ul> 
        </div> 



    </div> 

        <div class="row">
            <div class="col-lg-12 text-center mt-3 createButton">

            </div>
        </div>

</div>



<script src='script.js'></script>
</body>
</html>

JAVASCRIPT CODE

/*Empty variable*/
var liVerify;

Item.addEventListener ('keyup', (e) => {

    const EnterInput= e.key;

if (EnterInput == 'Enter') {

if (Item.value ) {


    CreateLi();




Item.value = '+ Add an item...';    
liVerify = 1;


    }


/*I don't know why this if condition doesn't work. liVerify changes to 1 but the if condition doesn't work*/
if (liVerify == 1) {


alert('it works');

}

3 Answers

Emmanuel C
Emmanuel C
10,635 Points

Hey,

Looking over your code I noticed a bunch of missing semicolons and a missing parenthesis, which caused unexpected end of line errors. After inserting these missing symbols. I got an Item is undefined error. I assumed you were wanting to reference the input with id="AddItem" and use that as Item. So I added that to your code. After that I got an CreateLi() is undefined error. I don't know if its reference in another script you haven't posted but I can't assume how it works so i can't write it. After commenting out the CreateLi(), the alert shows when I press enter while the input is focused on. With the changes i made your code looks like this

var liVerify;
var Item = document.getElementById('AddItem');

Item.addEventListener ('keyup', (e) => {

    const EnterInput= e.key;

    if (EnterInput === 'Enter') {

        if (Item.value ) {
            //CreateLi();
        }
        Item.value = '+ Add an item...';    
        liVerify = 1;
    }

    console.log(liVerify);
    if (liVerify === 1) {
        alert('it works');
    }
});

One thing to note is that while the alert prompt is up, the keyup event is still running. That can slow down or even stop other scripts from running.

If youre running this in a browser it may be helpful to use devTool by pressing F12, this shows the console which can tell you which errors your code is throwing and you can use console.log() to see the values of your variables during runtime.

Good luck, help this helped.

Thank you Emmanuel,

there are missing semicolons because it's not a full code, I wanted to make it less complicated and I might miss something. Basically I'm building a To Do List and want to add a button after creating a list of 'li' elements nested in "ul". I want the button to appear only when the list is created, in other words: I want to create a button when li elements or are added to the html. Is this possible?

Emmanuel C
Emmanuel C
10,635 Points

Yes its is, Typically there are several ways to do any certain task in programming. For this one you can create elements dynamically in js, by using functions like document.createElement() and element.insertBefore(), Heres a link to documentation on how they work.

Create elements in JS

You could also have the button already there in your html, but have its display style set to none, to hide it then when you want in js you can change it back to block.

Its up to personal preference, and your specific need

Once again thank you for your help! I was already experimenting with the second approach but now I have some wider view after reading your first post, I will also take a look into the shared MDN link and hope to figure out some solution.