# TypeError: np\_d.changed is not a function

**URL:** https://discourse.processing.org/t/typeerror-np-d-changed-is-not-a-function/7056
**Category:** Coding Questions
**Created:** [December 31, 2018, 2:08pm UTC](https://discourse.processing.org/t/typeerror-np-d-changed-is-not-a-function/7056 "2018-12-31T14:08:23Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![Strex](https://avatars.discourse-cdn.com/v4/letter/s/d07c76/32.png) [@Strex](https://discourse.processing.org/u/Strex)
#### Post date: [December 31, 2018, 2:08pm UTC](https://discourse.processing.org/t/typeerror-np-d-changed-is-not-a-function/7056/1 "2018-12-31T14:08:23Z")

</div>

i have this error and i don;t know how fix it.

code:

```auto
	var np;
	var r = 300;
	var t;
	var alp;
	var point1 = [];
 function setup() {
   createCanvas(windowWidth, windowHeight);
	 np_d = document.getElementById("points");
	 t_d = document.getElementById("times");
	 alp_d = document.getElementById("alp");
	 np_d.changed(np_f); // error
	 t_d.changed(t_f);
	 alp_d.changed(alp_f);
 }
 function np_f(){np=Number(np_d.value);}
 function t_f(){t=Number(t_d.value);}
 function alp_f(){alp=10*Number(alp_f.value);}
function draw(){
	background(255, 0, 200);
	translate(width/2,height/2);
	cirs();
 }
function point2(angle){
		this.x = r * cos(angle);
		this.y = r * sin(angle);
}
function circ(){
	point1 = [];
	for (var i = 0 ;i < np; i++)
	{
	point1.push(new point2(map(i,0,np,0,TWO_PI)));
	}
	for (var i = 0 ;i < np; i++)
	{
	stroke(255,alp);
	strokeWeight(1);
	line(point1[i].x,point1[i].y,point1[(t*i)%np].x,point1[(t*i)%np].y);
	}
}

```

---

<div class="post-metadata">

### Author: ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [December 31, 2018, 5:48pm UTC](https://discourse.processing.org/t/typeerror-np-d-changed-is-not-a-function/7056/2 "2018-12-31T17:48:02Z")

</div>

Method **changed()** belongs to class p5.Element:

- [p5js.org/reference/#/p5.Element/changed](http://p5js.org/reference/#/p5.Element/changed)
- [p5js.org/reference/#/p5.Element](http://p5js.org/reference/#/p5.Element)

However, the datatype of the object returned by method Document::**getElementById()** is an Element instead:

> **[Document.getElementById()](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById)**
>
> The Document method getElementById() returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element...

  

> **[Element](https://developer.mozilla.org/en-US/docs/Web/API/Element)**
>
> Element is the most general base class from which all objects in a Document inherit. It only has methods and properties common to all kinds of elements. More specific classes inherit from Element.

In order to get a p5.Element, replace Document::**getElementById()** w/ method p5::**select()**:

- [p5js.org/reference/#/p5/select](http://p5js.org/reference/#/p5/select)