/    Sign up×
Community /Pin to ProfileBookmark

Beginning Javascript question

Copy linkTweet thisAlerts:
Feb 21.2010

Hi all,
I am starting to learn javascript and I had a quick question. I know actionscript and java, so this my mistake here is probably context…but I cant seem to figure it out. I’m trying to figure out how to create a conditional statement based on what button a user clicks. Here’s my code:

[SIZE=”4″]HTML[/SIZE]
<h2>What is 1+1?</h2>
<input type=”button” value=”4″ onClick=”answer()”>
<input type=”button” value=”7″ onClick=”answer()”>
<input type=”button” value=”2″ onClick=”answer()”>
<input type=”button” value=”1″ onClick=”answer()”>

[SIZE=”4″]Javascript[/SIZE]
<script type=”text/javascript”>
function answer()
{
if(this.value=”2″)
{
alert(“Correct!”);
}
else
{
alert(“Incorrect!”);
}

}

</script>

This doesn’t seem to work. Am I referencing this.value incorrectly? If so, what’s the proper way to get information about what the user clicked?

Thanks so much in advance,
Ben

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@ahurttFeb 21.2010 — A couple minor things I see. First: if(this.value="2")...you've got the assignment operator here '=' when what you actually probably want is the equality test operator '=='

Second is that you should change the signature of your answer() function to accept an argument like so: function answer(buttonObj) {//...method body here...}

Then you should call the function like this from your onClick event:

<input type="button" value="2" onClick="answer(this)">

Then change your test condition from: if(this.value="2") to: if (buttonObj.value == "2")

Voila, should work.
Copy linkTweet thisAlerts:
@WrithumauthorFeb 21.2010 — Beautiful, thanks much!
Copy linkTweet thisAlerts:
@WrithumauthorFeb 21.2010 — That ended up working quite well, thanks for the explination.

Quick other question: I'm curious as to how to manipulate specific objects/ids using javascript. For example, if I wanted to write to a specific ID or block element how would I do so?

Also, say I wanted to, for example, disable a form. What would the javascript code for that be...how would I reference the form I want to manipulate?

Thanks so much!

Ben
Copy linkTweet thisAlerts:
@ahurttFeb 22.2010 — Well navigating objects in the document with javascript can be either very easy or extraordinarily confusing depending on how used to more type-safe and rigid languages you are used to. There is often more than one way to get at the same thing using different syntax. The easiest way typically is to use an elements id attribute value to locate it using the document.getElementById() method. However this may not always be the most efficient way, especially in documents containing deep, complex, or large document object models where you will be using it often. But in general it should work most of the time assuming the object you are after does indeed have an id attribute. The ways of getting at various objects in a document with javascript are manifold which is both a blessing for the adept and a curse/nightmare for the novice.

As for disabling an entire form I don't think you can just "disable" an entire form in one fell swoop. I think you'd have to get a reference to the form object and then loop through all it's inputs setting the disabled property of each input. Here's a very rudimentary example I whipped up.

[code=html]
<html>
<head>
<script type="text/javascript">
<!-- Insert code from below in here -->
</script>
</head>

<body onload="dothing()">
<form id="formid">
<input type="text" name="input1" id="id1" value="testval1"><br />
<input type="text" name="input2" id="id2" value="testval2"><br />
<input type="text" name="input3" id="id3" value="testval3"><br />
<input type="submit">
</form>
</body>
</html>
[/code]

[CODE]
/*Insert the following code into the head of the above html document.*/
function dothing() {
/*Search the DOM for the object with the ID you're after.*/
var aFormObjA = document.getElementById("formid");

/*Go directly after the form object you know you want from the documents forms collection.*/
var aFormObjB = document.forms.formid;

/*Both aFormObjA and aFormObjB above should be referencing the same form object in the DOM.
Just showing two different ways to get at the same object.*/

/*Show aFormObjA and aFormObjB are referencing the same object by displaying the value of text input with id "id1"
Should see the same value, 'testval1' pop up twice.*/
alert (aFormObjA.id1.value);
alert (aFormObjB.id1.value);

var aFormObjAElements = aFormObjA.elements;
alert (aFormObjAElements.length);
for (var i = 0; i < aFormObjAElements.length; ++i) {
aFormObjAElements[i].disabled = true;
}
}
[/CODE]
×

Success!

Help @Writhum spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...