Basic stuff (window.location)

Page 1 of 1

2 Replies - 612 Views - Last Post: 09 May 2010 - 03:02 AM

#1 markovski  Icon User is offline

  • New D.I.C Head

Reputation: 5
  • View blog
  • Posts: 14
  • Joined: 07-May 10

Basic stuff (window.location)

Posted 08 May 2010 - 01:13 PM

I dont know whats the problem with the following code
Html:
<form>
<input type="button" value="Go Searching!" id="btn1" /><br /><br />
<input type="button" value="HTML Help" id="btn2" /><br /><br />
<input type="button" value="Javascripts" id="btn3" />
</form>

Javascript:
var  web_page1 = "http://www.yahoo.com";
var  web_page2 = "http://www.google.com";
var  web_page3 = "http://www.youtube.com";
var  b1 = document.getElementById("btn1");
var  b2 = document.getElementById("btn2");
var  b3 = document.getElementById("btn3");
b1.onclick = function() {
   window.location = web_page1;
};
b2.onclick = function() {
   window.location = web_page2;
};
b3.onclick = function() {
   window.location = web_page3;
};

As you noticed, when i click one of the buttons, i want the browser to redirect me to these sites.

This post has been edited by markovski: 08 May 2010 - 01:14 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Basic stuff (window.location)

#2 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 3873
  • View blog
  • Posts: 11,408
  • Joined: 18-April 07

Re: Basic stuff (window.location)

Posted 08 May 2010 - 05:24 PM

Remember that you can't use document.getElementById until AFTER the HTML element has been fully loaded. This means that you have to wait until the HTML document has loaded before you can reference its button elements. So how do we do that?

1) Well you can put the javascript at the end of the HTML page so that the HTML elements load before it reaches the javascript code. I don't recommend this method.
2) You can put the statements inside a function and call that function later after the page loaded like using the onload event of the body tag. This is a pretty nice solution.

Inside head tag...
<script type="text/javascript">
function setup() {
	var  web_page1 = "http://www.yahoo.com";
	var  web_page2 = "http://www.google.com";
	var  web_page3 = "http://www.youtube.com";
	var  b1 = document.getElementById("btn1");
	var  b2 = document.getElementById("btn2");
	var  b3 = document.getElementById("btn3");
	b1.onclick = function() {
	   window.location = web_page1;
	};
	b2.onclick = function() {
	   window.location = web_page2;
	};
	b3.onclick = function() {
	   window.location = web_page3;
	};
}
</script>


And then using the body tag...

<body onload="setup()">


Do it either way and the code should work as you would expect. Always keep in mind the timing of things. If you put your javascript at the top, it will be seen before any page elements have been fully loaded and thus cause problems. So make sure the document is loaded before you run the function.

:)

This post has been edited by Martyr2: 08 May 2010 - 05:25 PM

Was This Post Helpful? 1
  • +
  • -

#3 markovski  Icon User is offline

  • New D.I.C Head

Reputation: 5
  • View blog
  • Posts: 14
  • Joined: 07-May 10

Re: Basic stuff (window.location)

Posted 09 May 2010 - 03:02 AM

Now it works, thanks Martyr2.
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1