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:39please 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>>Solution :
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>