[PLUG-Devel] Javascript variable value into class parameter?

[Micah DesJardins]

Alan,

You are modifying the string, but you're not assigning it to anything:
document.getElementById("theclock").className.replace(/:\d+/,":"+clocksize);
may well be working.
But you probably need to do something like:
document.getElementByID("theclock").className =
document.getElementById("theclock").className.replace(/:\d+/,":"+clocksize);
to actually get it to change the className property on that DOM element.

If you're looking at your debug code, try :
document.write(document.getElementById("theclock").className.replace(/:\d+/,":"+clocksize));

That should display the string with the wanted replacement


Otherwise, you're doing the string manipulation, but not saving a
reference to it anywhere, as the original variable is unchanged by the
replace method and the return from the replace method isn't being
stored anywhere.

Good luck!

Micah

On Thu, Sep 10, 2009 at 2:52 PM, Alan Dayley<alandd at consultpros.com> wrote:
> Thanks for the thoughts, Mitch.  Your suggestion does not yet work.
>
> As a debug step I added some prints to the process and discovered that
> I can get the class string value by using .className instead of
> .class.  As:
>
>        document.write (document.getElementById("theclock").className);
>
> will print
>
>        CoolClock:chunkySwissOnBlack:250
>
> on the web page.
>
> Using
>
>        document.write (document.getElementById("theclock").class);
>
> gets
>
>        undefined
>
> printed on the page.
>
> The test code:
>
>        document.write ("size="+clocksize);
>        document.write (document.getElementById("theclock").className);
>        document.getElementById("theclock").className.replace(/:\d+/,":"+clocksize);
>        document.write (document.getElementById("theclock").className);
>
> prints
>
>        size=812CoolClock:chunkySwissOnBlack:250CoolClock:chunkySwissOnBlack:250
>
> and the clock size does not change.
>
> Time to ask the original author, I suppose.
>
> Alan
>
>
> On Thu, Sep 10, 2009 at 1:36 PM, Mitch Frazier <mitch at linuxjournal.com> wrote:
>> I'm not JavaScript expert, but try something like:
>>
>>  var newval = 300;
>>  ...
>>  document.getElementById("theclock").class.replace(/:\d+/,":"+newval);
>>
>>
>> That's an interesting way to invoke the clock:
>>
>>  ... class="CoolClock:chunkySwissOnBlack:250" ...
>>
>>
>>
>>
>>
>> Alan Dayley wrote:
>>> I, embedded developer and Scrum Master, am attempting to write
>>> javascript.  Yes, the danger of error is high.  However, your web
>>> pages are safe since this is a page for a specific and internal-only
>>> use.
>>>
>>> I am creating a page to have an official clock for the engineering
>>> team.  Seems our meetings tend start a minute or two late.  The
>>> discussion always leads to something like "Does anyone really know
>>> what time it is?"  So I want to create the canonical answer to this
>>> question!
>>>
>>> I'm starting with this really cool "Cool Clock"
>>> http://randomibis.com/coolclock/.  By slapping it on a page, it's good
>>> enough.  Except, I want the clock to fill the screen of Firefox in
>>> full screen mode.  Being a good programmer (just not with javascript)
>>> I want to solve the problem forever by making the page smart enough to
>>> resize the clock for the page it's on.
>>>
>>> The "class" parameter(?) has an argument to set the clock radius to a
>>> specified number of pixels.  I have javascript that gets the current
>>> browser window size and determines what the radius should be.  This
>>> radius value is stored in a javascript variable "clocksize."
>>>
>>> Now my problem:  How do I get the value of this variable into the
>>> "class" statement of the following line?
>>>
>>> <canvas id="theclock" class="CoolClock:chunkySwissOnBlack:250"></canvas>
>>>
>>> I want the 250 in the above to be replaced by the value of the
>>> "clocksize" variable.  Google searches give me all kinds of options
>>> like "document.write" and so on but I need to get the value into the
>>> string after the "class=" part of the canvas tag.
>>>
>>> Any tips or solutions from this group?
>>>
>>> Alan
>>> _______________________________________________
>>> PLUG-devel mailing list  -  PLUG-devel at lists.PLUG.phoenix.az.us
>>> http://lists.PLUG.phoenix.az.us/mailman/listinfo/plug-devel
>>>
>>
>>
>> --
>> Mitch Frazier
>> Associate Editor/Web Editor, Linux Journal
>> http://www.linuxjournal.com
>>
>> _______________________________________________
>> PLUG-devel mailing list  -  PLUG-devel at lists.PLUG.phoenix.az.us
>> http://lists.PLUG.phoenix.az.us/mailman/listinfo/plug-devel
>>
> _______________________________________________
> PLUG-devel mailing list  -  PLUG-devel at lists.PLUG.phoenix.az.us
> http://lists.PLUG.phoenix.az.us/mailman/listinfo/plug-devel
>