button.addEventListener is not a function

Question

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

Answer 1 · 2019-01-31T01:45:56Z

January 31, 2019 1:45am

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];

Answer 2 · 2019-01-31T01:57:58Z

January 31, 2019 1:57am

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!

Answer 3 · 2019-01-31T02:06:06Z

January 31, 2019 2:06am

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

Welcome to the Treehouse Community

Looking to learn something new?

ringo reive

ringo reive

button.addEventListener is not a function

3 Answers

Steven Parker

Steven Parker

ringo reive

ringo reive

ringo reive

ringo reive

Steven Parker

Steven Parker