UPDATE: I fixed the color vs backgroundColor problem. Thanks! However, the code still will not run from WebStorm. Any WebStorm experts out there?
I am learning javascript and trying to manipulate css with js. Here is my code:
document.getElementById("top-left").style.color = "blue";body{
background-color: black;
}
.container {
text-align:center;
position: absolute;
width: 100%;
margin: 0 auto;
padding-top: 2.5%;
padding-left: 30%;
width: 31em;
}
#title {
margin-left: auto;
margin-right: auto;
text-align: center;
width: 50%;
color: green;
font-size: 4em;
}
#top-left {
width: 15em;
height: 15em;
background: red;
border-top-left-radius: 100% ;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
display: inline-block;
position: relative;
}
#top-right {
width: 15em;
height: 15em;
background: gold;
border-top-left-radius: 0 ;
border-top-right-radius: 100%;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
display: inline-block;
position: relative;
}
#bottom-right {
width: 15em;
height: 15em;
background: orangered;
border-top-left-radius: 0 ;
border-top-right-radius: 0;
border-bottom-right-radius: 100%;
border-bottom-left-radius: 0;
display: inline-block;
position: relative;
}
#bottom-left {
width: 15em;
height: 15em;
background: darkgreen;
border-top-left-radius: 0 ;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 100%;
display: inline-block;
position: relative;
}<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="jscode.js"></script>
<title>title</title>
</head>
<body>
<div id = "title">Title</div>
<div class = "container">
<div id = "top-left"></div>
<div id= "top-right"></div>
<div id = "bottom-left"></div>
<div id = "bottom-right"></div>
</div>
</body>
</html>UPDATE: I fixed the color vs backgroundColor problem. Thanks! However, the code still will not run from WebStorm. Any WebStorm experts out there?
I am learning javascript and trying to manipulate css with js. Here is my code:
document.getElementById("top-left").style.color = "blue";body{
background-color: black;
}
.container {
text-align:center;
position: absolute;
width: 100%;
margin: 0 auto;
padding-top: 2.5%;
padding-left: 30%;
width: 31em;
}
#title {
margin-left: auto;
margin-right: auto;
text-align: center;
width: 50%;
color: green;
font-size: 4em;
}
#top-left {
width: 15em;
height: 15em;
background: red;
border-top-left-radius: 100% ;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
display: inline-block;
position: relative;
}
#top-right {
width: 15em;
height: 15em;
background: gold;
border-top-left-radius: 0 ;
border-top-right-radius: 100%;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
display: inline-block;
position: relative;
}
#bottom-right {
width: 15em;
height: 15em;
background: orangered;
border-top-left-radius: 0 ;
border-top-right-radius: 0;
border-bottom-right-radius: 100%;
border-bottom-left-radius: 0;
display: inline-block;
position: relative;
}
#bottom-left {
width: 15em;
height: 15em;
background: darkgreen;
border-top-left-radius: 0 ;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 100%;
display: inline-block;
position: relative;
}<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="jscode.js"></script>
<title>title</title>
</head>
<body>
<div id = "title">Title</div>
<div class = "container">
<div id = "top-left"></div>
<div id= "top-right"></div>
<div id = "bottom-left"></div>
<div id = "bottom-right"></div>
</div>
</body>
</html>On the fiddle (http://jsfiddle/interestinall/hgo7h5v4/), the script just doesn't do anything. On WebStorm, it throws the following error: ReferenceError: document is not defined.
So my question is: how does one define a document?
Any help would be greatly appreciated!
Share Improve this question edited Nov 29, 2014 at 17:07 interestinall asked Nov 29, 2014 at 16:44 interestinallinterestinall 171 silver badge3 bronze badges 1- As this is about WebStorm, it should be asked as a new question, with adequate title, adequate tagging, and adequate description of the problem in a reproduceable manner. – Jukka K. Korpela Commented Nov 29, 2014 at 17:04
2 Answers
Reset to default 2how does one define a document?
Generally speaking. You don't.
JavaScript running in a browser, in a webpage will have a document object supplied by the environment.
WebStorm is an IDE with for Node.JS, and you appear to be using the Node.js end of it to get your "document is not defined" result. There are implementations of DOM which would give you such an object there, but your code is clearly trying to run in a webpage, so that isn't a route you should be looking down.
Your problem is that you are setting the foreground color, and you don't have any text to change the colour of. You should be looking at the backgroundColor property instead.
Your code is fine, but you're setting color instead of backgroundColor.
document.getElementById("top-left").style.backgroundColor = "blue";
The color property is for text that appears in the element.
You don't have to (and can't, anyway) define the document object with your own code. It's an object exposed to you by the web browser infrastructure.