[SOLVED] w3Schools

scottybwoy · July 22, 2008

I'm trying to implement the onClick functionality shown here on my web page. I tried just copying and pasting it directly as a model. But it just doesn't work (will not copy the data). I even copied the url into the same browser to see if all the settings were correct and it works fine on the w3schools page, but not mine.

I'm using this doctype

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

And It's running in II6 Win 2k Server, and is being called in a php page. But looking at the source, it appears just as the w3schools page.

Any Ideas? Thanks.

lemmin · July 22, 2008

Could you show your code?

KevinM1 · July 22, 2008

Better yet, don't rely on W3Schools for your code. They teach the bare minimum, and certainly not the best practices. Use unobtrusive JavaScript to localize errors and group code together:

<script type="text/javascript">
window.onload = function()
{
   var field1 = document.getElementById("field1");
   var field2 = document.getElementById("field2");
   var myButton = document.getElementsByTagName("button")[0]; //assumes that the button you want is the first in the page

   myButton.onclick = function()
   {
      field2.value = field1.value;
   }
}
</script>

scottybwoy · July 24, 2008

Ok here's what I have so far

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<script type="text/javascript">

function presentData(field) {
var e = document.getElementById('numRows');
e.innerHTML = document.getElementById(field).value;
}

</script>
<body>

<select onchange="presentData(dbTbls);" id="dbTbls">
<option value="Hello World!">Hello World!</option>
<option value="Hello Universe!">Hello Universe!</option>
<option value="Hello Foo!">Hello Foo!</option>
<br />
<div id='numRows'></div>

</body>
</html>

It gives me the error, "null is not an object, line 7 char 2". Do I need any quotes or other syntax. I think everything is being passed correctly.

RichardRotterdam · July 24, 2008

what exactly are you trying to do?

and since this is just javascript your server doesnt have any effect on it what so ever only your browser could change the effect

scottybwoy · July 24, 2008

I want it to take the data from the select box and present it in the Div below.

I'm just trying to do the basis for an ajax call which will create another select menu of column fields based on a table that is selected.

I have already got a select menu elsewhere that get the tables but am just putting this basic demo up to solve my issues.

By the Way the error did come from Internet Explorer.

RichardRotterdam · July 24, 2008

something like this maybe?

<script>
	function presentData(value){
		document.getElementById('div_for_update').innerHTML=value;
	}
	</script>
	<select onchange ="presentData(this.value)">
		<option value="value 1 passed">1</option>
		<option value="value 2 passed">2</option>
		<option value="value 3 passed">3</option>
	</select>


	<div id="div_for_update">
	</div>

oh and the select element wasnt closed that might cause trouble in ie

KevinM1 · July 24, 2008

I'm betting that your problem is that the DOM isn't fully loaded when the code to define your function is executed. A good, general practice is to put all of one's JavaScript code within a window.onload callback function. That way, you're ensured that the entire DOM is available to you.

And, again, unobtrusive JavaScript is the way to go. Logically, it doesn't make sense for markup to know about the script(s) used on it, so why embed script code within the markup? There's no benefit to doing it that way, and several drawbacks.

So, try something like:

<script type="text/javascript">
   window.onload = function()
   {
      var numRows = document.getElementById("numRows");
      var dbTbls = document.getElementById("dbTbls");

      dbTbls.onchange = function()
      {
         numRows.innerHTML = this.value;
      }
   }
</script>

Simple, compact, and should work. And, of course, there's the added benefit of having no script embedded in the markup, so you could move this code to an external file and it would still work.

Psycho · July 24, 2008

Your original code had a few problems:

1. You had no closing select tag.

2. In the onchange event the id was passed as a variable (that had not been defined) and not as text. It would be easier to use the global 'this' variable:

Here's your original code with corrections:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<script type="text/javascript">

function presentData(field) {
document.getElementById('numRows').innerHTML = field.value;
}

</script>
<body>

<select onchange="presentData(this);" id="dbTbls">
<option value="Hello World!">Hello World!</option>
<option value="Hello Universe!">Hello Universe!</option>
<option value="Hello Foo!">Hello Foo!</option>
</select>

<br />
<div id='numRows'></div>

</body>
</html>

scottybwoy · July 25, 2008

Hi All,

Thanks for all your help and advice so far. I have been playing around and been doing a few more bits and pieces and was hoping to make it as unobtrusive and transportable as poss. As this is just a basic template for a bit of Ajax magic, I am not so sure if window.onload is the best way to go about it.

Here's a little bit extra to show you where I am :

<script type="text/javascript">

