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

Question

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');

}

Answer 1 · 2018-12-28T15:58:56Z

December 28, 2018 3:58pm

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.

Answer 2 · 2018-12-28T21:41:10Z

December 28, 2018 9:41pm

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?

Answer 3 · 2018-12-28T22:06:22Z

December 28, 2018 10:06pm

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.

Welcome to the Treehouse Community

Looking to learn something new?

Pawel Ellwart

Pawel Ellwart

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

3 Answers

Emmanuel C

Emmanuel C

Pawel Ellwart

Pawel Ellwart

Emmanuel C

Emmanuel C

Pawel Ellwart

Pawel Ellwart