Javascript Button Problem

Question

Siberian 13 Junior Poster

14 Years Ago

I'm having problems getting this button to work here is the HTML

<head>
<script type="text/javascript" src="Objects.js"></script>
  <title></title>
</head>

<body>

<form>
<input type="button" value="Go Searching!" id="work_car" />

</form>

</body>

</html>

And here is the JavaScript:

function car(seats,engine,theradio) {
this.seats=seats;
this.engine=engine;
this.theradio=theradio;
}
var work_car=new car ("cloth","V8","Tape Deck");

b1.onclick=work_car(){
document.write=("I want a car with +work_car.seats+ yeah");
};

var b1 = document.getElementById("work_car");

I want the button to display sentence by getting the name +work_car.seats+ from the Object, and it's not working.

javascript

4 Contributors
24 Replies
224 Views
2 Weeks Discussion Span
Latest Post 14 Years Ago Latest Post by Airshow

hielo 65 Veteran Poster

14 Years Ago

you have to use the getElementById() AFTER the page has finished loading. Try:

function car(seats,engine,theradio) {
this.seats=seats;
this.engine=engine;
this.theradio=theradio;
}

var work_car=new car ("cloth","V8","Tape Deck");
var b1=null;

window.onload=function(){
	b1 = document.getElementById("work_car");
	b1.onclick=function(){
		alert("I want a car with " + work_car.seats + " yeah");
		
		//if you put <div id="message"></div> in your document,
		//instead of the alert you  can use
		//document.getElementById("message").innerHTML="I want a car with " + work_car.seats + " yeah"
	};
};

hielo 65 Veteran Poster

14 Years Ago

I noticed you removed "window.alert" as I'm still learning I suppose you don't need the entire syntax window.alert ?

Correct. The "built-in" functions "belong" to the (global) window object, so you don't need to prefix it. Other examples: window.prompt(...), window.confirm(...). You can simply "drop" the window prefix.

Also the alert should read "I want a car with cloth seats" how come the word seats is not being called ? Did I miss something ?

You tell me. It works fine for me

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>hielo</title>
<head>
<script type="text/javascript">
var b1=null;
function car(seats,engine,theradio) {
this.seats=seats;
this.engine=engine;
this.theradio=theradio;
}

var work_car=new car ("cloth","V8","Tape Deck");


window.onload=function(){
	b1 = document.getElementById("work_car");
	b1.onclick=function(){
		alert("I want a car with " + work_car.seats + " yeah");
		
		//if you put <div id="message"></div> in your document,
		//instead of the alert you  can use
		//document.getElementById("message").innerHTML="I want a car with " + work_car.seats + " yeah"
	};
};

</script>
  <title></title>
</head>

<body>

<form>
<input type="button" value="Go Searching!" id="work_car" />

</form>

</body>

</html>

Why did you put the null in there ?

I have a habit of initializing all variables.

hielo 65 Veteran Poster

14 Years Ago

Heilo you have the Javascript embedded into the HTML.

The name is Hielo.

Which browser are you using?

hielo 65 Veteran Poster

14 Years Ago

Hielo you have the Javascript embedded into the HTML...I'm calling an external JS file

It shouldn't make a difference, but just to humor you I tried the html code you posted and the exact js (except I added the two closing braces at the end of your onload function and it works fine. Here's my complete Objects.js file:

function car(seats,engine,theradio) {
this.seats=seats;
this.engine=engine;
this.theradio=theradio;
}

var work_car=new car ("cloth","V8","Tape Deck");
var b1=null;

window.onload=function(){
	b1 = document.getElementById("work_car");
	b1.onclick=function(){
		alert("I want a car with " + work_car.seats + " yeah");
	};
};

Airshow 416 WiFi Lounge Lizard

14 Years Ago

Siberian,

First, put your brain in gear.

Then edit the following line to add the missing word:

alert("I want a car with " + work_car.seats + " yeah");

Airshow

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

fatihpiristine · Answer 1 · 2010-09-02T03:40:51+00:00

b1.onclick=function(){ ... } wont work on firefox

Siberian 13 Junior Poster · Answer 2 · 2010-09-02T06:22:42+00:00

Hielo - I noticed you removed "window.alert" as I'm still learning I suppose you don't need the entire syntax window.alert ?

Also the alert should read "I want a car with cloth seats" how come the word seats is not being called ? Did I miss something ? Why did you put the null in there ?

Siberian 13 Junior Poster · Answer 3 · 2010-09-03T03:47:57+00:00

Heilo you have the Javascript embedded into the HTML. This is my HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<script type="text/javascript" src="Objects.js"></script>
  <title></title>
