how to get #document-fragment?

VISHESH GUPTA 0
Viewed 23

I am trying to make a search bar type of thing , by seeing youtube video : https://youtu.be/TlP5WIxVirU?t=471

but got stuck don't know why

the stack overflow is executing and getting the desired output but my pc doesnot what could be the reason ??

I want to get the output as : Output

but while I execute this code, I'm getting the error as : Uncaught (in promise) TypeError: Cannot read properties of null (reading 'content') at script.js:7:39

please help me

const userCardTemplate = document.querySelector("[data-user-template]")




fetch("https://jsonplaceholder.typicode.com/users").then(res => res.json()).then(data => {
        const card = userCardTemplate.content.cloneNode(true).children[0]
        console.log(card)
    })
.search-wrapper{
    display: flex;
    flex-direction: column;
}

input {
    font-size: 1rem;

}

.user-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(150px,1fr));
    gap: .25 re,;
    margin-top: 1rem;
}

.card {
    border: 1px solid black;
    background-color: white;
    padding: .5 rem;

}

.card .header{
    margin-bottom: .25 rem;

}

.card .body {
    font-size: .8rem;

}

.hide{
    display: none;
}
<!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>Search Engine</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
</head>
<body>
    <div class="search-wrapper">
        <label for="search">Search Users</label>
        <input type="search" id ="search">
    </div>

    <div class="user-cards" >
    </div>
    
    <template data-user-template>
        <div class="card">
            <div class="header">
                
            </div>
            <div class="body">
                
            </div>
        </div>
        
    </template>
    
</body>
</html>

javascript css html
1 Answers

The error says exactly what you needed to read. userCardTemplate was not found in the DOM. The reason being the moment in which you trigger the <script> execution. And that's in head. At the moment the parser stopped to read the current DOM there was no such element.

Instead you have two solutions:

Use the defer attribute:

<script src="script.js" defer></script>

in order to defer your script execution, or
place the SCRIPT right before the closing BODY tag:

  <script src="script.js"></script>
</body>
Roko C. Buljan0
Related