|
JavaScript - Menu.js. Uncaught Typeerror: Cannot Set Property 'classname' Of Null
I've been using this javascript (menu.js) for a drop down navigation menu for my site. Everything works well on it but in multiple browsers I get this error occurring on line 7 and 16 which is the d.className = "menuHover"; and d.className = "menuNormal";
Code: function expand(s)
{
var td = s;
var d = td.getElementsByTagName("div").item(0);
td.className = "menuHover";
d.className = "menuHover";
}
function collapse(s)
{
var td = s;
var d = td.getElementsByTagName("div").item(0);
td.className = "menuNormal";
d.className = "menuNormal";
}
Im new to this whole thing. What needs to be done to solve this? Appreciate the help. Similar TutorialsWhat i'm trying to accomplish is two things. To select the page i want to load in each tab then select how many of thoughs tabs i wish to open. When the number of tabs is selected i want it to launch. i also have a refresh button that works i just can't get the windows to load. by the way for this project i want it to open the same url that is selected on all of the tabs. Here is what i have: <html> <head> </head> <form name="myform"> <select name="mySelectbox"> <option value="">Choose a destination...</option> <option value="http://www.yahoo.com/">YAHOO</option> <option value="http://www.google.com/">GOOGLE</option> <option value="http://www.altavista.com/">ALTAVISTA</option> <option value="http://www.amazon.com/">AMAZON</option> </select> </form> <form name = "myform2"> <select name = "numberWindows" onchange = "openThem()"> <option value = "0">Choose....</option> <option value = "1">TEST</option> <option value = "2">2</option> <option value = "3">3</option> <option value = "4">4</option> <option value = "5">5</option> </select> </form> <script> function open_win() { var myurl = parseInt(document.myform.myselectbox.value); window.open("myurl"); } </script> <script type = "text/javascript"> var i; function openThem() { var val = parseInt(document.myform2.numberWindows.value); for (i =0; i < val; i++) { open_win(); } } document.write('<form><input type=button value="Refresh To Do Again" onClick="history.go()"></form>') </script> </body> </html> Can someone please help. I'm just trying to learn how this is done. Thanks. The line "xmlHttp.onreadystatechange = function()" Does the following error, i dont know whats wrong. The code: Code: function MakeRequest()
{
var xmlHttp = getXMLHttp();
var page = document.getElementById("page").value;
var content = document.getElementById("code").value;
xmlHttp.onreadystatechange = function()
{
if(xmlHttp.readyState == 4 && xmlHttp.status==200)
{
HandleResponse(xmlHttp.responseText);
}
}
xmlHttp.open("POST", "edit.save.php", true);
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlHttp.send("page="+page+"&content="+content+"");
}
function getXMLHttp()
{
var xmlHttp
try
{
//Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
}
catch(e)
{
//Internet Explorer
try
{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
alert("Your browser does not support AJAX!")
return false;
}
}
}
}
function HandleResponse(response)
{
document.getElementById('SavedFile').innerHTML = response;
}
Good day! Here is the problem, setting the slider to the site, here's an example: http://wowslider.com/best-jquery-sli...near-demo.html and do not connect different effects on this slider, such as buttons on the sides and smooth shifting slides. When you see the code generates this error: Uncaught TypeError: Cannot read property addEventListener' of undefined I do not know what this error, help, error on this site: http://uh219381.ukrdomen.com/ Or here's the code: http://uh219381.ukrdomen.com/themes/...1/wowslider.js sorry for my English I do not really understand what is happening to my code but it just tell me the following: Code: document.getElementById("#movingword") is null
How could the movingword be null when I have declared it in my code? The following is my code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<title></title>
<style type="text/css">
body {
background-color:#000;
}
#scenery {
position:relative;
}
#moving {
position:absolute;
float:right;
top:100px;
left:50px;
}
#movingword {
position:absolute;
float:right;
top:0px;
left:0px;
}
</style>
<script type="text/javascript">
var a=120;
$(document).ready(function() {
document.getElementById("#movingword").style.top = a + "px";
});
</script>
</head>
<body>
<font color=white><h1> Hello World </h1></font>
<div id="scenery">
<img src="http://www.deshow.net/d/file/travel/2009-10/new-zealand-scenery-738-20.jpg" alt="">
<div id="moving">
<img src="http://maadinfo.com/images/blinking.gif" alt="">
</div>
<div id="movingword">
<font color="yellow"><font size="3"><b>This is the place</b></font><br>Welcome!</font>
</div>
</div>
</body>
</html>
Hi! I have the following javascript and accompanying html but the i keep getting the error: Unable to get value of the property 'options': object is null or undefined pointing to this line of the code " $thisSelectedValue = $formField.options[ $formField.selectedIndex ].value;" Can someone help me please... thanks in advance. Javascript Code: <script type="text/javascript">
$allValues = new Array();
$allValues[0] = 'Choose One';
$allValues[1] = 'A1';
$allValues[2] = 'A2';
$allValues[3] = 'A3';
$allValues[4] = 'A4';
$allValues[5] = 'A5';
function stripDupelicateValues(inElementId)
{
// get current list of all selected values
$selectedValues = new Array();
for( $position in $allValues )
{
if( $position != 0 )
{
$formField = eval( 'document.crewchange.emp_' + $position );
// preserve our selected values
$thisSelectedValue = $formField.options[ $formField.selectedIndex ].value;
$selectedValues[$thisSelectedValue] = true;
}
}
for( $position in $allValues )
{
if( $position != 0 )
{
$formField = eval( 'document.crewchange.emp_' + $position );
// preserve our selected values
$thisSelectedValue = $formField.options[ $formField.selectedIndex ].value;
// wipe out the previous choices
$formField.options.length = 0;
// create default option
$formField.options[0] = new Option( $allValues[0], 0 );
for( $optionValue in $allValues )
{
// add each of our non selected values
if( $selectedValues[$optionValue] != true )
{
$formField.options[$formField.options.length] = new Option( $allValues[$optionValue], $optionValue );
}
// create the option for our selected value
else if( $thisSelectedValue == $optionValue )
{
$index = $formField.options.length;
if( $optionValue != 0 )
{
$formField.options[$index] = new Option( $allValues[$optionValue], $optionValue );
$formField.options[$index].selected = true;
}
}
}
}
}
}
</script>
Html Code: <form action="cc2.php" method="post" name="cc"> <select name='emp[]' id='emp_1' onChange='stripDupelicateValues(this.id)'> <option>Choose One</option> <option value='1'>A1</option> <option value='2'>A2</option> <option value='3'>A3</option> <option value='4'>A4</option> <option value='5'>A5</option> </select> </form> Error Msg Code: Message: Unable to get value of the property 'options': object is null or undefined I'm not sure if this is a JS or CSS problem, but I figure I would start here. What is wrong with the "onload" function that makes it so that I can not initialize the class name? I get no errors and the toggleClass(IDS) function appears to work fine with similar logic tests. What I expect to happen is that the <blockquote id=...> class names be initialized to hide if and only if JS is available for the toggleClass function to work. Here is what I am doing... Code: <!DOC HTML>
<html>
<head>
<title> Toggle Class </title>
<script type="text/javascript">
//<![CDATA[
function toggleClass(IDS) {
var sel = document.getElementById(IDS); // alert(IDS+' : '+sel.className);
if (sel.className != 'hide') { sel.className = 'hide'; }
else { sel.className = 'show'; }
}
window.onload = function() {
var sel = document.getElementsByTagName('*');
for (var i=0; i<sel[i].length; ++i) {
if (sel[i].className == 'show') { sel[i].className = 'hide'; alert(sel[i].id); }
}
}
//]]>
</script>
<style type="text/css">
.show { display: block; }
.hide { display: none; }
li { list-style-type: none; }
#Schedule { margin:0px; padding:5px; }
#Projects { margin:0px; padding:5px; }
</style>
</head>
<body>
<a href="#" onclick="toggleClass('Schedule');return false"> Schedule </a>
<blockquote id="Schedule" class='show'>
<li>Monday:</li>
<li>Tuesday:</li>
<li>Wednesday:</li>
<li>Thursday:</li>
<li>Friday:</li>
</blockquote>
<br>
<a href="#" onclick="toggleClass('Projects');return false"> Projects </a>
<blockquote id="Projects" class='show'>
<li>Current</li>
<li>Past</li>
<li>Future</li>
<li>On-going</li>
</blockquote>
</body>
</html>
hi, i'm trying to pass variables from php to javascript ajax call using onmouseover, i loop a className to dynamically load the data into it, the problem is that all the elements affected and not the one i hover. JS: PHP Code: a = document.getElementsByTagName("span"); for (i=0; i<a.length; i++){ if (a[i].className == "stats") { a[i].style.display = "block"; a[i].innerHTML = req.responseText; } } PHP Code: <span class="stats"></span> <a href="javascript:void(0)" onmouseover="send_data(\'stats.php\', \''.$ip.'\')" ><img src="images/lock.png" alt="" /></a> thanks Hi i have done some reading on the net today because i am getting an error on ie. I did find the javascript twice in my code, once in the header and once here, so i removed it from the header. I also changed to src to the full url. But i am still getting this and i dont know why. the file is located in the root directory. Code: Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; SearchToolbar 1.2; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; msn OptimizedIE8;ENUS) Timestamp: Sat, 30 Jul 2011 16:03:05 UTC Message: 'null' is null or not an object Line: 8 Char: 3894 Code: 0 URI: http://www.mysite.com/swfobject.js Code: <script type='text/javascript' src='$CONST_LINK_ROOT/swfobject.js'></script>
<script type='text/javascript'>
var s1 = new SWFObject('player.swf','player','400','300','9');
s1.addParam('allowfullscreen','true');
s1.addParam('allowscriptaccess','always');
s1.addParam('flashvars','file=$CONST_LINK_ROOT/movies/$sql_array->vid_id.flv');
s1.write('preview');
</script>
<embed src='$CONST_LINK_ROOT/flvplayer.swf?file=$CONST_LINK_ROOT/movies/$sql_array->vid_id.flv&autoStart=false' width='175' height='175' quality='high' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer'></embed>
would appreciate any suggestions thanks. i was on 1.5 swfobject i did download 2.2 and im guessing all you do is replace the swfobject.js file to upgrade it, but what happened is it gives me this now. Code: Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; SearchToolbar 1.2; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; msn OptimizedIE8;ENUS) Timestamp: Sat, 30 Jul 2011 16:31:08 UTC Message: 'SWFObject' is undefined Line: 1283 Char: 1 Code: 0 URI: http://www.mysite/video_admin.php?type=v i dont mind going back to the old version i just need to get this working and im soooooooo lost lol ok another update, this is becomming maddening lol. once i have this line in the header php Code: <script type='text/javascript' src='$CONST_LINK_ROOT/swfobject.js'></script> I never have to use it again as long as they header php is included correct? This is what is driving me nuts, im back on 1.5 and it says its undefined Code:
but am in not defining it on this line? ---> var s1 = new SWFObject('player.swf','player','400','300','9');
<script type='text/javascript' src='swfobject.js'></script>
<script type='text/javascript'>
var s1 = new SWFObject('player.swf','player','400','300','9');
s1.addParam('allowfullscreen','true');
s1.addParam('allowscriptaccess','always');
s1.addParam('flashvars','file=$CONST_LINK_ROOT/movies/$sql_array->vid_id.flv');
s1.write('preview');
</script>
Another Update. I am back to the original question. null is null or not an object.. in my search i have found this found a solution. basically Internet Explorer is crappy and doesnt like the setAttribute property so had to change the onchange handler by directly changing the attrbute for the object like so. object.onchange = function() {} i have no idea what they means, does that mean i need to change swfobject.js or does that mean i have to change my xml request. and if it is the swfobject i have no clue what they mean or what lines Hi I am having trouble with a script. I cannot figure out why I get the message: error: null is null or not an object (In IE8) The site is: www.rayburns.com I have check the javascript for the navigation bar and for the rotating images and cannot see what is missing. Not sure what is not being called. Can someone please help with this. Thank you in advance! I've been working on a web-site and I've run into a problem. None of the buttons I've created will access the functions that they're supposed to access. When I used the JavaScript console in Chrome it threw the error Uncaught ReferenceError: (function) is not defined I've looked over it for syntax errors, but I couldn't find any. Am I missing anything? Here's my unfinished code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>N Physics</title>
<script type="text/javascript">
var numforms = 0;
var curentform = 0;
//consider further editing
function reset() {
window.location.reload();
}
function addvar() {
currentform = numforms + 1;
selectscreen();
}
function changevar() {
}
function selectscreen() {
selectdiv = document.createElement('div');
selectdiv.id = "select";
tkdklskjksdkfj
variable = document.createElement('SELECT');
variable.setAttribute('Name', 'variable');
variable.id = "variable";
ForceReg = document.createElement('option');
ForceReg.value = '001';
ForceReg.appendChild(document.createTextNode('Force'));
variable.appendChild(ForceReg);
Mass = document.createElement('option');
Mass.value = '002';
Mass.appendChild(document.createTextNode('Mass'));
variable.appendChild(Mass);
Accelleration = document.createElement('option');
Accelleration.value = '003';
Accelleration.appendChild(document.createTextNode('Accelleration'));
variable.appendChild(Accelleration);
selectdiv.appendChild(variable);
document.body.appendChild(selectdiv);
}
function newform() {
}
function cancel() {
}
function deleteform() {
}
fucntion checkprimary() {
}
function findeq() {
}
</script>
<style type="text/css">
<!--
body {
background-color:#999999;
}
#LayerHead {
position:absolute;
left:0px;
top:0px;
width:100%;
height:50px;
z-index:1;
background-color: #000000;
}
.spacer {
height:51px;
z-index:0;
}
.Button {
height:50px;
z-index:2;
}
.style1 {
color: #FFFFFF;
font-size: 43px;
z-index:1;
}
.style2 {
color: #FFFFFF;
font-size: 10px;
z-index:3;
}
#LeftButton {
width: 49%;
height: 50px;
left: 0px;
z-index:2;
}
#RightButton {
width: 49%;
height: 50px;
right: 0px;
z-index:2;
}
#Bottom {
position:fixed;
background-color:#000000;
width:100%;
bottom: 0px;
left: 0px;
z-index:3;
}
#select {
position: fixed;
width: 100%;
height: 100%;
opacity: 0.7;
filter: aplha(opacity=40);
background-color:#333333;
}
#variable {
position: fixed;
top: 50%;
width: 90%;
margin-left: auto;
margin-right: auto;
}
-->
</style>
</head>
<body>
<div id="LayerHead">
<span class="style1">N Physics</span>
</div>
<div class="spacer"></div>
<div class="Button">
<input type="button" id="LeftButton" value="Instructions" onclick="location.href = 'instructions.html'" />
<input type="button" id="RightButton" value="Reset" onclick="reset();" />
</div>
<div id="VarDone"></div>
<div class="Button">
<input type="button" id="LeftButton" value="Add a New Variable" onclick="addvar();" />
<input type="button" id="RightButton" value="Find the Equation" onclick="findeq();" />
</div>
<div id="Answer"></div>
<div id="Bottom">
</div>
</body>
</html>
Hi I've implemented Busybox on a website to display FLV files in a popup player. This works fine, except for the following error in IE (FF is fine) when I close the popup: 'null' is null or not an object I think I've narrowed it down to the following block of code, but am stuck as to what to do from here. Code: var cl = new Element('img',{
'styles':{
width:'24px',
height:'24px',
position:'absolute',
top:'-20px',
right:'-20px',
'z-index':'100000'
},
'src':'bumpbox/closed.png',
'id':'closer'
})
cl.addEvent('click',function(e){
e = new Event(e).stop();
bg.dispose();
$(el).getChildren().dispose();
eff2.start({
'width':[maxw,1],
'height':[maxh,1],
'left': [endleft,middleH],
'top': [endtop, middleV+s]
})
})
The IE error is just giving me line number 1 of the php, but the error, I'm sure, lays in the Javascript. Many thanks uncaught exception: Syntax error, unrecognized expression:
Code: :([rel*=qnt_Rc]) I have this code: Code: grpDiv = $$('div:([rel*=' + txt_val + '])');
Which when operaterated on, we have: Code: grpDiv = $$('div:([rel*=qnt_Rc])
This error: uncaught exception: Syntax error, unrecognized expression: Code: :([rel*=qnt_Rc]) Is new. The code in question has been around for about a year and no issues with prototype 1.6.1. Yet we upgraded to 1.7, and this error started showing. any ideas what this could be and how to fix it? thanks Double post I'm sorry. Please look at my other one.
Hey folks. I am needing some help with an error I'm getting from a project I'm working on. First off let me preface this all with the fact that I'm a total javascript noob. I'm really trying to understand what I'm doing wrong. So any help or advice is MORE than welcome. Here's what is happening. I found this code that will duplicate a row in a table and modifiy the name of a input in the row. Well for my purposes I have two different tables I need to work with. (each one idividually) So I changed the code a bit to make it accecpt a variable to use for the table name. (before it was static) and now I'm getting a error. Code: Error: uncaught exception: [Exception... "Component returned failure code: 0x80004003 (NS_ERROR_INVALID_POINTER)" nsresult: "0x80004003 (NS_ERROR_INVALID_POINTER)" location: "JS frame :: http://www.tourandtravelnow.com/admin/scripts/faxPageScript.js :: addRow :: line 14" data: no] This is the old code that would work (only for one of the tables) Code: var clone;
function cloneRow(){
var rows=document.getElementById('mytab').getElementsByTagName('tr');
var index=rows.length;
clone=rows[index-1].cloneNode(true);
var inputs=clone.getElementsByTagName('input'), inp, i=0 ;
while(inp=inputs[i++]){
inp.name=inp.name.replace(/\d/g,'')+(index+1);
}
}
function addRow(){
var tbo=document.getElementById('mytab').getElementsByTagName('tbody')[0];
tbo.appendChild(clone);
cloneRow();
}
onload=cloneRow;
and here is my code that doesn't work. Code: var clone;
function cloneRow(mytab){
var rows=document.getElementById(mytab).getElementsByTagName('tr');
var index=rows.length;
clone=rows[index-1].cloneNode(true);
var inputs=clone.getElementsByTagName('input'), inp, i=0 ;
while(inp=inputs[i++]){
inp.name=inp.name.replace(/\d/g,'')+(index+1);
}
}
function addRow(mytab){
alert(mytab);
var tbo=document.getElementById(mytab).getElementsByTagName('tbody')[0];
tbo.appendChild(clone);
cloneRow(mytab);
}
onload=cloneRow(mytab);
So like I said any help would AWESOME! have a great day. Kevin. I can't get any info from Firebug except that one line, uncaught exception [object Object]. The code fully worked, then I needed to make it dynamically create Sortables from the scriptaculous library based on how many X were in a table in my database, which I've done, and I'm thinking it may be a simple slight parse error of some type, I'm not too good with Javascript, because now my script barely works. I've double checked the script's source code, the PHP variables are exactly what they should be. Code: print<<<HERE
Sortable.create('sortlist$box', { tag: 'img', overlap:'horizontal',constraint:false, containment: $list, dropOnEmpty: true,
onChange: function(item) {
var list = Sortable.options(item).element;
if(changeEffect) changeEffect.cancel();
changeEffect = new Effect.Highlight('changeNotification', {restoreColor:"transparent" });
},
onDrop: function(item) {
var thing=Sortable.options(item).element.identify();
var anchors = document.getElementById(thing).childNodes.length-2;
if(anchors > 20){
alert('This box had 20 creatures in it already, your last action has not been saved.');
window.location.reload();
}
else{
new Ajax.Request("saveImageOrder.php", {
method: "post",
parameters: { data: Sortable.serialize("sortlist$box") }
});
}
}
});
HERE;
$box++;
}
?>
});
</script>
if you solve this I'll send ya $10 via paypal I know that unlike PHP, NULL in JavaScript must be quoted as a string. Does it matter if you use single or double quote?
1. When creating a new element using the create method, do the zIndex values of all elements that follow it change? If so how do I get the zIndex of all divs with a specific classname within a specified container? I'm working with dynamic drive's 'dhtmlwindow' object class file and have made revisions to it...however this is my first time working with this type of file and while some things are easy to change the zIndex change of the setfocus function does not look like any of my previous scripts. I have this simple manual photo slide show. It shows four photos and when you click the next button and it moves one photo over and one photo back for the previous button. I have to moving by changing the CSS property of 'left' by 195 pixels each move. So for it to move next it will subtract 195 pixels from the left property and for moving back it add 195 pixels to the left property. I have the code setup so when you click it changes the property of left to either -195 or 195 pixels but I need it so it actually does the math, not just give it a set value. But I don't know how to do that. Code: function MM_changeProp(objId,x,theProp,theValue) { //v9.0
var obj = null; with (document){ if (getElementById)
obj = getElementById(objId); }
if (obj){
if (theValue == true || theValue == false)
eval("obj.style."+theProp+"="+theValue);
else eval("obj.style."+theProp+"='"+theValue+"'");
}
}
function nextPhoto() {
MM_changeProp('fanThumbWrapOne','','left','-195px','DIV')
}
function prevPhoto() {
MM_changeProp('fanThumbWrapOne','','left','195px','DIV')
}
so where you see -195px and 195px in the functions for nextPhoto and prevPhoto I need those to actually be functions where it subtracts 195px or adds 195px. Hi, This is my first post while learning Javascript and jQuery as total noob. I have something like this: Code: var desc = "This is your title and here is even more that might be added so that we can get at least 60 characters or so";
var desc = desc.trim().substring(0, 40).split(" ").slice(0, -1).join(" ") + "...more";
alert(shortText );
It is actually being used on a page that calls a description from a MySQL table, but this example fails in exactly the same manner. Although FF and other browsers successfully initiate the script with errors, but IE loops endlessly and freezes up. FireBug reports "reference to undefined property a[d]". Using jQuery 1.6.2. I'm not really sure what property is undefined here and how this can work without freezing IE. Thanks in advance for any help! AJ |
|||||||