Using an array to display a div element. JavaScript
Question
I know how to use css and html to make simple shapes appear but I would like to use arrays to display shapes; being that my next game project will include me having to duplicate shapes over and over again. My understanding of arrays is very weak, I've read everything on w3 and this is what I've been able to come up with so far in regards to displaying a simple line.
<!DOCTYPE html>
<html>
<body>
<p id="lineDiv"></p>
<script>
var line = {width: 2px, height: 7px, color: red};
lineArray[0] = line;
document.getElementById("lineDiv").innerHTML = lineArray[0];
</script>
</body>
</html>
1-My first question is why wont the line display? 2-My second question is what would I do if I wanted to generate more than one line when I figured out how to display the lines depending on which x/y axis I chose to display the lines at?
please do NOT include jquery on this answer, just use basic javaScript; i haven't even begun reading the jquery stuff on w3 yet.
2 answers
solution1
3 ACCPTED 2017-04-06 01:14:07
A few things here
always use var to declare objects.
array elements aren't dynamically allocated in JavaScript, so use
array.push .
literal string values in JSON objects must be assigned using quotes, single ( '1px' ) or double ( "1px" ).
use JSON.stringify to view JSON object data in the browser.
<!DOCTYPE html>
<html>
<body>
<p id="lineDiv"></p>
<script>
var line = {width: '2px', height: '7px', color: 'red'}; // set literal string values using quotes
var lineArray = []; //declare the array
lineArray.push(line); //add to the array
document.getElementById("lineDiv").innerHTML = JSON.stringify(lineArray[0]); //convert object to string
</script>
</body>
</html>
Update
In order to render solid lines to the screen in HTML , you need to use the Canvas . This is a very small example, but it should be enough to help point you in the right direction. Sorry for not understanding your intent clearly before.
<!DOCTYPE html>
<html>
<head>
<script>
var main = function () {
var c = document.getElementById('c'),
ctx = c.getContext('2d'),
lineArray = [];
lineArray.push({x: 10, y: 10, x2: 100, y2: 10, color: 'red'});
lineArray.push({x: 10, y: 100, x2: 150, y2: 100, color: 'blue'});
lineArray.push({x: 10, y: 150, x2: 200, y2: 150, color: 'green'});
for (i = 0; i < lineArray.length; ++i) {
ctx.beginPath();
ctx.moveTo(0,0);
ctx.moveTo(lineArray[i].x, lineArray[i].y);
ctx.lineTo(lineArray[i].x2, lineArray[i].y2);
ctx.strokeStyle = lineArray[i].color;
ctx.stroke();
}
};
</script>
</head>
<body onload="main()">
<canvas id="c"></canvas>
</body>
</html>
solution2
1 2017-04-06 01:28:42
not entirely sure what you want to do but you need to use the style attribute to change the css
document.getElementById("lineDiv").style.backgroundColor = "red"; document.getElementById("lineDiv").style.width = "100px"; document.getElementById("lineDiv").style.height = "7px";
<body> <div id="lineDiv"></div> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.