Ok, so me and my friends are trying to make a game with html and js. I'm the one that has to build the foundation for the program to display the blocks used on the map. For some reason though, it doesn't want to draw my images on the canvas at all. I need to display a 24x32 array of 32x32 pixel blocks whose images I need to be able to change. I've looked online, and everywhere it says to use the function drawImage() but my program doesn't see that that belongs to the canvas under the 2d context. Here is my code:
index.html:
<html lang="en">
<head>
</head>
<body>
<div class="canvas">
<canvas id="canvas" height="768" width="1024" style="border:1px solid black">
Your browser does not support canvas element.
</canvas>
<script type="text/javascript" src="Main.js"></script>
<script type="text/javascript" src="World Loader.js"></script>
</div>
</body>
</html>
Main.js:
var c = document.getElementById('canvas');
var ctx = c.getContext('2d');
ctx.font = "20px Arial";
var FPS = 60;
var Mode = 0;
function displayTick(){
Map.DisplayChunk(0,0);
}
function gameTick(){
}
Chunk.LoadNew();
window.setInterval(displayTick, 1000 / FPS);
window.setInterval(gameTick, 600);
and World_Loader.js:
var Block={
WalkThrough:true,
SeeThrough:true,
Interactable:false,
Occupied:false,
Sprite:Image,
Type:"",
X:0,
Y:0
};
var Chunk={
matrix:Block[32][24],
background:Image,
display:function(xindex, yindex){
ctx.drawImage(Background,0,0);
x=xindex;
y=yindex;
for(y=0; y<24; Y++){
for(x=0; x<32; x++){
ctx.drawImage(matrix[X][Y].sprite,X*32,Y*32);
};
};
},
loadNew:function(){
for(Y=0; Y<24; Y++){
for(X=0; X<32; X++){
block=new Block;
block.Sprite.src="test.png";
this.matrix[X][Y]=block;
};
};
}
};
var World={
matrix:Chunk[5][5],
indexX:0,
indexY:0
};
I'm still new to js and trying to teach myself so there's probably tons of errors and stuff. But can anyone see how it doesn't want to draw on the canvas?
There is some problem with your script(sintax errors, scope trouble and so on), you should start with something more simple, I suggest you to start to read this online book.
Anyway below you can see a simple script to fill and display a little grid of images on a canvas.
var Map = (function () {
var options = arguments[0] || {};
var _grid = [];
var _rNum = options.rowuUm || 10;
var _cNum = options.colNum || 10;
var _block = function (x, y) {
this.img = document.getElementById('on');
this.X = x;
this.Y = y;
};
return {
init: function () {
for (var i = 0; i < _rNum; i++) {
_grid[i] = [];
for (var j = 0; j < _cNum; j++) {
_grid[i][j] = new _block(i, j);
}
}
},
paint: function (canvasId) {
var cnv = document.getElementById(canvasId);
var ctx = cnv.getContext('2d');
var img = new Image();
img.src = 'on.jpg';
img.onload = function () {
for (var i = 0; i < _rNum; i++) {
for (var j = 0; j < _cNum; j++) {
ctx.drawImage(img, i * 32, j * 32);
}
}
};
},
}
})();
Map.init();
Map.paint('canvas');
Related
After trying to run some p5.js code in Visual Studio Code, I came upon this error. My HTML Code is below, and I copied and pasted it straight from the P5 editor:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>
My javascript code is below, and when running in p5, no errors come up:
var numOfFood;
var foodList;
var numOfSlimes;
var slimesList;
function setup() {
createCanvas(400, 400);
numOfFood = prompt("Enter the amount of food that should be spawned: ");
numOfSlimes = prompt("Enter the amount of slimes to be spawned: ");
foodList = [];
slimesList = [];
background(220);
rect(25, 25, width - 50, height - 50);
spawnFood(numOfFood);
initializeSlimes(numOfSlimes);
}
// SLIME
Slime = function (x, y) {
this.x = x;
this.y = y;
}
Slime.prototype.draw = function () {
ellipse(this.x, this.y, 12, 12);
}
Slime.prototype.assignFood = function (index) {
this.food = foodList[index];
this.foodIndex = index;
}
// SLIME
// HAWK
Hawk = function (x, y) {
Slime.call(this, x, y);
this.type = "HAWK";
}
Hawk.prototype = Object.create(Slime.prototype);
//HAWK
// DOVE
Dove = function (x, y) {
Slime.call(this, x, y);
this.type = "DOVE";
}
Dove.prototype = Object.create(Slime.prototype);
// DOVE
// FOOD
Food = function (x, y) {
this.x = x;
this.y = y;
}
Food.prototype.draw = function () {
ellipse(this.x, this.y, 10, 10);
}
Food.prototype.assignSlime = function (firstSlime = null, secondSlime = null) {
this.firstSlime = firstSlime;
this.secondSlime = secondSlime;
}
// FOOD
spawnFood = function(food) {
fill(229, 246, 88);
var factors = []
var differences = []
for (let i = 1; i < food; i++) {
var value = food/i;
if (value != Math.floor(value)) {
continue;
}
factors.push([value, i]);
differences.push(abs(value - i));
}
var currentMinIndex = 0;
for (let i = 0; i < differences.length; i++) {
if (differences[i] < differences[currentMinIndex]) {
currentMinIndex = i;
}
}
for (let x = 50; x < 350; x += 300/factors[currentMinIndex][0]) {
for (let y = 50; y < 350; y += 300/factors[currentMinIndex][1]) {
var myFood = new Food(x, y);
foodList.push(myFood);
myFood.draw();
}
}
}
initializeSlimes = function (slimes) {
var tempx = 0;
var tempy = 0;
fill(67, 163, 235);
for (let i = 25; i < 375; i+= 375/(slimes / 4)) {
let mySlime = new Slime(i, 12.5); mySlime.draw(); slimesList.push(mySlime);
}
for (let i = 25; i < 375; i+= 375/(slimes / 4)) {
let mySlime = new Slime(i, 387.5); mySlime.draw(); slimesList.push(mySlime);
}
for (let i = 25; i < 375; i+= 375/(slimes / 4)) {
let mySlime = new Slime(12.5, i); mySlime.draw(); slimesList.push(mySlime);
}
for (let i = 25; i < 375; i+= 375/(slimes / 4)) {
let mySlime = new Slime(387.5, i); mySlime.draw(); slimesList.push(mySlime);
}
}
However, when I try to run this in VSCode, chrome opens to try and run the file, but then the window switches back to VSCode, and it shows me:
My error code (I don't have enough rep to embed a picture yet)
If anybody knew how to fix this, I would be extremely grateful. Is this a problem in my code, or is this a problem with the p5 library?
Could you show where the error appears in your javascript file rather than in the p5.js library itself?
Otherwise, I don't even see a call to Array.forEach() in your code snippit, did you make sure to paste all of the code you're running? Or since your p5.js file isn't even being loaded in your index.html, are you trying to run the p5.js file itself? That won't work, make sure you're running your index.html file.
I tried running your index.html using a copy of p5.js in the source folder and copied all of your code into a sketch.js file, and I was able to run it through VSCode. Let me know if this helps at all or if you have any other information that could help with fixing your problem!
This question already has answers here:
JavaScript setInterval and `this` solution
(9 answers)
Closed 3 years ago.
What Im trying to do is animate circles bouncing off the canvas borders. I can achieve that pretty will with just one ball. But my Home work asks of me to add a new ball every two seconds. Originally I tried this by making new objects listed in an array using a for loop, but had trouble coming up with a way to call "move" method out of each newly created object in an interval. At the end I settled with creating the variable j and setting it to 0 and having it increment by 10 since the interval will execute the function "startAnim" every 10 milliseconds. Then every two seconds have a new object created and then call that objects "move" method.
<!DOCTYPE html>
<html>
<head>
<title>Some document</title>
<body>
<h1></h1>
<canvas id="canvas" width = "400" height = "400"></canvas>
<script src= "https://code.jquery.com/jquery-2.1.0.js"></script>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var arrayOfCollor = ["green", "red", "blue","gold","black","purple"];
var ballFunction = function(){
this.x = 200;
this.y = 200;
this.xSpeed = 2;
this.ySpeed = -3;
this.radius = 10;
ctx.fillStyle = arrayOfCollor[Math.floor(Math.random() *
arrayOfCollor.length)];
}
ballFunction.prototype.draw = function(){
ctx.beginPath();
ctx.arc(this.x,this.y, this.radius, 0, Math.PI * 2, false);
ctx.fill();
}
ballFunction.prototype.move = function(){
ctx.clearRect(0,0,400,400);
ctx.strokeRect(0,0,400,400);
this.x += this.xSpeed;
this.y += this.ySpeed;
this.draw();
if(this.x > 400-this.radius|| this.x < 0 + this.radius){
this.xSpeed = -1* this.xSpeed;
}
if(this.y > 400 - this.radius || this.y < 0 + this.radius){
this.ySpeed = -1* this.ySpeed;
}
}
var j = 0;
function startAnim(){
j+= 10;
if( j === 2000){
var ballOne = new ballFunction
var ballOneInterval = setInterval(ballOne.move,10)
}
if( j === 4000){
var ballTwo = new ballFunction
var ballTwoInterval = setInterval(ballTwo.move,10)
}
if( j === 6000){
var ballThree = new ballFunction
var ballThreeInterval = setInterval(ballThree.move,10)
}
if( j === 8000){
var ballFour = new ballFunction
var ballFourInterval = setInterval(ballFour.move,10)
}
if( j === 10000){
var ballFive = new ballFunction
var ballFiveInterval = setInterval(ballFive.move,10)
}
if( j === 12000){
var ballSix = new ballFunction
var ballSixinterval = setInterval(ballSix.move,10)
}
}
var startAnimInt = setInterval(startAnim,10);
</script>
</body>
</html>
I keep receiving that the draw function is not a function at ballFunction.move even though I inserted it in.
This is one of several common problems people run into with the this reference in JS. What this actually refers to is determined at runtime, and depends on how the function is called - not on how/where it was defined. The problem you have here is that you are using setInterval:
setInterval(ballOne.move,10)
which of course results in the JS engine calling ballOne.move itself, once every 10 milliseconds. But unfortunately, the way the engine will call it is the same as it will any old "plain function" it is passed - it has no way of knowing that the function it is calling is supposed to "belong" to the ballOne object, and therefore its this reference won't refer to ballOne, but instead to the global (window) object.
You can fix this by using the bind method of JS functions, to create a new version which will always have the specified this reference. That is, you can replace the above line with:
setInterval(ballOne.move.bind(ballOne),10)
and similarly for the other setInterval calls. This will of course quickly get repetitious, so it's probably better to fix this in the constructor, by adding the line:
this.move = this.move.bind(this);
Note that, although your question has nothing to do with React, this is what ReactJS recommends to do in Component classes, for exactly the same reason - to make sure the this reference is always the object intended.
The problem is that you pass the ballFunction method to setInterval as the first parameter and hence its context is lost and the this inside the function will be the window object. You can pass a function calling your move:
<!DOCTYPE html>
<html>
<head>
<title>Some document</title>
<body>
<h1></h1>
<canvas id="canvas" width = "400" height = "400"></canvas>
<script src= "https://code.jquery.com/jquery-2.1.0.js"></script>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var arrayOfCollor = ["green", "red", "blue","gold","black","purple"];
var ballFunction = function(){
this.x = 200;
this.y = 200;
this.xSpeed = 2;
this.ySpeed = -3;
this.radius = 10;
ctx.fillStyle = arrayOfCollor[Math.floor(Math.random() *
arrayOfCollor.length)];
}
ballFunction.prototype.draw = function(){
ctx.beginPath();
ctx.arc(this.x,this.y, this.radius, 0, Math.PI * 2, false);
ctx.fill();
}
ballFunction.prototype.move = function(){
ctx.clearRect(0,0,400,400);
ctx.strokeRect(0,0,400,400);
this.x += this.xSpeed;
this.y += this.ySpeed;
this.draw();
if(this.x > 400-this.radius|| this.x < 0 + this.radius){
this.xSpeed = -1* this.xSpeed;
}
if(this.y > 400 - this.radius || this.y < 0 + this.radius){
this.ySpeed = -1* this.ySpeed;
}
}
var j = 0;
function startAnim(){
j+= 10;
if( j === 2000){
var ballOne = new ballFunction
var ballOneInterval = setInterval(function() {ballOne.move();},10)
}
if( j === 4000){
var ballTwo = new ballFunction
var ballTwoInterval = setInterval(function() {ballTwo.move();},10)
}
if( j === 6000){
var ballThree = new ballFunction
var ballThreeInterval = setInterval(function() {ballThree.move();},10)
}
if( j === 8000){
var ballFour = new ballFunction
var ballFourInterval = setInterval(function() {ballFour.move();},10)
}
if( j === 10000){
var ballFive = new ballFunction
var ballFiveInterval = setInterval(function() {ballFive.move();},10)
}
if( j === 12000){
var ballSix = new ballFunction
var ballSixinterval = setInterval(function() {ballSix.move();},10)
}
}
var startAnimInt = setInterval(startAnim,10);
</script>
</body>
</html>
The this inside the move function isn't referencing to the ballFunction object, but to the window.
Use something like:
var ballOne = new ballFunction
var ballOneInterval = setInterval(ballOne.move.bind(ballOne),10)
Instead of:
var ballOne = new ballFunction
var ballOneInterval = setInterval(ballOne.move,10)
for all balls.
I am sure this is a very simple thing to do, but I am stuck here.
Here is the situation:
I have an HTML page with a div and a canvas element(not sure if I need this)
Also I have two javascript files using p5.js with setup and draw funtions where I draw my content on a canvas I create with createCanvas.
The other js file contains an object.
The problem is - I can get the animation to show on the HTML page, but not inside the div and/or canvas.
Image for a clearer picture:
HTML and JS comunication
HTML:
<html>
<head>
<meta charset="utf-8">
<title>Fractals</title>
<script language="javascript" type="text/javascript" src="libs/p5.js"></script>
<script language="javascript" src="libs/p5.dom.js"></script>
<script language="javascript" type="text/javascript" src="sketch.js"></script>
<script language="javascript" type="text/javascript" src="branch.js"></script>
<style>
body {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div>
<canvas id="fractal" height="197" width="333" style=" width:333;height:197;"></canvas>
</div>
</body>
</html>
JS sketch:
var tree = [];
var x;
var y;
function setup() {
createCanvas(333,197);
var a = createVector(width / 2, height);
var b = createVector(width / 2, height - 50);
var root = new Branch(a, b);
tree[0] = root;
for (var t = 0; t < 5; t++) {
for (var i = tree.length-1; i >= 0; i--) {
if (!tree[i].finished){
tree.push(tree[i].branchA());
tree.push(tree[i].branchB());
tree.push(tree[i].branchC());
}
tree[i].finished = true;
}
}
}
function draw() {
background(51);
x = mouseX;
y = mouseY;
for (var i = 0; i < tree.length; i++) {
tree[i].show();
tree[i].wind(x, y, tree[i].end.x, tree[i].end.y);
}
}
JS branch object:
function Branch(begin, end) {
this.begin = begin;
this.end = end;
this.finished = false;
this.origx = this.end.x;
this.origy = this.end.y;
this.show = function() {
stroke(255);
line(this.begin.x, this.begin.y, this.end.x, this.end.y);
}
this.branchA = function() {
var dir = p5.Vector.sub(this.end, this.begin);
dir.rotate(19.2);
dir.mult(0.67);
var newEnd = p5.Vector.add(this.end, dir);
var v = new Branch(this.end, newEnd);
return v;
}
this.branchB = function() {
var dir = p5.Vector.sub(this.end, this.begin);
dir.rotate(0);
dir.mult(0.67);
var newEnd = p5.Vector.add(this.end, dir);
var v = new Branch(this.end, newEnd);
return v;
}
this.branchC = function() {
var dir = p5.Vector.sub(this.end, this.begin);
dir.rotate(-19.2);
dir.mult(0.67);
var newEnd = p5.Vector.add(this.end, dir);
var v = new Branch(this.end, newEnd);
return v;
}
this.wind = function(mox,moy,treex,treey) {
var d = dist(mox,moy,treex,treey);
if (d < 20) {
this.end.x += random(-0.3, 0.3);
this.end.y += random(-0.3, 0.3);
}else{
this.end.x = this.origx;
this.end.y = this.origy;
}
}
}
P5 libraries : https://p5js.org/download/
From the docs:
https://github.com/processing/p5.js/wiki/Positioning-your-canvas
// sketch.js
function setup() {
var canvas = createCanvas(100, 100);
// Move the canvas so it's inside our <div id="sketch-holder">.
canvas.parent('sketch-holder');
background(255, 0, 200);
}
Create one instance of canvas with P5, then assigns its parent by dom id.
This blue circle is spawning back there, when I need him spawning on the front. What can be wrong? Is it because the canvas background loads only onmouseover? or because it's random or because the grid itself isn't as big as canvas? I'm really confused.
<!doctype html>
<html>
<head>
<title>Ussi l6una</title>
<script>
var kohad=new Array();
var pikkus=1, d=6, kogus=300;
var ballx=0, step=100;
var bally=0, step=100;
var monsterx=(step*parseInt(5*Math.random())), step=100;
var monstery=(step*parseInt(5*Math.random()));
function toit(){
var c=document.getElementById("tahvel");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.fillStyle = 'darkblue';
ctx.arc(monsterx+10, monstery+10, 25, 0, 2 * Math.PI, false);
ctx.fill();
ctx.lineWidth = 0;
ctx.strokeStyle = '#000000';
}
function devouring(){
if(monsterx==ballx && bally==monstery){
monsterx=step*parseInt(5*Math.random());
monstery=step*parseInt(5*Math.random());
toit();
cnt++;
punktid();
}
}
function looKohad(){
for(var i=0; i<kogus; i++){
kohad[i]=new Array(pikkus*i, 1200);
}
}
function arvutaUusTagumine(eesmine, tagumine){
var kaugus=new Array();
kaugus[0]=eesmine[0]-tagumine[0];
kaugus[1]=eesmine[1]-tagumine[1];
var kogukaugus=Math.sqrt(kaugus[0]*kaugus[0]+kaugus[1]*kaugus[1]);
var nihe=kogukaugus-pikkus;
var dx=kaugus[0]*nihe/kogukaugus;
var dy=kaugus[1]*nihe/kogukaugus;
return new Array(tagumine[0]+dx, tagumine[1]+dy);
}
function arvutaUuedKohad(){
console.log(kohad);
for(var i=1; i<kogus; i++){
kohad[i]=arvutaUusTagumine(kohad[i-1], kohad[i]);
}
}
function joonistaKohad(g){
for(var i=0; i<kogus; i++){
joonistaKoht(g, kohad[i])
}
}
function joonistaKoht(g, koht){
g.beginPath();
g.arc(koht[0], koht[1], d, 0, 2*Math.PI, true);
g.stroke();
}
function hiirLiigub(e){
var t=document.getElementById("tahvel");
var g=t.getContext("2d");
var tahvlikoht=t.getBoundingClientRect();
kohad[0][0]=e.clientX-tahvlikoht.left;
kohad[0][1]=e.clientY-tahvlikoht.top;
arvutaUuedKohad();
g.strokeStyle="#CC9966";
g.fillStyle="#CC9966";
g.clearRect(0, 0, t.width, t.height);
joonistaKohad(g);
}
looKohad();
</script>
</head>
<body
onLoad="toit();">
<canvas id="tahvel" width="800" height="800"
style="background-color:white" onmousemove="hiirLiigub(event)" onmouseover="this.style.backgroundImage = 'url(./dirt.png)'"></canvas><br />
</body>
</html>
You simply forgot to call toit() after joonistaKohad(g); in the main draw loop.
Since you clear the canvas, you have to redraw everything afterwise.
Nice result by the way.
http://jsbin.com/UVoXOreV/1/
I have this code and in Firefox is working well, but in Chrome I'am getting this error:
"Uncaught Error: INVALID_STATE_ERR: DOM Exception 11" at sprites.js:36
on that line is this code:
context.drawImage(
Context is a global variable in which contains 2d context of canvas. Here is full code:
index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="sprites.js"></script>
<script type="text/javascript" src="game.js"></script>
<script type="text/javascript" src="prototypes.js"></script>
<script type="text/javascript" src="initialize.js"></script>
</head>
<body onload="initialize()">
</body>
</html>
sprites.js
function SpritePrototype(frames, width, height, type)
{
this.frames = frames;
this.type = type;
if (this.frames > 0) {
this.frameArray = new Array(this.frames);
for (var i = 0; i < this.frames; i++) {
this.frameArray[i] = document.createElement("canvas");
}
}
}
function Sprite()
{
this.id = 0;
this.prototype = 0;
this.next = 0;
this.prev = 0;
this.x = 0;
this.y = 0;
this.startFrame = 0;
this.currentFrame = 0;
}
Sprite.prototype.draw = function()
{
if (this.prototype == 0) {
return;
}
if (context.drawImage) {
if (this.prototype.frames > 0) {
context.drawImage(
this.prototype.frameArray[this.currentFrame],
Math.round(this.x),
Math.round(this.y)
);
}
}
}
game.js
function Game()
{
this.frameLength = 1000/30;
this.startTime = 0;
this.sprites = 0;
}
Game.prototype.resetTime = function()
{
var d = new Date();
this.startTime = d.getTime();
delete d;
}
Game.prototype.addSprite = function(prototype)
{
currentId++;
if (this.sprites == 0) { // if creating the first sprite
this.sprites = new Sprite();
this.sprites.id = currentId;
this.sprites.prototype = prototype;
} else {
var tempSprite = this.sprites; // temporarily store the first sprite
while (tempSprite.next != 0) { // while not the last sprite
tempSprite = tempSprite.next; // shift to next one
}
tempSprite.next = new Sprite(); // next sprite to the last sprite
tempSprite.next.id = currentId;
tempSprite.next.prototype = prototype;
tempSprite.next.next = 0; // the last sprite, or the last one in the space
tempSprite.next.prev = tempSprite;
}
}
Game.prototype.loop = function()
{
var tempSprite;
var currentTime;
var globalFrame;
var oldFrame;
var d = new Date();
currentTime = d.getTime();
delete d;
globalFrame = Math.floor((currentTime - this.startTime)/this.frameLength);
canvas.width = canvas.width;
tempSprite = this.sprites;
while (tempSprite != 0) {
if (tempSprite.frames > 0) {
oldFrame = tempSprite.currentFrame;
tempSprite.currentFrame = globalFrame;
}
tempSprite.draw();
tempSprite = tempSprite.next;
}
}
prototypes.js
var protoPlayer;
function createPrototypes()
{
var tempCtx;
var i;
protoPlayer = new SpritePrototype(5, 20, 30, "player");
for (i = 0; i < protoPlayer.frames; i++) {
protoPlayer.frameArray[i].width = protoPlayer.width;
protoPlayer.frameArray[i].height = protoPlayer.height;
tempCtx = protoPlayer.frameArray[i].getContext("2d");
tempCtx.strokeStyle = "rgb("+ i * 50 +", 0, 0)";
tempCtx.beginPath();
tempCtx.moveTo(0, 0);
tempCtx.lineTo(20, 30);
tempCtx.stroke();
}
}
initialize.js
var game;
var canvas;
var context;
var currentId;
function initialize()
{
canvas = document.createElement("canvas");
canvas.width = 640;
canvas.height = 480;
canvas.setAttribute("style", "background:#060606;");
document.body.appendChild(canvas);
context = canvas.getContext("2d");
createPrototypes();
currentId = 0;
game = new Game();
game.addSprite(protoPlayer);
game.loop();
}
Seems to me that that error is happening because you are calling drawImage with a HTMLCanvasObject who's height or width is zero. From the latest canvas 2d context spec:
If the image argument is an
HTMLCanvasElement object with either a
horizontal dimension or a vertical
dimension equal to zero, then the
implementation must raise an
INVALID_STATE_ERR exception.
http://dev.w3.org/html5/2dcontext/#images
Hope this helps.
Some time this error also occurred when we try to do document.getElemetnById('xx').innerHtml='htmlcode'; in this time 'htmlcode' should be proper formatted mean should use proper closing tags.