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 JavaScript Basics (Retired) Making Decisions with Conditional Statements Introducing Conditional Statements

Posted by ringo reive
ringo reive
41 Points

button.addEventListener is not a function

I am trying to implement an alert message function but the addEventListener doesn't work. Can somebody help me? Here is my code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="styles.css" type="text/css" />
    <title>La App del Clima!</title>
</head>
<body>
    <div class="global">
        <h1 class="title">Bienvenido(a) al App del Clima de PiononoChic</h1>

        <div class="section">
            <h2 class="section__instruction">Ingresa la temperatura que crees que hace en tu ciudad</h2>
            <p class="section__restriction">(Esta debe estar entre -53 C y +40C)</p>
            <input class="input" type="text" name="temperatura"/>
            <button class="button">Enviar!</button>

        </div>

    </div>
    <script type="text/javascript" src="main.js"></script>
</body>
</html>

*{
    margin:0px;
    padding:0px;
    box-sizing: border-box;
}


.global{
    display:flex;
    position: relative;
    margin: auto;
    background-color: #512DA8;
    align-items: center;
    height: 678px;
}

.title{
    display: flex;
    position: absolute;
    color:blue;
    width: 900px;
    align-content: right;
    color: #FFFFFF;
    margin: -120px auto auto 300px;
    font-size: 40px;
}

.section{
    display: flex;
    position: relative;

    margin-top: 20px;

    &__instruction{
        display: flex;
        position: absolute;
        margin: -80px auto auto 340px;
        width: 800px;
        font-size: 30px;
    }

    &__restriction{
        display: flex;
        position: absolute;
        margin: -40px auto auto 550px;
        width: 600px;
        font-size: 20px;

    }


}

.input{
    display: flex;
    position: absolute;
    margin: 0px auto auto 600px;
    height: 40px;
    font-size: 15px;
}

.button{
    display: flex;
    position: absolute;
    margin: 80px auto auto 620px;
    height: 45px;
    width: 150px;
    font-size: 25px;
    padding: 5px 20px 5px 35px;
    border-radius: 10px;
    background-color: #212121;
    border-color: #212121;
    color: #512DA8;
    cursor: pointer;

}
.button:hover {
    background-color: #FF4081;
    border-color: #FF4081;
}

var button = document.getElementsByClassName("button");
var input = document.getElementsByClassName("input").value;

button.addEventListener('click', function(){
    if (input>-34 && input<15){
        alert('Es demasiado frio. Usa una bufanda Chic y una casaca de cuero negro!');

    } else if (input>15 && input <40) {
        alert('Es demasiado caluroso. Puedes combinar una falda con unos botines!');

    } else {
        alert('Ingresa un numero adecuado, sigue las instrucciones');
    }
});

Thanks

3 Answers

Steven Parker
Steven Parker
231,007 Points
Steven Parker
Steven Parker
231,007 Points

The "getElementsByClassName" method returns an element collection, but the "addEventListener" method is only available on an individual element.

Since it appears there is only one element with that class, you can add an index of 0 to select that specific element:

var button = document.getElementsByClassName("button")[0];
ringo reive
ringo reive
41 Points
ringo reive
ringo reive
41 Points

Ohhhhhh you were right. Now It doesn't show the error. Many Thanks!!!

But I see another problem, it's not reading the if statement correctly. It is showing me the alert of the else statement even if I pass a number between the conditions:

else { alert('Ingresa un numero adecuado, sigue las instrucciones'); }

What can be happen there?

A lot of thanks!

ringo reive
ringo reive
41 Points
ringo reive
ringo reive
41 Points

I solved it! is was the same problem! Thanks!

Steven Parker
Steven Parker
231,007 Points
Steven Parker
Steven Parker
231,007 Points

Congratulations! :+1: Feels good, doesn't it? :wink:

You can mark the question solved by choosing a "best answer". And happy coding!