getElementById: Undefined??

cleary1981 · July 28, 2008

Hi,

I have written a function that creates a new object, the problem I am having is trying to refer to these objects in another function. When using getElemenntById I get a value "undefined". Does anyone know where im going wrong?

function showObject (){
if (request.readyState == 4) {
var returned = request.responseText;
var splitResult = returned.split(" ");
var h = splitResult[0];
var w = splitResult[1];	// the dimensions must be set to a scale as they are to big for the screen. 25px represents 100mm
h = h/5;
w = w/5;

cv = document.getElementById("canvas");
var newObject = document.createElement('div');
newObject.Class = g_objName;
newObject.id = "newObject";
newObject.innerHTML = g_objName;
newObject.alt = g_objName;
newObject.style.height = h;
newObject.style.width = w;
newObject.onmousedown=function(){grab(this);}	
cv.appendChild(newObject);
}
}

function render () {
var ww = document.getElementById("newObject").value;
alert(ww);


}

xenophobia · July 28, 2008

May I know how u call the render function? Because as I see, you are using ajax right?

There will be a delay. So if you call render right after you called the showObject, the object you trying to get will not return since it still waiting for the ajax's response.

cleary1981 · July 28, 2008

<body>
<div id = "canvas">
</div>
<div id = "controls">

<FORM name="drop_list">
	<fieldset id="ftype">
	<label for="type">Type</label>
	<div class="div_texbox">
		<SELECT  id="Category" NAME="Category" onChange="SelectSubmenu();" >
		<Option value="">Select Type</option>
		</SELECT>
	</div>
	</fieldset>
	<fieldset id="fmodel">
  		<label for="mod_named">Model</label>
    		<div class="div_texbox">
		<SELECT id="model" NAME="model" onChange="get_description();">
		<Option value="">Select Model</option>
		</SELECT>
		</div>
	</fieldset>
	<fieldset id="fsubtype">
  		<label for="subtype">sub</label>
    		<div class="div_texbox">
		<SELECT id="submenu" NAME="submenu" onChange="SelectModel();">
		<Option value="">Select</option>
		</SELECT>
		</div> 
	</fieldset>
	<fieldset id="fname">
	<label for="mod_name">Name</label>
    		<div class="div_texbox">
    			<input name="objName" type="text" id="objName" value="" />
	</div>
	</fieldset>
	<fieldset id="fbutton">
	<div class="button_div">
	<input type = "button" value = "Generate" onClick = "createObject()">
	<input type = "text" value = "" name = "xpos" id = "xpos">
	<input type = "text" value = "" name = "ypos" id = "ypos">
	<input type = "text" value = "" name = "object" id = "object">	
	</div>
	</fieldset>
	<fieldset id="fdescription">
	<legend>Description</legend>
	<span id="description">description goes here</span>	
	</fieldset>
	</form>
	<fieldset id="createModule">
	<input type = "button" value = "New Module" onClick = "window.open('createModule.php', 'NewModule', 'width=700, height=400, statusbar=yes')">
	</fieldset>
	<fieldset id="frender">
	<input type = "button" value = "Render" onClick = "render ()">
	</fieldset>
<fieldset id ="temp">

</fieldset>
</div>
</body>
</html>

xenophobia · July 28, 2008

Okay... But i can't trace anything from there. You sure that the HTMLDiv Element was created under your showObject function?

Also 1 more question, how you call your showOjbect function?

cleary1981 · July 28, 2008

heres a full listing

<?php
if ($_COOKIE["auth"] == "1") {

} else {
//redirect back to login form if not authorised
header ("Location: loginform.html");
exit;
}
?>
<html>
<head>
<title>TES - Pricing System</title>
<style type="text/css">
#canvas {
padding:0px;
position: absolute;
background-color:grey;
border:dashed gray 1px;
top: 5px;
padding:0px;
width:100%;
height:470px;
float:left;
font-size: 8px;
font-family:Arial, Helvetica, sans-serif;
overflow: scroll;
}
#controls {
margin:auto;
padding:10px;
position: absolute;
width:100%;
top:475px;
background: grey; 
border:dashed gray 1px;
height: 100px;
}
.clear {
clear:both;
}
label {
width:30px;
height:32px;
margin-top:3px;
margin-right:2px;
padding-top:1px;
padding-left:6px;
float:left;
display: block;
font-family:Arial, Helvetica, sans-serif;
font-size: 115%;
letter-spacing: -1px;
font-weight: normal;
line-height: 1.1;
color:#666;
}
fieldset {
border:0;
}
#temp {
position:absolute;
top:110px;
left:189px;
}#fbutton {
position:absolute;
top:50px;
left:690px;
width:600px;
}
#fmodel {
position:absolute;
top:10px;
left:400px;
}
#ftype {
position:absolute;
top:10px;
left:10px;
}
#fsubtype {
position:absolute;
top:10px;
left:180px
}
#fname {
position:absolute;
top:10px;
left:568px;
}
#frender {
position:absolute;
top:50px;
left:500;
}
#createModule {
position:absolute;
top:50px;
left:570;
}
#fdescription {
position:absolute;
top:50px;
left:10px;
width:100%;
}
#newObject {
position: absolute;
background-color:green;
border:solid gray 1px;
width:50px;
height:50px;
zIndex:1;
overflow: hidden;
cursor:pointer;
font-size: 12px;
font-family:Arial, Helvetica, sans-serif;
}
</style>
<script language="javascript" src="list.php"></script>
<script type="text/javascript" src="text-utils.js"> </script>
<script type="text/javascript" src="request.js"> </script>
<script type = "text/javascript">

