JavaScript rejects the request to activate the menu

Question

JavaScript rejects the request to activate the menu

Struggling to implement a side menu in CSS? This website might be able to help:

I've hit a roadblock. After following the instructions from the provided link, I now have an unexpected '>' symbol at the top of my webpage. Despite this, the menu is not responsive and lacks interactivity. To make it more dynamic, I attempted to include the necessary 'ui.js' code but encountered difficulties.

This is what I tried:

`<!DOCTYPE html>
<!<script type="text/css" src="Scripts/main.css"></script>>
<script src="ui.js"></script>
<html>
    <head>
        <script src="ui.js"></script>
        <style>
                body {background-color:black}
                h1   {color:azure}
                p    {color:whitesmoke; border:2px solid whitesmoke; padding: 10px;}
        }</style>
        <link rel="stylesheet" type="text/css" href="side-menu.css" media="screen" />
    </head>
    <h1>
        Home
    </h1>
    <p>
        Your momma!
    </p>
    <div>
        <button id="btnAdd" class="btn btn-small">Add</button>
        <button id="btnClear" class="btn btn-small">Clear</button>
    </div>
</html>`

Despite these efforts, the sidebar remains inactive. Any tips or suggestions would be greatly appreciated!

jquery css html web

Answer 1

Answer №1

Your code example is not valid HTML - it would be best to resolve the errors before trying again.

An issue in your code is having multiple <script> tags that point to the same file.

Remember, HTML tags should always start with <tag> and end with </tag>. Also, comments begin with .

When incorporating CSS, utilize a <link> tag instead of a <script> tag.

The structure within the <html> tag should only contain a single <head> and a single <body>.

If we clean up your code, it might look similar to this:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="Scripts/main.css" />
        <link rel="stylesheet" type="text/css" href="side-menu.css" media="screen" />
        <script src="ui.js"></script>
        <style>

body {
    background-color:black;
}
h1 {
    color:azure;
}
p {
    color:whitesmoke;
    border:2px solid whitesmoke;
    padding: 10px;
}

        </style>
    </head>
    <body>
        <h1>Home</h1>
        <p>Your momma!</p>
        <div>
            <button id="btnAdd" class="btn btn-small">Add</button>
            <button id="btnClear" class="btn btn-small">Clear</button>
        </div>
    </body>
</html>

Careful formatting is crucial as it helps identify mistakes. For instance, in your inline <style> element, there was an extra closing brace }. While the browser may still try to interpret it correctly, such errors can lead to difficult-to-spot bugs.

Answer 2

Your code example is not valid HTML - it would be best to resolve the errors before trying again.

An issue in your code is having multiple <script> tags that point to the same file.

Remember, HTML tags should always start with <tag> and end with </tag>. Also, comments begin with .

When incorporating CSS, utilize a <link> tag instead of a <script> tag.

The structure within the <html> tag should only contain a single <head> and a single <body>.

If we clean up your code, it might look similar to this:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="Scripts/main.css" />
        <link rel="stylesheet" type="text/css" href="side-menu.css" media="screen" />
        <script src="ui.js"></script>
        <style>

body {
    background-color:black;
}
h1 {
    color:azure;
}
p {
    color:whitesmoke;
    border:2px solid whitesmoke;
    padding: 10px;
}

        </style>
    </head>
    <body>
        <h1>Home</h1>
        <p>Your momma!</p>
        <div>
            <button id="btnAdd" class="btn btn-small">Add</button>
            <button id="btnClear" class="btn btn-small">Clear</button>
        </div>
    </body>
</html>

Careful formatting is crucial as it helps identify mistakes. For instance, in your inline <style> element, there was an extra closing brace }. While the browser may still try to interpret it correctly, such errors can lead to difficult-to-spot bugs.

Answer 3

Answer №2

Here are a few fundamental issues with the code you've provided:

The absence of a body tag.
A script tag placed outside of the html tag!
Inaccurate CSS styles (Extra curly brace at the end)

Answer 4

Here are a few fundamental issues with the code you've provided:

The absence of a body tag.
A script tag placed outside of the html tag!
Inaccurate CSS styles (Extra curly brace at the end)

Answer 5

Answer №3

It appears that there are some typos and syntax errors. Please remove the backticks at the beginning and end, the first <!, and the second > where there is a duplicate >>. Give it another try after applying these changes.

`<!DOCTYPE html>
<!<script type="text/css" src="Scripts/main.css"></script>>

Additionally, make sure to move the first 2 script tags into the head section. You also have a duplicate script tag for ui.js, so only one is needed.

Answer 6

It appears that there are some typos and syntax errors. Please remove the backticks at the beginning and end, the first <!, and the second > where there is a duplicate >>. Give it another try after applying these changes.

`<!DOCTYPE html>
<!<script type="text/css" src="Scripts/main.css"></script>>

Additionally, make sure to move the first 2 script tags into the head section. You also have a duplicate script tag for ui.js, so only one is needed.

JavaScript rejects the request to activate the menu

Answer №1

Answer №2

Answer №3

Similar questions

Swap out the entire page with the contents from a dynamically loaded AJAX page

Change the color of an image to match the background color using PHP

Display detailed images upon hovering

Bottom-aligning text in Tailwind CSS

The progress bar for uploading a file is causing issues with the redirect function in the

Pattern matching for identifying the first character and ensuring no more than two consecutive identical characters using regular expressions

Are there methods to individually style components that have been generated through the .map() function?

What is the method for displaying an image within an HTML div element?

Causes for the display of the text within the alt attribute

Error is triggered by starting variable names with a leading number

Basic game of tic tac toe using JavaScript and jQuery

What is the method to submit to a protected service from an unsecured page without relying on a complete domain name?

Using Html Language to convert text into a clickable LINK

The button in my form, created using React, continuously causes the page to refresh

Is there a way to verify the content of a span and automatically guide the user elsewhere if it meets certain criteria?

jquery submit function not working as expected

Set the div to display inline

Conceal a div using jQuery within an AJAX function

Issues with ng-show functionality occurring during the initialization of the webpage

Issue with Bootstrap Alert functionality on local host page