dream hunter dream hunter - 2 months ago 6x
HTML Question

the inner java script is override the css property on this html code

<link rel="stylesheet" type="text/css" href="rise.css">
function myFunction(){

<div id="good">
<div id="vahid">
<div id="one">

<img src="image1.jpg" id="boom"><br><br><br><br><br>

<img src="button.jpg" onclick="myFunction()" id="button"><br><br><br><br>
<span class="local">
<img src="img.jpg">
<img src="img1.jpg">
<img src="img2.jpg">
<img src="img3.jpg">
<span class="local">
<img src="img4.jpg">
<img src="img5.jpg">
<img src="img6.jpg">
<img src="img7.jpg">
<div id="isnani">
<div id="third">
<p >
<span class="fourth">Dashboard</span>
<span class="fifth"> + New</span>
<!--<p class="fourth">&nbsp;</p>
<p id="fort"><input type="text" placeholder="search your project here..." ></p>
<div id="jump"><img src="search.jpg" height="20px" width="10px"></div>-->

<p id="sixth"> Welcome to Flatkit</p>
<p id="seventh"> Bootstrap 4 Web App Kit With Angular js</p>

<div id="bad">


width: 100%;
height: 100%;
width: 15%;
height: 100%;
background-color: #023b3b;
display: none;
float: left;
width: 7%;
height: 100%;
background-color: #023b3b;
float: left;
width: 93%;
height: 100%;
background-color: bisque;
#one {
background-color: #023b3b;
/* width:60px;
height: 867px;*/
margin-top: 30%;
height: 5%;
width: 35%;
float: left;
padding-left: 20px;

.local img {
height: 2.5%;
margin :10px 0px 10px 20px;

/*isnani starts here*/
#third{ float:left;
height: 15%;
border-style : solid;
background-color : white;

margin-left: 2%;
margin-top: 5%;
font-family: sans-serif;

color: #808080;
font-size: 80%;
font-weight: 800;
font-family: arial,sans-serif;
margin-left: 1%;

font-family: sans-serif;
margin-top: 4%;
margin-left: 2%;
/*top: -2%;/
/* line-height: 3%; */

position: absolute;
top: 11%;
color: #808080;
font-family: sans-serif;
font-size: 80%;
margin-left: 1.8%;
margin-top: 1.5%;

/*line-height: 3%;*/

float: right;
margin-top: -65px;
margin-right: 80px;

margin-left: 80%;
width: 20%;
hyphens: 20%;

the inner java script is override the css property on this html code.initially i set the the value of id "bad" as none using css. but it is not working on this code.

the java script is not working properly on this html page.look at the id "bad",initially it's value is none ,but it shown the data before clicking on the image.how can i fix it?


Your issue shows when you load the page:

VM748:162 Uncaught SyntaxError: Unexpected token {

And in the console when you try to click the button:

VM851:178 Uncaught ReferenceError: myFunction is not defined

The problem is that your function is missing parentheses. Change it to:

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

Example fiddle.