var g_objName, ss;

window.onload = function() {

fillCategory(); 
init();
}

function get_description() {
var model = document.getElementById("model").value;
var url = "lookupdescription.php?model=" + escape(model);
request.open("GET", url, true);
request.onreadystatechange = updatePage;
request.send(null);
}

function updatePage() {
if (request.readyState ==4) {
	var modeldescription = request.responseText;
	var x = document.getElementById("description");
	replaceText(x, modeldescription);
	document.getElementById("objName").value = " ";
}
}
function createObject() {
var g_model = document.getElementById("model").value;
g_objName = document.getElementById("objName").value;
var url = "create_object.php?g_model=" + escape(g_model) + "&g_objName=" + escape(g_objName);
request.open("GET", url, true);
request.onreadystatechange = showObject;
request.send(null);
}
function showObject (){
if (request.readyState == 4) {
var returned = request.responseText;
var splitResult = returned.split(" ");
var h = splitResult[0];
var w = splitResult[1];	// the dimensions must be set to a scale as they are to big for the screen. 25px represents 100mm
h = h/5;
w = w/5;

cv = document.getElementById("canvas");
var newObject = document.createElement('div');
newObject.Class = g_objName;
newObject.id = "newObject";
newObject.innerHTML = g_objName;
newObject.alt = g_objName;
newObject.style.height = h;
newObject.style.width = w;
newObject.onmousedown=function(){grab(this);}	
cv.appendChild(newObject);
}
}

function render () {
var ww = document.getElementById("newObject").value;
alert(ww);
}

var mousex = 0;
var mousey = 0;
var grabx = 0;
var graby = 0;
var orix = 0;
var oriy = 0;
var elex = 0;
var eley = 0;
var algor = 0;

var dragobj = null;

function falsefunc() { return false; } // used to block cascading events

function init()
{
  document.onmousemove = update; // update(event) implied on NS, update(null) implied on IE
  update();
}

function getMouseXY(e) // works on IE6,FF,Moz,Opera7
{ 
  if (!e) e = window.event; // works on IE, but not NS (we rely on NS passing us the event)

  if (e)
  { 
    if (e.pageX || e.pageY)
    { // this doesn't work on IE6!! (works on FF,Moz,Opera7)
      mousex = e.pageX;
      mousey = e.pageY;
      algor = '[e.pageX]';
      if (e.clientX || e.clientY) algor += ' [e.clientX] '
    }
    else if (e.clientX || e.clientY)
    { // works on IE6,FF,Moz,Opera7
      mousex = e.clientX + document.body.scrollLeft;
      mousey = e.clientY + document.body.scrollTop;
      algor = '[e.clientX]';
      if (e.pageX || e.pageY) algor += ' [e.pageX] '
    }  
  }
}

function update(e)
{
  getMouseXY(e); // NS is passing (event), while IE is passing (null)

  document.getElementById('xpos').value = elex;
  document.getElementById('ypos').value = eley;
  document.getElementById('object').value = ss;
}

function grab(context, mod_name)
{
  document.onmousedown = falsefunc; // in NS this prevents cascading of events, thus disabling text selection
  dragobj = context;
  ss = context.Class;
  dragobj.style.zIndex = 10; // move it to the top
  document.onmousemove = drag;
  document.onmouseup = drop;
  grabx = mousex;
  graby = mousey;
  elex = orix = dragobj.offsetLeft;
  eley = oriy = dragobj.offsetTop;
  update();
}
function dragITT(e)   // suggested solution doesnt work
{
w = parseInt(e.style.width);
h = parseInt(e.style.height);

self.document.onmousemove=function()
{
	e.style.left = Math.floor((event.clientX)/w)*w;
	e.style.top = Math.floor((event.clientY)/h)*h;
	return false;
}
self.document.onmouseup=function()
{
	self.document.onmousemove=null;
}
}
function drag(e) // parameter passing is important for NS family 
{
  if (dragobj)
  {
    elex = orix + (mousex-grabx);
    eley = oriy + (mousey-graby);
    dragobj.style.position = "absolute";
    dragobj.style.left = (elex).toString(10) + 'px';
    dragobj.style.top  = (eley).toString(10) + 'px';
  }
  update(e);
  return false; // in IE this prevents cascading of events, thus text selection is disabled
}

