Javascript showing the function text instead of printing value on screen - javascript

function hex(x,y,side,isLast,color)
{//Hex object constructor.
this.x = x;
this.y = y;
this.side = side;
this.isLast = isLast;
this.color = color;
function multiply()
{
return this.x * this.y;
}
this.multiply = multiply;
}
var hexagon = new hex(22,22,20,0,1);
document.write(hexagon.multiply);
When loading index.htm, results that writes on screen the function instead of the returning value:
function multiply() { return this.x * this.y; }
:(

You forgot the ():
document.write(hexagon.multiply());
If you don't use (), Javascript will treat multiply as a variable and write out it contents - in this case, the code of the function.

You have to make sure that your javascript code is in <script> and </script> tags. So, it might read:
<html><head><script type="text/javascript">
function hex(x,y,side,isLast,color)
{//Hex object constructor.
this.x = x;
this.y = y;
this.side = side;
this.isLast = isLast;
this.color = color;
function multiply()
{
return this.x * this.y;
}
this.multiply = multiply;
}
var hexagon = new hex(22,22,20,0,1);
document.write(hexagon.multiply)
</script>
<body>
<!--Content here-->
</body>
</html>

Related

accessing a methods property from another method

i want to access properties of a class method inside another method but i am getting NaN result. Isn't it possible to access the values of this.x and this.y from calSum()? Thanks
class Calc{
constructor(){}
num(){
this.x = 5;
this.y = 4;
}
calSum(){
this.sum = this.x + this.y;
console.log(this.sum);
}
}
const s = new Calc();
s.calSum();
Seems like this.x and this.y are not initialised in Calc constructor.
This results in this.x and this.y to be undefined.
undefined + undefined produces NaN.
I've updated constructor with initial values of zero for both x and y:
class Calc{
constructor(){
this.x = 0;
this.y = 0;
}
num(){
this.x = 5;
this.y = 4;
}
calSum(){
this.sum = this.x + this.y;
console.log(this.sum);
}
}
const s = new Calc();
s.calSum();

Why does my object method not register? Javascript

here is the code for my project:
'_' is a selector method.
'update' is run on an interval of 0.1
'init' creates the
'Ball' is the object I'm trying to create
'ball.set()' is the method that is not working.
var width = window.innerWidth/3;
var height = window.innerHeight-60;
var balls = [];
var id;
function rand(min, max) {
return (Math.random() * (max - min)) + min;
}
function run(){
init();
}
function init(){
document.write("<div style='width:"+width+"px;height:"+height+"px;' id='container'></div>");
new Ball(width/2-12.5, height/2-12.5, rand(-2, 2), rand(-2, 2), 1);
id = setInterval(update, 0.1);
}
function _(elem){
return document.getElementById(elem);
}
function update(){
for(var b in balls){
b.set();
}
}
function Ball(x, y, vx, vy, ind){
this.x = x;
this.y = y;
this.vx = vx;
this.vy = vy;
this.ind = ind;
balls[this.ind] = this;
_("container").innerHTML+=("<div style='top:"+y+"px;left:"+x+"px;' class='ball' id='ball"+this.ind+"'></div>");
this.deleteBall = function () {
_('ball'+this.ind).outerHTML = "";
balls[this.ind] = null;
};
this.set = function(){
this.x += this.vx;
this.y += this.vy;
var elem = _("ball"+this.ind);
elem.style.left = this.x + 'px';
elem.style.top = this.y + 'px';
};
}
run();
I'm trying to make a Ball object for a JS game I'm making. The only problem is Google Chrome is giving me an error:
Uncaught TypeError: b.set is not a function
at update (ballgame.js:29)
update # ballgame.js:29
What am I doing wrong?
I don't know the complete requirement, but I found the cause for this issue.The problem is with the line
balls[this.ind] = this;
Assume for the first time the constructor is called with 'ind' value of 5. This will set balls[5]=this object. Now 'balls' array length becomes 6 and balls[0] through balls[4] will contain value as 'undefined'.
Now in 'update' method, when you iterate through balls array, as balls[0] through balls[4] are undefined, you get the error
Uncaught TypeError: b.set is not a function

Declare method outside of class

i know i can add a method by doing:
point.prototype.move = function ()
{
this.x += 1;
}
But, is there a way to add a method to a class by assigning a function that is declared outside of it to one of its propertie?
I am pretty sure this can't work but it gives an idea about what i'am trying to do:
function point(x, y)
{
this.x = x;
this.y = y;
this.move = move();
}
function move()
{
this.x += 1;
}
The only reason your example doesn't work is because you are calling move() and assigning its result which is undefined.
You should just use a reference to the move function when assigning it.
function move()
{
this.x += 1;
}
function point(x, y)
{
this.x = x;
this.y = y;
this.move = move
}
Different ways to do it
// Attach the method to the prototype
// point.prototype.move = move;
// Attach the method to the instance itself
// var myPoint = new point(1,2); myPoint.move = move;
function point(x, y, move)
{
this.x = x;
this.y = y;
this.move = move;
}
function move()
{
this.x += 1;
}
var obj = new point(2, 5, move);

Why var a is undefined? Javascript OOP

I have this code. It creates an object with x and y field. I want to add a method, which creates new object with additional width and height fields. But despite my tryings it keeps returning undefined. What is wrong?
JSFiddle
function $ (x, y) {
this.x = x;
this.y = y;
return this;
}
$.prototype.$ = function (x, y) {
this.width = x - this.x;
this.height = y - this.y;
return this;
}
var a = $(10,10).$(30,30);
alert(a.width);
var a = (new $(10,10)).$(30,30); //You need new
alert(a.width);
Also it might not be a good idea to have an instance function of a class to have the same name as the class -- it is a little confusing.
Here is how you can do what you want to do with 2 "Point" objects (as asked for in the comments):
var Point = (function(){
var Point = function(x, y) {
this.width = x;
this.height = y;
}
Point.prototype.removePoint = function(point) {
return new Point(point.width - this.width, point.height - this.height);
}
return Point;
})()
var a = new Point(10,10);
var b = new Point(30,30);
var c = a.removePoint(b);
alert(c.width);
Fiddle: http://jsfiddle.net/maniator/d3fx7/
You missed the new before $; This works:
var a = new $(10,10).$(30,30);

How to instantiate a class(ClassA) inside another class(ClassB) and use the ClassA object as a property in ClassB in JavaScript?

Consider the following code:
function Coord(x, y) {
this.x = x;
this.y = y;
}
function Ellipse() {
this.Text = Text;
this.Cx = Cx;
this.Cy = Cy;
this.Rx = Rx;
this.Ry = Ry;
}
Now in the function Ellipseinstead of using Cx, Cy etc. I want to instantiate the function Coord for each pair to achieve something as follows:
function Coord(x, y) {
this.x = x;
this.y = y;
}
function Ellipse() {
this.Text = Text;
Coord C = new C(); // where C has its own properties x and y
Coord R = new R(); // where R has its own properties x and y
}
Try this:
function Coord(x, y) {
this.x = x;
this.y = y;
}
function Ellipse(text, cx, cy, rx, ry) {
this.text = text;
var c = new Coord(cx, cy);
var r = new Coord(rx, ry);
}
I don't know how you thought of Coord C = new C() but it's absolutely wrong. JavaScript variables have no types.
Also from where are you getting Text, Cx, Cy, etc? Shouldn't they be passed as arguments to the constructor?

Categories

Resources