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

Discussion in 'Javascript' started by Byron, Mar 2, 2005.

  1. Byron

    Byron Guest

    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.
     
    Byron, Mar 2, 2005
    #1
    1. Advertising

  2. Byron

    Mick White Guest

    Byron wrote:

    > 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 -- -->
    >
    >

    [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
     
    Mick White, Mar 2, 2005
    #2
    1. Advertising

  3. Byron

    Mick White Guest

    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?"<":">";
    > }


    Typo:

    document.getElementById("elementIDHere").innerHMTL=num==2?"<":">";
    Mick

    >
    > <A href="#" onclick="changeArrow(2);... ">
    > Mick
    >
    >
    >
    >
     
    Mick White, Mar 2, 2005
    #3
  4. Byron

    RobG Guest

    Byron wrote:
    > 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>


    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>
    >


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

    <td id="td01">&laquo;</td>

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


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

    <td id="td02">&nbsp;</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>
    >


    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>


    --
    Rob
     
    RobG, Mar 2, 2005
    #4
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Vikas Gholap
    Replies:
    2
    Views:
    293
    Brian Candler
    Jan 22, 2009
  2. bob
    Replies:
    3
    Views:
    212
  3. KS
    Replies:
    8
    Views:
    221
  4. TeknoShock
    Replies:
    1
    Views:
    174
  5. apparker
    Replies:
    10
    Views:
    385
    apparker
    Apr 3, 2007
Loading...

Share This Page