Why does my Javascript with Class not work?

Asked

Viewed 220 times

-3

<!DOCTYPE html>
<html lang = "pt-br">
    <head>
        <meta charset = "UTF-8"/>
        <title>JS 1</title>
        <style type="text/css">
            * {
                font-family: arial;
            }
            body {
                margin: 0px;
            }
            .BG_1 {
                height: 689px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .BOX_BG_1 {
                width: 380px;
                height: 240px;
                border-radius: 10px;
                background-color: gray;
            }
            .MIN_BOX_BG_1 {
                width: 380px;
                height: 80px;
                color: white;
                font-size: 25px;
                line-height: 80px;
                text-align: center;
            }
            .MSG_MIN_BOX_BG_1 {
                outline: 0px;
                border: 0px;
                width: 250px;
                height: 30px;
                background-color: white;
                padding-left-right: 10px;
                text-align: center;
            }
            .BOTAO_MIN_BOX_BG_1 {
                outline: 0px;
                border: 0px;
                height: 40px;
                width: 75px;
                color: green;
                background-color: yellow;
                border-radius: 5px;
            }
            .MIN_BOX_BG_1 {
                display: flex;
                justify-content: center;
                align-items: center;
            }
        </style>
    </head>
    <body>
        <div class = "BG_1">
            <div class = "BOX_BG_1">
                <div class = "MIN_BOX_BG_1">
                    Calc Space
                </div>
                <div class = "MIN_BOX_BG_1">
                    <input class = "MSG_MIN_BOX_BG_1" placeholder = "Digite aqui sua idade!"/>
                </div>
                <div class = "MIN_BOX_BG_1">
                    <BUTTON class = "BOTAO_MIN_BOX_BG_1" onclick = "Resposta()">Enviar</BUTTON>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            function Resposta() {
                var x = document.getElementsByClassName('MSG_MIN_BOX_BG_1').value;
                if(x <= 0) 
                    document.getElementsByClassName('MIN_BOX_BG_1').innerHTML = 'Não válido!';
                if(x>0)
                    document.getElementsByClassName('MIN_BOX_BG_1').innerHTML = 'Esse número é válido!';
            }
        </script>
    </body>
</html>
javascript css
  • 1

    What are you trying to do?

  • I just want to validate a data that the client will put in INPUT as valid or not. Obg!

2 answers

1


The method document.getElementsByClassName() back an array. So, you have to access the element in the desired position.

Follow your corrected code. Note the indexes [0] used to make it work.

function Resposta() {
    var x = document.getElementsByClassName('MSG_MIN_BOX_BG_1')[0].value;
    if (x <= 0) {
        document.getElementsByClassName('MIN_BOX_BG_1')[0].innerHTML = 'Não válido!';
    } else {
        document.getElementsByClassName('MIN_BOX_BG_1')[0].innerHTML = 'Esse número é válido!';
    }
}
* {
    font-family: arial;
}
body {
    margin: 0px;
}
.BG_1 {
    height: 689px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.BOX_BG_1 {
    width: 380px;
    height: 240px;
    border-radius: 10px;
    background-color: gray;
}
.MIN_BOX_BG_1 {
    width: 380px;
    height: 80px;
    color: white;
    font-size: 25px;
    line-height: 80px;
    text-align: center;
}
.MSG_MIN_BOX_BG_1 {
    outline: 0px;
    border: 0px;
    width: 250px;
    height: 30px;
    background-color: white;
    padding-left-right: 10px;
    text-align: center;
}
.BOTAO_MIN_BOX_BG_1 {
    outline: 0px;
    border: 0px;
    height: 40px;
    width: 75px;
    color: green;
    background-color: yellow;
    border-radius: 5px;
}
.MIN_BOX_BG_1 {
    display: flex;
    justify-content: center;
    align-items: center;
}
<div class = "BG_1">
    <div class = "BOX_BG_1">
        <div class = "MIN_BOX_BG_1">
            Calc Space
        </div>
        <div class = "MIN_BOX_BG_1">
            <input class = "MSG_MIN_BOX_BG_1" placeholder = "Digite aqui sua idade!"/>
        </div>
        <div class = "MIN_BOX_BG_1">
            <BUTTON class = "BOTAO_MIN_BOX_BG_1" onclick = "Resposta()">Enviar</BUTTON>
        </div>
    </div>
</div>

To test, you can click the blue "Run" button above and click on the link to see "Whole Page".

0

The error is in the method getElementsByClassName.

The getElementsByClassName returns an object array with all child elements that have the name of the given class. When invoked in the Document object, the document is examined completely, including the root node. You can also invoke getElementsByClassName() on any element; this would return only elements that are descended from the specified root node with the class name.

Ref.:https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

Browser other questions tagged javascript css

You are not signed in. Login or sign up in order to post.