Uncaught ReferenceError: colors is not defined {Java-script}

Question

var Circle = {
	numberCircles: 5,
	colors: ["#780000", "#c1121f", "#fdf0d5", "#003049", "#669bbc"],
	//create circle
	draw: function (x, y) {
		x = propCircle.x;
		y = propCircle.y;
		context.beginPath();
		radius = Math.random() * 10 + 1;
		fill = Circle.colors[Math.round(Math.random() * colors.length - 1)];
		context.arc(x, y, radius, 0, 2 * Math.PI, false);

		if (fill) {
			context.fillStyle = fill;
			context.fill();
		}
	},
	sprayCircle: function () {
		for (let i = 0; i < Circle.numberCircles; i++) {
			let los = Math.round(Math.random() * 3);
			switch (los) {
				case 0:
					this.draw(propCircle.x + Math.random() * 30 + 10, propCircle.y + Math.random() * 50);
					break;
				case 1:
					this.draw(propCircle.x + Math.random() * 30 + 10, propCircle.y - Math.random() * 50);
					break;
				case 2:
					this.draw(propCircle.x - Math.random() * 5, propCircle.y - Math.random() * 5);
					break;
			}
		}
	},
};

dlaczego consola zwraca błąd is not definited

EDIT 

var Circle = {
	numberCircles: 5,
	colors: ["#780000", "#c1121f", "#fdf0d5", "#003049", "#669bbc"],
	//create circle
	draw(x, y) {
		x = propCircle.x;
		y = propCircle.y;
		context.beginPath();
		radius = Math.random() * 10 + 1;
		fill = Circle.colors[Math.round(Math.random() * colors.length - 1)];
		context.arc(x, y, radius, 0, 2 * Math.PI, false);

		if (fill) {
			context.fillStyle = fill;
			context.fill();
		}
	},
	//spray
	sprayCircle() {
		for (let i = 0; i < Circle.numberCircles; i++) {
			let los = Math.round(Math.random() * 3);
			switch (los) {
				case 0:
					this.draw(propCircle.x + Math.random() * 30 + 10, propCircle.y + Math.random() * 50);
					break;
				case 1:
					this.draw(propCircle.x + Math.random() * 30 + 10, propCircle.y - Math.random() * 50);
					break;
				case 2:
					this.draw(propCircle.x - Math.random() * 5, propCircle.y - Math.random() * 5);
					break;
			}
		}
	},
};

 

Comments

this nie działa

---

