Question

0

116

Vistas

Why console giving me result undefined

I Don't khow why my console is telling me that the result is undefined.I am learning DOM and found the problem on my first code which i don't understand

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>

        let head = document.getElementsByClassName(".main");

        console.log(head.textContent);

        let tail = document.getElementsByTagName("p");

        console.log(tail.textContent);

    </script>
</head>

<body>

    <div class="main">
        <p>hello</p>
    </div>

</body>

</html>

about 4 years ago · Juan Pablo Isaza

2 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-07-10T21:48:11.451Z

The elements doesn´t exist when the script runs in head. Move the script to after the elements
Change from .main to main in getElementsByClassName
getElementsByClassName returns a list so add [0] to getElementsByClassName("main") to get the first element

<div class="main">
    <p>hello</p>
</div>

<script>
    let head = document.getElementsByClassName("main")[0];
    console.log(head.textContent);

    let tail = document.getElementsByTagName("p")[0];
    console.log(tail.textContent);
</script>

Answer 2 · 2022-07-10T21:48:11.465Z

Move your script to the body
document.getElementsByClassName returns a collection of HTML elements, not a single element
with document.getElementsByClassName you should pass main, not .main
the textContent of the div with class main is probably not what you expect
to get an single element by its class name or its tag name, you can also use querySelector which is more simple (but slower) Here is a working version :

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>

    <body>
        <div class="main">
            <p>hello</p>
        </div>
  
        <script>
            let head = document.querySelector(".main");
            console.log(head.textContent);
            let tail = document.querySelector("p");
            console.log(tail.textContent);
        </script>
    </body>

</html>

0

116

Why console giving me result undefined

2 Respuestas

0

0

Encuentra empleos remotos

Andres GPT