The JavaScript code embedded within this HTML is taking precedence over the CSS property

Question

The JavaScript code embedded within this HTML is taking precedence over the CSS property

The internal JavaScript is overriding the CSS property in this HTML code. Initially, I set the value of ID bad to none using CSS, but it is not working as expected in the code example below. The JavaScript function associated with the ID bad does not execute properly and displays data before clicking on the image.

How can I resolve this issue?

function myFunction(){
    document.getElementById("bad").style.display = "block";
}

Other styling rules are also defined for IDs like #good, #vahid, #isnani, #one, #boom, etc., along with classes for images and text within the HTML structure. There seems to be a conflict or error causing the display issue. Any suggestions on how to fix this problem would be appreciated.

javascript html css button

Answer 1

Answer №1

                                                                                      
    function myFunction(){                    
        document.getElementById("bad").style.display="block";
    }

    
    #good{
        width: 100%;
        height: 100%;
    }
    #bad{
        position:absolute;
        width: 15%;
        height: 100%;
        background-color: #023b3b;
        top:0%;
        display: none; 
    }
    #vahid{
        float: left;
        width: 7%;
        height: 100%;
        background-color: #023b3b;
    }
    #isnani{
        float: left;
        width: 93%;
        height: 100%;
        background-color: bisque;
    }
    .
    .
    . (Continue with the rest of the CSS code)

 
    <html>
        <head>
            <link rel="stylesheet" type="text/css" href="rise.css">
                      <link rel="stylesheet"       href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
          
        </head>
        <body>
            <div id="good">
                <div id="vahid">
                    <div id="one">

                                                                                        
                        <img src="image1.jpg" id="boom"><br><br><br><br><br>
                        <!--button-->
                        <i class="icon fa fa-anchor"  onclick="myFunction()"  id="button"></i>
                       <!-- <img src="button.jpg" onclick="myFunction()"  id="button">--><br><br><br><br>
                        <!--icons-->
                            <span class="local">
                                <img src="img.jpg">
                                <img src="img1.jpg">
                                <img src="img2.jpg">
                                <img src="img3.jpg">
                            </span><br><br><br><br>
                            <span class="local">
                                <img src="img4.jpg">
                                <img src="img5.jpg">
                                <img src="img6.jpg">
                                <img src="img7.jpg">
                            </span>
                    </div>
                </div>
                <div id="isnani">
                     <div id="third">
                        <p >
                            <span class="fourth">Dashboard</span>      
                            <span class="fifth">  + New</span>
                        </p>
                        .
                        .(Continue with the HTML code)

Answer 2

                                                                                      
    function myFunction(){                    
        document.getElementById("bad").style.display="block";
    }

    
    #good{
        width: 100%;
        height: 100%;
    }
    #bad{
        position:absolute;
        width: 15%;
        height: 100%;
        background-color: #023b3b;
        top:0%;
        display: none; 
    }
    #vahid{
        float: left;
        width: 7%;
        height: 100%;
        background-color: #023b3b;
    }
    #isnani{
        float: left;
        width: 93%;
        height: 100%;
        background-color: bisque;
    }
    .
    .
    . (Continue with the rest of the CSS code)

 
    <html>
        <head>
            <link rel="stylesheet" type="text/css" href="rise.css">
                      <link rel="stylesheet"       href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
          
        </head>
        <body>
            <div id="good">
                <div id="vahid">
                    <div id="one">

                                                                                        
                        <img src="image1.jpg" id="boom"><br><br><br><br><br>
                        <!--button-->
                        <i class="icon fa fa-anchor"  onclick="myFunction()"  id="button"></i>
                       <!-- <img src="button.jpg" onclick="myFunction()"  id="button">--><br><br><br><br>
                        <!--icons-->
                            <span class="local">
                                <img src="img.jpg">
                                <img src="img1.jpg">
                                <img src="img2.jpg">
                                <img src="img3.jpg">
                            </span><br><br><br><br>
                            <span class="local">
                                <img src="img4.jpg">
                                <img src="img5.jpg">
                                <img src="img6.jpg">
                                <img src="img7.jpg">
                            </span>
                    </div>
                </div>
                <div id="isnani">
                     <div id="third">
                        <p >
                            <span class="fourth">Dashboard</span>      
                            <span class="fifth">  + New</span>
                        </p>
                        .
                        .(Continue with the HTML code)

Answer 3

Answer №2

When the page is loaded, an issue arises:

VM429:45 Uncaught SyntaxError: Missing semicolon

Also, when attempting to click a button in the console:

VM589:72 Uncaught ReferenceError: functionName is not defined

The root of the problem lies in the missing parentheses within your function. Revise it as follows:

  function functionName() {
    document.getElementById("incorrect").style.display = "block";
  }

See demo here.

Answer 4

When the page is loaded, an issue arises:

VM429:45 Uncaught SyntaxError: Missing semicolon

Also, when attempting to click a button in the console:

VM589:72 Uncaught ReferenceError: functionName is not defined

The root of the problem lies in the missing parentheses within your function. Revise it as follows:

  function functionName() {
    document.getElementById("incorrect").style.display = "block";
  }

See demo here.

Answer 5

Answer №3

There appears to be a syntax error. Take a closer look at how you have defined the function.

 function myFunction{                        
                                    document.getElementById("bad").style.display="block";
                              }

It should actually be:

 function myFunction**()**{                        
                                    document.getElementById("bad").style.display="block";
                              }

Answer 6

There appears to be a syntax error. Take a closer look at how you have defined the function.

 function myFunction{                        
                                    document.getElementById("bad").style.display="block";
                              }

It should actually be:

 function myFunction**()**{                        
                                    document.getElementById("bad").style.display="block";
                              }

The JavaScript code embedded within this HTML is taking precedence over the CSS property

Answer №1

Answer №2

Answer №3

Similar questions

What could be causing the repeated calls to a computed function in vuejs?

How to retrieve the first option selected in Material-UI React?

Steer clear of manually inputting URLs in your React components

Locating elements with Selenium Webdriver using xpath

What causes block elements to act like inline elements?

JavaScript popup menu with a redirect URL

Tips on utilizing chaining technique for ajax requests within jQuery

What could be causing certain icons in my jQuery to appear distorted?

Troubleshooting issues with an external JavaScript file

What is the best way to ensure a "child" div does not overflow on its own and instead utilizes the padding of its parent div for rendering?

Is the main content positioned below the sidebar on smaller screens?

The Kendo UI Grid will consistently begin at Page 0

Achieving perfect centering in PrestaShop using CSS for both horizontal

Header on top of table that stays in place with scrolling

Dynamic form population with dropdown selection using Ajax - Coldfusion continuation

When the jQuery button is clicked, the execute function will run multiple times

The issue of receiving a 400 (Bad Request) error when making an ajax post call with an array to a Spring

Difficulty navigating to different sections of a webpage using HTML

Issue with Vue not displaying HTML content retrieved from an API

Locate records in MongoDB by leveraging the power of Mongoose