Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
script javascript tidak muncul saat di buat sebagai Menu
saya mengikuti tutorial tapi javascript yg di buat tidak muncul Help pleasee., Tampilan Menu tidak muncul saat di buat script javascript saya menggunakan ubuntu, vscode mohon bantuannya pak dimana letak salah pak?
<body>
<!-- <h1>tag H1 yang besar dan berwarna!</h1> -->
<!-- navbar start -->
<nav class="navbar">
<a href="#" class="navbar-logo">aquarium<span>terindah</span>.</a>
<div class="navbar-nav">
<a href="#">Home</a>
<a href="#about">Tentang Kami</a>
<a href="#menu">Menu</a>
<a href="#contact">Kontak</a>
</div>
<div class="navbar-extra">
<a href="#" id="search"><i data-feather="search"></i></a>
<a href="#" id="shopping-cart"><i data-feather="shopping-cart"></i></a>
<a href="#" id="hamburger-menu"><i data-feather="menu"></i></a>
</div>
</nav>
<!-- navbar end -->
<!-- feather icons -->
<script>
feather.replace();
</script>
<!-- my javascript -->
<script src="js/script.js"></script>
</body>
//javascript // toogle class active const navbarNav = document.querySelector(".navbar-nav"); //ketika hamburger menu di klik document.querySelector("#hamburger-menu").onclick = () => { navbarNav.classList.toggle("active"); };
Tanggapan
coba lihat error di inspect elemetn nya
DevTools failed to load source map: Could not load content for https://unpkg.com/feather.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
3 Jawaban:
Ada beberapa alasan mengapa kode JavaScript Anda tidak muncul.
- Pastikan file JavaScript disertakan dalam dokumen HTML. File JavaScript harus ditempatkan dalam direktori yang sama dengan dokumen HTML, dan harus dihubungkan ke dokumen HTML menggunakan atribut
src. - Pastikan file JavaScript dimuat setelah dokumen HTML. File JavaScript harus dimuat setelah dokumen HTML selesai dimuat. Ini dapat dilakukan dengan menempatkan tag
scriptdi bagianheaddokumen HTML. - Pastikan tidak ada kesalahan dalam kode JavaScript. Kode JavaScript harus benar secara sintaksis. Anda dapat menggunakan linter JavaScript untuk memeriksa kesalahan dalam kode Anda.
Berikut adalah versi yang diperbaiki dari kode JavaScript Anda:
// JavaScript
const navbarNav = document.querySelector(".navbar-nav");
// Ketika menu hamburger diklik
document.querySelector("#hamburger-menu").onclick = () => {
// Mengalihkan kelas "active" pada elemen navbarNav
navbarNav.classList.toggle("active");
};
Tanggapan
tetep gk jalan pak css media 768 :root { --primary: #b6895b; --bg: #010101; }
- { margin: 0; padding: 0; box-sizing: border-box; outline: none; border: none; text-decoration: none; }
body { font-family: "Popins", sans-serif; background-color: var(--bg); color: #fff; }
/* navbar */ .navbar { display: flex; justify-content: space-between; align-items: center; padding: 1.4rem 7%; background-color: rgba(1, 1, 1, 0.8); border-bottom: 1px solid #513c28; position: fixed; top: 0; left: 0; right: 0; z-index: 9999; }
.navbar .navbar-logo { font-size: 2rem; font-weight: 700; color: #fff; font-style: italic; }
.navbar .navbar-logo span { color: var(--primary); }
.navbar .navbar-nav a { color: #fff; display: inline-block; font-size: 1.3rem; margin: 0 1rem; }
.navbar .navbar-nav a:hover { color: var(--primary); }
.navbar .navbar-nav a::after { content: ""; display: block; padding-bottom: 0.5rem; border-bottom: 0.1rem solid var(--primary); transform: scaleX(0); transition: 0.2s linear; }
.navbar .navbar-nav a:hover::after { transform: scaleX(0.5); }
.navbar .navbar-extra a { color: #fff; margin: 0 0.5rem; }
.navbar .navbar-extra a:hover { color: var(--primary); }
#hamburger-menu { display: none; }
/* media queries / / laptop / @media (max-width: 1366px) { html { font-size: 75%; } } / tablet */ @media (max-width: 768px) { html { font-size: 62.5%; } #hamburger-menu { display: inline-block; } .navbar .navbar-nav { position: absolute; top: 100%; right: -100%; background-color: #fff; width: 30rem; height: 100vh; transition: 0.3s; } .navbar .navbar-nav .active { right: 0; } }
/* mobile phone */ @media (max-width: 450px) { html { font-size: 55%; } }
kalau kamu coba buka link tesrebut langsung memang 404. Artinya kamu salah link
https://unpkg.com/feather.min.js.map:
Tanggapan
I agree with your solution. Great work.