Question

0

109

Views

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 answers

Answer question

0

Answer question

Find remote jobs

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

109

Why console giving me result undefined

2 answers

0

0

Find remote jobs

Andres GPT