Can you change the value of a variable with an OnClick?

B

Byron

Hi,

Javascript confuses me, so I usually limit myself to Dreamweaver's
built-in scripts for stuff like imageswaps. But this time I'm trying to
write something very simple myself. I do most of my stuff in ASP and PHP
so I'm familiar with server-side programming; for some reason JavaScript
syntax trips me up.

I want to assign a value to a variable according to an onclick event,
and then run an if...then on the variable, and according to the value
write some text to the page.

Here's my (relevant) code:

<!-- -- start -- -->

<head>
<SCRIPT type="text/Javascript">
var sketcharrow = 1;
</SCRIPT>
</head>

<!-- -- snip -- -->

<td><SCRIPT type="text/Javascript">
if (sketcharrow == 1) {
document.write("&laquo;");
}
</SCRIPT>
</td>

<td><SCRIPT type="text/Javascript">
if (sketcharrow == 2) {
document.write("&raquo;");
}
</SCRIPT>
</td>

<!-- -- snip -- -->

<A href="#" onClick="sketcharrow = 2;MM_swapImage
('logo','','/sketches/mixmatch/20050301.EQ.jpg',1);MM_setTextOfLayer
('logoinfo','','<h1>Logo: Spoke Equality</h1>')">Spoke Equality</A>

<!-- -- end -- -->



The page loads fine, with the text for the conditional sketcharrow == 1
writing as planned. But when I click on the link to change sketcharrow
== 2 the if...thens don't get the new value to work with, although the
other two onClick events execute perfectly.

I am a total novice with Javascript, so any illumination would be
greatly appreciated. Can anyone help? Is what I'm trying even possible?
Thanks.
 
M

Mick White

Byron said:
Hi,

Javascript confuses me, so I usually limit myself to Dreamweaver's
built-in scripts for stuff like imageswaps. But this time I'm trying to
write something very simple myself. I do most of my stuff in ASP and PHP
so I'm familiar with server-side programming; for some reason JavaScript
syntax trips me up.

I want to assign a value to a variable according to an onclick event,
and then run an if...then on the variable, and according to the value
write some text to the page.

Here's my (relevant) code:

<!-- -- start -- -->

<head>
<SCRIPT type="text/Javascript">
var sketcharrow = 1;
</SCRIPT>
</head>

<!-- -- snip -- -->

<td><SCRIPT type="text/Javascript">
if (sketcharrow == 1) {
document.write("&laquo;");
}
</SCRIPT>
</td>

<td><SCRIPT type="text/Javascript">
if (sketcharrow == 2) {
document.write("&raquo;");
}
</SCRIPT>
</td>

<!-- -- snip -- -->

<A href="#" onClick="sketcharrow = 2;MM_swapImage
('logo','','/sketches/mixmatch/20050301.EQ.jpg',1);MM_setTextOfLayer
('logoinfo','','<h1>Logo: Spoke Equality</h1>')">Spoke Equality</A>

<!-- -- end -- -->
Click to expand...
[snip]


You're right, this approach is flawed (calling document.write() after
the page is loaded).

A simple function may suffice
function changeArrow(num){
document.getElementById.innerHMTL=num==2?"<":">";
}

<A href="#" onclick="changeArrow(2);... ">
Mick
 
M

Mick White

Mick White wrote:
[snip]
You're right, this approach is flawed (calling document.write() after
the page is loaded).

A simple function may suffice
function changeArrow(num){
document.getElementById.innerHMTL=num==2?"<":">";
}
Click to expand...

Typo:
 
R

RobG

Byron said:
Hi,

Javascript confuses me, so I usually limit myself to Dreamweaver's
built-in scripts for stuff like imageswaps. But this time I'm trying to
write something very simple myself. I do most of my stuff in ASP and PHP
so I'm familiar with server-side programming; for some reason JavaScript
syntax trips me up.

I want to assign a value to a variable according to an onclick event,
and then run an if...then on the variable, and according to the value
write some text to the page.

Here's my (relevant) code:

<!-- -- start -- -->

<head>
<SCRIPT type="text/Javascript">
var sketcharrow = 1;
</SCRIPT>
</head>
Click to expand...

You create a global variable here but I don't think it's needed.
<!-- -- snip -- -->

<td><SCRIPT type="text/Javascript">
if (sketcharrow == 1) {
document.write("&laquo;");
}
</SCRIPT>
</td>
Click to expand...

Since the initial value of sketcharrow is 1, why not just put
"&laquo;" in as HTML? That is effectively all this script does.

<td><SCRIPT type="text/Javascript">
if (sketcharrow == 2) {
document.write("&raquo;");
}
</SCRIPT>
</td>
Click to expand...

Same here, just set the content to "&nbsp;" and forget the
script.

<!-- -- snip -- -->

<A href="#" onClick="sketcharrow = 2;MM_swapImage
('logo','','/sketches/mixmatch/20050301.EQ.jpg',1);MM_setTextOfLayer
('logoinfo','','<h1>Logo: Spoke Equality</h1>')">Spoke Equality</A>
Click to expand...

Simply changing the value of sketcharrow will not cause anything
to happen unless you have created some event to monitor the
value and change things if sketcharrow changes... but I think
such an approach is not necessary here.

Using href="#" will cause most browsers to scroll to the top of
the page if you don't cancel the navigation - the final
statement of the in the onclick event should be "return false;".

To make the content of the td's change, you have to actually
write new content to them. Give them an ID, then use
getElementById or similar, then change their content.

Better code layout will really help too. Sample code below, I
make no guarantees on the MM_ functions but changeArrow works in
Firefox and IE. I have modified the function so you pass
element IDs and the content to put in them as pairs, e.g.

changeArrow('td01','&nbsp;','td02','&raquo;');

will change the content of 'td01' to '&nbsp;' and 'td02' to
'&raquo;'. You can pass as many id/content pairs as you like,
as long as they match.


<script type="text/javascript">
function changeArrow(a,b) {

// Make allowances for old IE (courtesy Dr J Stockton)
if (document.all && !document.getElementById) {
document.getElementById = function(id) {
return document.all[id]
}
}

// Go through all the arguments, change elements as we go
var x;
for (var i=0, aLen=arguments.length; i<aLen; i++) {
if (x = document.getElementById(arguments)){
x.innerHTML = arguments[++i];
}
}
}
</script>

<table><tr>
<td id="td01">&laquo;</td>
<td id="td02">&nbsp;</td>
</tr></table>

<A href="#" onClick="
changeArrow('td01','&nbsp;','td02','&raquo;');
MM_swapImage('logo','',
'/sketches/mixmatch/20050301.EQ.jpg',1);
MM_setTextOfLayer('logoinfo','',
'<h1>Logo: Spoke Equality</h1>');
return false;
">Spoke Equality</A>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
How to treat an input data as variable? 4
Only one table shows up with the information 2
Checking dynamically populated data using ajax with user entered value 5
Image shifts to the right when export the page to pdf 4
Help with my responsive home page 2
Reversing output of user input by using while loop... 2

Members online

Total: 42 (members: 1, guests: 41)
Robots: 204

Forum statistics

Threads
473,766
Messages
2,569,569
Members
45,043
Latest member
CannalabsCBDReview

Latest Threads

Top