var Circle = {
	numberCircles: 5,
	colors: ["#780000", "#c1121f", "#fdf0d5", "#003049", "#669bbc"],
	//create circle
	draw(x, y) {
		x = propCircle.x;
		y = propCircle.y;
		context.beginPath();
		radius = Math.random() * 10 + 1;
		fill = this.colors[Math.round(Math.random() * colors.length - 1)];
		context.arc(x, y, radius, 0, 2 * Math.PI, false);

		if (fill) {
			context.fillStyle = fill;
			context.fill();
		}
	},

---

Na tym screenie absolutnie nic nie widać… Mógłbyś treść błędu wstawić jako tekst?

---

bład 

index2.js:27 Uncaught ReferenceError: colors is not defined
    at Object.draw (index2.js:27:49)
    at Object.sprayCircle (index2.js:47:11)
    at HTMLCanvasElement.<anonymous> (index2.js:62:10)

cały kod 

const fireworks = document.querySelector(".fireworks");
const context = fireworks.getContext("2d");

var propCircle = {
	x: undefined,
	y: undefined,
};

//function seting window Size
function windowSize() {
	fireworks.width = window.innerWidth * 2;
	fireworks.height = window.innerHeight * 2;
	fireworks.style.height = window.innerHeight + "px";
	fireworks.style.width = window.innerWidth + "px";
	context.scale(2, 2);
	// console.log("windowSize");
}
var Circle = {
	numberCircles: 5,
	colors: ["#780000", "#c1121f", "#fdf0d5", "#003049", "#669bbc"],
	//create circle
	draw(x, y) {
		x = propCircle.x;
		y = propCircle.y;
		context.beginPath();
		radius = Math.random() * 10 + 1;
		fill = this.colors[Math.round(Math.random() * colors.length - 1)];
		context.arc(x, y, radius, 0, 2 * Math.PI, false);

		if (fill) {
			context.fillStyle = fill;
			context.fill();
		}
	},
	//spray
	sprayCircle() {
		for (let i = 0; i < Circle.numberCircles; i++) {
			let los = Math.round(Math.random() * 3);
			switch (los) {
				case 0:
					this.draw(propCircle.x + Math.random() * 30 + 10, propCircle.y + Math.random() * 50);
					break;
				case 1:
					this.draw(propCircle.x + Math.random() * 30 + 10, propCircle.y - Math.random() * 50);
					break;
				case 2:
					this.draw(propCircle.x - Math.random() * 5, propCircle.y - Math.random() * 5);
					break;
			}
		}
	},
};

let Drawing = false;
//mouse follow
fireworks.addEventListener("mousedown", function () {
	Drawing = true;
});

fireworks.addEventListener("mousemove", function (e) {
	if (Drawing === true) {
		Circle.sprayCircle();
		propCircle.x = e.offsetX;
		propCircle.y = e.offsetY;
	}
});
window.addEventListener("mouseup", function () {
	if (Drawing === true) {
		Drawing = false;
	}
});
//end

windowSize();
window.addEventListener("resize", windowSize, false);

 

---

@Comandeer, Mam pytanie wiesz jak zrobić by ruszająć myszką z prawa do lewa te kulki nie wyprzedały tych głownych z case - a 2 tak samo jak to wyglada z lewej do prawej

cały kod

const fireworks = document.querySelector(".fireworks");
const context = fireworks.getContext("2d");

var propCircle = {
	x: undefined,
	y: undefined,
};

//function seting window Size
function windowSize() {
	fireworks.width = window.innerWidth * 2;
	fireworks.height = window.innerHeight * 2;
	fireworks.style.height = window.innerHeight + "px";
	fireworks.style.width = window.innerWidth + "px";
	context.scale(2, 2);
	// console.log("windowSize");
}
var Circle = {
	numberCircles: 5,
	colors: ["#780000", "#c1121f", "#fdf0d5", "#003049", "#669bbc"],
	//create circle
	draw(x, y) {
		context.beginPath();
		radius = Math.random() * 10 + 1;
		fill = this.colors[Math.round(Math.random() * this.colors.length - 1)];
		context.arc(x, y, radius, 0, 2 * Math.PI, false);

		if (fill) {
			context.fillStyle = fill;
			context.fill();
		}
	},
	//spray
	sprayCircle() {
		for (let i = 0; i < this.numberCircles; i++) {
			let los = Math.round(Math.random() * 3);
			switch (los) {
				case 0:
					this.draw(propCircle.x + Math.random() * 30 + 10, propCircle.y + Math.random() * 50);
					break;
				case 1:
					this.draw(propCircle.x + Math.random() * 30 + 10, propCircle.y - Math.random() * 50);
					break;
				case 2:
					this.draw(propCircle.x - Math.random() * 5, propCircle.y - Math.random() * 5);
					break;
			}
		}
	},
};

let Drawing = false;
//mouse follow
fireworks.addEventListener("mousedown", function () {
	Drawing = true;
});

fireworks.addEventListener("mousemove", function (e) {
	if (Drawing === true) {
		Circle.sprayCircle();
		propCircle.x = e.offsetX;
		propCircle.y = e.offsetY;
	}
});
window.addEventListener("mouseup", function () {
	if (Drawing === true) {
		Drawing = false;
	}
});
//end

windowSize();
window.addEventListener("resize", windowSize, false);

html

<canvas class="fireworks" width="560" height="868"></canvas>

 

Answer 1

No bo Circle.colors nie istnieje, istnieje this.colors – to dwie różne rzeczy:

class Test {
	static test = 'statyczna';

	test = 'niestatyczna';

	constructor() {
		console.log( Test.test ); // 'statyczna'
		console.log( this.test ); // 'niestatyczna'
	}
}

new Test();

Własności statyczne przypinane są do klasy, natomiast "normalne" – do poszczególnych instancji.

Comments

na this probowałem jest kometarz

---

No bo w tej linijce używasz nagle colors.length zamiast this.colors.length.

---

tylko teraz mam inny problem że używając obiektów przestały mi się rozjeżdżać te kulki 

sprayCircle() {
		for (let i = 0; i < this.numberCircles; i++) {
			let los = Math.round(Math.random() * 3);
			switch (los) {
				case 0:
					this.draw(propCircle.x + Math.random() * 30 + 10, propCircle.y + Math.random() * 50);
					break;
				case 1:
					this.draw(propCircle.x + Math.random() * 30 + 10, propCircle.y - Math.random() * 50);
					break;
				case 2:
					this.draw(propCircle.x - Math.random() * 5, propCircle.y - Math.random() * 5);
					break;
			}
		}
	},
};

 

---

mam w innej funkcji napisywałem x,y jako kilkniecie przez clienta