function drop()
{
  if (dragobj)
  {
    dragobj.style.zIndex = 0;
    dragobj = null;
  }
  update();
  document.onmousemove = update;
  document.onmouseup = null;
  document.onmousedown = null;   // re-enables text selection on NS
}


</script>
</head>
<body>
<div id = "canvas">
</div>
<div id = "controls">

<FORM name="drop_list">
	<fieldset id="ftype">
	<label for="type">Type</label>
	<div class="div_texbox">
		<SELECT  id="Category" NAME="Category" onChange="SelectSubmenu();" >
		<Option value="">Select Type</option>
		</SELECT>
	</div>
	</fieldset>
	<fieldset id="fmodel">
  		<label for="mod_named">Model</label>
    		<div class="div_texbox">
		<SELECT id="model" NAME="model" onChange="get_description();">
		<Option value="">Select Model</option>
		</SELECT>
		</div>
	</fieldset>
	<fieldset id="fsubtype">
  		<label for="subtype">sub</label>
    		<div class="div_texbox">
		<SELECT id="submenu" NAME="submenu" onChange="SelectModel();">
		<Option value="">Select</option>
		</SELECT>
		</div> 
	</fieldset>
	<fieldset id="fname">
	<label for="mod_name">Name</label>
    		<div class="div_texbox">
    			<input name="objName" type="text" id="objName" value="" />
	</div>
	</fieldset>
	<fieldset id="fbutton">
	<div class="button_div">
	<input type = "button" value = "Generate" onClick = "createObject()">
	<input type = "text" value = "" name = "xpos" id = "xpos">
	<input type = "text" value = "" name = "ypos" id = "ypos">
	<input type = "text" value = "" name = "object" id = "object">	
	</div>
	</fieldset>
	<fieldset id="fdescription">
	<legend>Description</legend>
	<span id="description">description goes here</span>	
	</fieldset>
	</form>
	<fieldset id="createModule">
	<input type = "button" value = "New Module" onClick = "window.open('createModule.php', 'NewModule', 'width=700, height=400, statusbar=yes')">
	</fieldset>
	<fieldset id="frender">
	<input type = "button" value = "Render" onClick = "render ()">
	</fieldset>
<fieldset id ="temp">

</fieldset>
</div>
</body>
</html>

and a bit of php for show object

<?php
require "config.php";

$g_model = $_GET['g_model'];
$g_objName = $_GET['g_objName'];
mysql_query("INSERT INTO object (module_name, object_name, xpos, ypos) VALUES ('".$g_model."', '".$g_objName."', '10', '10')");

$sql = "SELECT height, width FROM module WHERE module_name='$g_model'";
$result = mysql_query($sql) or trigger_error(mysql_error());
$row = mysql_fetch_assoc($result);

$return = $row['height']." ". $row['width'];
echo $return;
?>

xenophobia · July 28, 2008

Alright. I want you to do some testing, try add in an alert inside your showObject code like this:

function showObject (){
if (request.readyState == 4) {
	var returned = request.responseText;
	var splitResult = returned.split(" ");
	var h = splitResult[0];
	var w = splitResult[1];	// the dimensions must be set to a scale as they are to big for the screen. 25px represents 100mm
	h = h/5;
	w = w/5;

	cv = document.getElementById("canvas");
	var newObject = document.createElement('div');
	newObject.Class = g_objName;
	newObject.id = "newObject";
	newObject.innerHTML = g_objName;
	newObject.alt = g_objName;
	newObject.style.height = h;
	newObject.style.width = w;
	newObject.onmousedown=function(){grab(this);}	
	cv.appendChild(newObject);
                // Add this statement:
                alert("Hey! You see me?");
}
}

Just to confirmed that this function are completely run. If you do not get this alert message, please try check back from where you calling this functions.

cleary1981 · July 28, 2008

yeah that works

xenophobia · July 28, 2008

Aha... I spot the error.

It was all because:

var ww = document.getElementById("newObject").value;

.value is a null properties of the object. so that why you get undefined.

cleary1981 · July 28, 2008

how can i get round this?

cleary1981 · July 28, 2008

yeah worked it out. Just changed to

var ww = document.getElementById("newObject").id;

xenophobia · July 28, 2008

Okok... Good.. cheers

cleary1981 · July 28, 2008

dont suppose you want to take a stab at what I am trying to do here? Im trying to get the x and y postion of each object with an id of newObject and insert the details into my db

Sign In

getElementById: Undefined??

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information