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

[Alan Dayley]

Good point!

OK, plowing ahead I see that the value is changed when actually
setting the value based on the return.  (smack my head.)

However, the clock size does not change.  Must be a refresh or redraw
thing.  Researching that angle now...

Alan


On Thu, Sep 10, 2009 at 3:20 PM, Micah DesJardins <micahdj at gmail.com> wrote:
> 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
>>
> _______________________________________________
> PLUG-devel mailing list  -  PLUG-devel at lists.PLUG.phoenix.az.us
> http://lists.PLUG.phoenix.az.us/mailman/listinfo/plug-devel
>