window.onload = function() {
var dbTbls = document.getElementById("dbTbls");
// var selects = document.getElementsByTagName('select');

dbTbls.onchange = function() {
  	var newDiv = document.createElement("div");
	newDiv.setAttribute("id", "numRows");

	var par = document.getElementById("par");
	par.appendChild(newDiv);

	document.getElementById("numRows").innerHTML = dbTbls.value;
}
}
</script>
<body>
<p id="par">
<select id="dbTbls">
<option value="Hello World!">Hello World!</option>
<option value="Hello Universe!">Hello Universe!</option>
<option value="Hello Foo!">Hello Foo!</option>
</select>
</p>

Now on my proper page, I will start of with one (php compiled) select menu. As the user selects certain data it will build more options for the user on the fly. I have this working with two so far, but would like to make the code more reusable.

As you can see I commented out "var selects = document.getElementsByTagName('select');" So you can see where I'm going. Then I thought I could make a for loop to get all the id's, and build a loop of function calls using those id's. But as they will be generated via ajax, I was wondering if this was possible and how I would go about it, and what would I need to change window.onload to? Sorry I've not really done much javascript, so am great full for your assistance.

scottybwoy · July 28, 2008

Bump, what I get with this is an "unknown runtime error" on line 16 "document..." Any ideas how to solve this?

Thanks.

KevinM1 · July 28, 2008

Window.onload shouldn't be a problem with AJAX. It's often used as the first step for most JavaScript, err, scripts because it ensures that the entire document is loaded before any attempts to manipulate (i.e., obtaining references to elements, adding new elements, etc) are made. So, it shouldn't effect your AJAX.

If speed's a concern, you could always use jQuery's ready function. It basically does the same thing as window.onload, but it checks for certain major things to load (like document.images) instead of waiting for the entire document to load.

I'm not sure why you want to make two loops. Are you adding entirely new <select> dropdowns? Or just new <option> elements inside of one of them?

Regarding your error, try replacing the last line with:

newDiv.innerHTML = dbTbls.value;

There may be an issue with JavaScript not being able to get a newly created element by getElementById (I'm not sure on this, so I'll do some tests myself). Thankfully, you still have the reference to the element you created in the newDiv variable, so you can access it directly from that, even though it's been attached to the document.

KevinM1 · July 28, 2008

Hmm...I'm not sure about your runtime error. I just did a quick test, and JavaScript CAN obtain a dynamically created element's id, so that probably isn't the issue. Have you looked at your code through Firefox, and/or Firebug? Their error messages tend to be helpful most of the time.

scottybwoy · July 28, 2008

Hi Nightslr

I have tried it in Firefox and it just works! I installed the firebug plugin and it doesn't come up with any errors!

However my issue is that this is for an intranet, where the users will all be using ie6 not firefox for it.

I'm not particularly after speed, but mainly convenience and to advance my skills. What I am doing is creating a custom query compiler for end users to form their own basic SQL Queries without having to learn the syntax. That way they can access any data they want, without needing me.

So far I have a select menu of tables, then that generates a a number of column select menu / select all. Once the user works out how many fields they want to return it will draw that many select menu's with the column names in. If I crack it I may post it here or give it to phpMyAdmin. Thanks for your help so far. I changed the line you said, but still returs the same error in Ie6.

lemmin · July 28, 2008

Try changing this line from:

document.getElementById("numRows").innerHTML = dbTbls.value;

to:

document.getElementById("numRows").innerHTML = this.value;

KevinM1 · July 28, 2008

Hmm...I'm not entirely sure why IE6 would be causing an error. And, of course, IE's error reporting tends to be less than helpful.

I read something about IE having an issue with variable names. So, with that said, here are two shot-in-the-dark ideas you can try:

1. fix the last line to be this:

newDiv.innerHTML = this.value;

2. rename your dbTbls variable as something else.

lemmin · July 28, 2008

It is because when you set an event to equal a function, the variables are all local to the scope of that function. dbTbls was created outside of that function and doesn't exist anywhere but there. The "this" reference is always going to refer to the element that the event was fired on.

KevinM1 · July 28, 2008

It is because when you set an event to equal a function, the variables are all local to the scope of that function. dbTbls was created outside of that function and doesn't exist anywhere but there. The "this" reference is always going to refer to the element that the event was fired on.

Ah, that's right. Damn functionally-scoped language... *grumblegrumble*

scottybwoy · July 29, 2008

Thanks for all your help.

I sussed it out. I was already using "dbTbls" instead of "this". My problem was that I was creating the div and putting it in the page before putting the content in. So I just changed the two lines around. Like so :

var par = document.getElementById("par");
newDiv.innerHTML = dbTbls.value;
par.appendChild(newDiv);

Could this be because of the speed, i.e. the div is not fully generated before the value can be assigned. Because on my other script with the ajax calls and php generation, it works the other way around?

Sign In

[SOLVED] w3Schools

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

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