</head>

<body>

<form><input type="button" value="Go Searching!" id="work_car" />
</form>

</body>

</html>

I'm calling an external JS file, and it should read

I want a car with cloth seats. Work_car.seats how come the word "seat" is not in the write command ?

function car(seats,engine,theradio) {
this.seats=seats;
this.engine=engine;
this.theradio=theradio;
}

var work_car=new car ("cloth","V8","Tape Deck");
var b1=null;

window.onload=function(){
	b1 = document.getElementById("work_car");
	b1.onclick=function(){
		alert("I want a car with " + work_car.seats + " yeah");

Siberian 13 Junior Poster · Answer 4 · 2010-09-04T02:20:04+00:00

Siberian 13 Junior Poster

14 Years Ago

FireFox.

Siberian 13 Junior Poster · Answer 5 · 2010-09-11T09:16:52+00:00

Oh I see, I want it to say

"I want a car with cloth seats yeah"

There is nothing in the function to call that :)

Siberian 13 Junior Poster · Answer 6 · 2010-09-11T09:17:25+00:00

Oh I see, I want it to say

"I want a car with cloth seats yeah"

There is nothing in the function to call that :)

function car(seats,engine,theradio,seats) {
this.seats=seats;
this.engine=engine;
this.theradio=theradio;
this.sitting=sitting;
}

var work_car=new car ("cloth","V8","Tape Deck","seats");

How do I add the word seats in the instance "new car" for the write command as stated in previous messages?

Siberian 13 Junior Poster · Answer 7 · 2010-09-11T17:49:47+00:00

I'm going to have to overview some reference material. Currently the button doesn't trigger no alert, so I have to check how to fix that line :)

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 8 · 2010-09-11T22:02:08+00:00

Sib,

Hielo's code is cool. Go back and see what he did.

Airshow

Siberian 13 Junior Poster · Answer 9 · 2010-09-11T22:49:25+00:00

The code works, the problem is I'm trying to figure out how to add "seats" in the alert command :)

function car(seats,engine,theradio,seats) {
this.seats=seats;
this.engine=engine;
this.theradio=theradio;
this.sitting=sitting;
}

var work_car=new car ("cloth","V8","Tape Deck","seats");
var b1=null;

window.onload=function(){
	b1 = document.getElementById("work_car");
	b1.onclick=function(){
		alert("I want a car with " + work_car.seats+"yeah");
	};
};

I placed a object called sitting in the function then in the instance added "seats". Now I want to add "seats" to the alert.

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 10 · 2010-09-11T22:57:34+00:00

Sib,

Forget about sitting. Delete it.

If you want the word "seats" in your message then add it to the line that generates the alert (line 14).

Add seats before the word yeah , inside the double-quotes.

Airshow

Siberian 13 Junior Poster · Answer 11 · 2010-09-11T23:36:48+00:00

That works, but I'm forgetting something there no space between cloth and seats. HEre is the code.

b1.onclick=function(){
		alert("I want a car with " + work_car.seats+ "seats yeah");

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 12 · 2010-09-11T23:50:02+00:00

Sib, if you want a space then add a space where you want it.

The message is yours to format exacctly the way you want it. You don't need anybody's permission to try out ideas.

Look at what is displayed then look at the code and work out what needs to be changed. That's the process - we call it "programming".

Airshow

Siberian 13 Junior Poster · Answer 13 · 2010-09-12T00:29:11+00:00

I added a space and it won't reflect in the alert.

hielo 65 Veteran Poster · Answer 14 · 2010-09-12T00:50:30+00:00

the space needs to go immediately to the left of the "s" in "seats": alert("I want a car with " + work_car.seats + " seats yeah");

hielo 65 Veteran Poster · Answer 15 · 2010-09-12T00:51:12+00:00

the space needs to go immediately to the left of the "s" in "seats": alert("I want a car with " + work_car.seats + " seats yeah");

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 16 · 2010-09-12T01:04:37+00:00

Airshow 416 WiFi Lounge Lizard

14 Years Ago

Hi Hielo, you're back. Whew!

Airshow

hielo 65 Veteran Poster · Answer 17 · 2010-09-12T01:11:50+00:00

Hello to you too Airshow. I've been very busy lately, so I've been mostly off lately.

Siberian 13 Junior Poster · Answer 18 · 2010-09-12T02:55:34+00:00

Siberian 13 Junior Poster

14 Years Ago

Bingo :) I knew it was something small. :)

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 19 · 2010-09-12T03:48:31+00:00

Airshow 416 WiFi Lounge Lizard

14 Years Ago

Cool. The world can breath again.