Welcome to Code Forum!

Join a community that supports you and your coding journey from day one. We strive to be a friendly, supportive community that empowers everyone to be better developers. By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.

    GIF shows where to locate </> in the thread and or post editor toolbar.
    To learn more about how to use our BBCode feature, review our "How to post your code into threads" here.

    Thank you, Code Forum.

JavaScript script not working

S

sabsac

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

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>University Website Design - Easy Tutorials</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?f...ht@0,400;0,600;1,100;1,200;1,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
<section class="header">
<nav>
<a href="index.html"><img src="images/logo.png" alt="logo"></a>
<div class="nav-links" id="navLinks">
<i class="fa fa-times" onclick="hideMenu()"></i>
<ul>
<li><a href="">HOME</a></li>
<li><a href="">ABOUT</a></li>
<li><a href="">COURSE</a></li>
<li><a href="">BLOG</a></li>
<li><a href="">CONTACT</a></li>
</ul>
</div>
<i class="fa fa-bars" onclick="showMenu()"></i>
</nav>
<div class="text-box">
<h1>World's Biggest University</h1>
<p>Making a Website is one of the easiest thing in the world.You just need to learn HTML, CSS,<br> Javascript and you are good to go.
</p>
<a href="" class="hero-btn">Visit Us To know More</a>
</div>
</section>

<script>
var navLinks = document.getElementById("navLinks");

function = showMenu() {
navLinks.style.right = "0";
}

function = hideMenu() {
navLinks.style.right = "-200px";
}

</script>
</body>

</html>
The above is the code for index.html file.The script tag is not working in chrome browser when developer option is enabled. The styles.css file is zipped for reference.kindly point out therror in my code why the script tag is not working in chrome browser with developer tools enabled for responsive design.
 

Attachments

Sort by date Sort by votes
sabsac said:
sabsac said:
<!DOCTYPE html>
<html lang="en">

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>University Website Design - Easy Tutorials</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?f...ht@0,400;0,600;1,100;1,200;1,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
<section class="header">
<nav>
<a href="index.html"><img src="images/logo.png" alt="logo"></a>
<div class="nav-links" id="navLinks">
<i class="fa fa-times" onclick="hideMenu()"></i>
<ul>
<li><a href="">HOME</a></li>
<li><a href="">ABOUT</a></li>
<li><a href="">COURSE</a></li>
<li><a href="">BLOG</a></li>
<li><a href="">CONTACT</a></li>
</ul>
</div>
<i class="fa fa-bars" onclick="showMenu()"></i>
</nav>
<div class="text-box">
<h1>World's Biggest University</h1>
<p>Making a Website is one of the easiest thing in the world.You just need to learn HTML, CSS,<br> Javascript and you are good to go.
</p>
<a href="" class="hero-btn">Visit Us To know More</a>
</div>
</section>

<script>
var navLinks = document.getElementById("navLinks");

function = showMenu() {
navLinks.style.right = "0";
}

function = hideMenu() {
navLinks.style.right = "-200px";
}

</script>
</body>

</html>
The above is the code for index.html file.The script tag is not working in chrome browser when developer option is enabled. The styles.css file is zipped for reference.kindly point out therror in my code why the script tag is not working in chrome browser with developer tools enabled for responsive design.
Click to expand...

The above is the code for index.html file.The script tag is not working in chrome browser when developer option is enabled. The styles.css file is zipped for reference.kindly point out therror in my code why the script tag is not working in chrome browser with developer tools enabled for responsive design.
Click to expand...
Hi there, so... the error in your script has nothing to do with your css file.
1662787952912.png

That is not how you set up a function. There are different ways to set up a function in js.
1.
Code: 
var func1 = function (){
    //do stuffs here
}

//calling your variable function
func1();

2.
Code: 
function func1(){
    //stuffs here
}

//calling your function
func1();

3.
Code: 
(function() {
    //do stuffs here
})();
 
Upvote 0 Downvote
As often, F12 and a quick peek at the console would have revealed that error instantly. It keeps puzzling me why so many people don't do that 🤔 The console really is the JS programmer's best friend.
 
Upvote 0 Downvote
sabsac said:
Pressing f12 a syntax error is showing up in the console!I dont know what to make of it.
Click to expand...
Yes of course an error is showing up. Have you clicked on the link next to the error ? And have you read and understood Antero360's reply ?
If you still cannot make sense of the error after that, you need to go and learn some JavaScript basics, such as how to declare a function.
 
Upvote 0 Downvote
sabsac said:
My syntax is incorrect! Thanks Mr Antero360. Ofcourse I have not yet started with javascript.I am still trying to learn html css.Thanks for pointing out the exact error!
Click to expand...
Debugger and console are your friends !
As to your show and hide functions: you would typically set visibility:hidden for a component that must be hidden (see https://www.w3schools.com/cssref/pr_class_visibility.asp), rather than setting an off-screen position.
 
Upvote 0 Downvote
cbreemer said:
Yes of course an error is showing up. Have you clicked on the link next to the error ? And have you read and understood Antero360's reply ?
If you still cannot make sense of the error after that, you need to go and learn some JavaScript basics, such as how to declare a function.
Click to expand...
Thanks. I understand I have made a syntax error. Thanks for pointing out.I have not yet started learning javascript. still trying to learn html and css basics.
 
Upvote 0 Downvote
Play Snayk 3+, higher dimensional snake game?

New Threads

Latest posts

Share this page

Buy us a coffee!

Buy me a coffee.
DataCamp Advertisement
Code Academy Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom