SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Wizard lorenw's Avatar
    Join Date
    Feb 2005
    Location
    was rainy Oregon now sunny Florida
    Posts
    1,099
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    just decided to learn js but need some pointers

    Hi, I really need to learn some js or I will forever be frustrated and asking stupid questions .

    I began with the tutorial here which is super basic.
    http://gwydir.demon.co.uk/jo/javascript/if.htm

    Using what I know about php I came up with this.

    Code:
    <SCRIPT TYPE="TEXT/JAVASCRIPT">
    function change(form,count,color) { 
    //alert(form);
    //alert(count);
    //alert(color);
       if (count>5){
    	   str = "FF0000"
    	   } 
       else{
    	  str = "0000FF"
    	  } 
    //color.innerHTML="<FONT COLOR='#" + str + "'>*** Hello World! ***<" + "/FONT>"
      
    document.getElementById('color').innerHTML="<FONT COLOR='#" + str + "'>*** Hello World! ***<" + "/FONT>" 
    } 
    </SCRIPT>
    
    <FORM ACTION="#" NAME="myForm1">
    <SELECT NAME="count" ONCHANGE="change(document.myForm1,document.myForm1.count,getElementById('fontcol1'))">
    <OPTION VALUE="1">1</OPTION>
    <OPTION VALUE="12">12</OPTION>
    <OPTION VALUE="5">5</OPTION>
    </SELECT>
    </FORM>
    <SPAN id="fontcol1">
    <FONT COLOR="#FF0000">*** Hello World! ***</FONT>
    </SPAN>
    What I think is happening is that getElementById('color') in the function is looking for the id color and not the var color that is passed to the function.

    Much to my amazement something is working, if span has a name (id="fontcol1"), and I call the function with just "fontcol1" without the getElementById.

    The color.innerHTML in the function does change the text to blue but unfortunatly will not change back to red.

    My question is, what do I change to make getElementById('color') look for var color instead of a literal. I tried double quotes which works in php.

    My first JavaScript I'm trying.

    Cheers
    Loren
    What I lack in acuracy I make up for in misteaks

  2. #2
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok. I recommend just starting over somewhere else. I looked at that site and I can hardly decipher what is going on. If you're into books, I would recommend Jeremy's DOM Scripting. If you want a good online introduction to the language, Simon Willison wrote a good piece called a Re-Introduction to JavaScript.

    But really, it's not that I don't want to help with what you're learning from the site, but there's real bogus stuff going on with that site.

  3. #3
    SitePoint Wizard lorenw's Avatar
    Join Date
    Feb 2005
    Location
    was rainy Oregon now sunny Florida
    Posts
    1,099
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I am looking at the Re-Introduction to JavaScript but I have not been formally introduced yet. That is way over my head.

    I looked at that site and I can hardly decipher what is going on.
    Ack! It was the one that I seemed to understand by looking at the code lol.

    The only way I learned php was to get the most simple script and start playing with it. Stuff like fopen, fputs, fwrite, unlink etc . . .

    At the time php.net was confusing untill I had the hands on and saw how things worked. I did nearly everything the wrong way at first. Now I have a pretty good grasp and try to do things the right way.

    As far as I know this is the wrong way to do things.
    Code:
    document.myForm1,document.myForm1.count
    All form elements should have a unique id and call them by id and not by name. At this point I am happy with it and will change it as I learn.

    I really appreciate the help and if you know of a good (very simple and basic)example of passing form variables to a function and have the submitted variables make changes to the page, doesnt even have to be close to what I am doing in my above script. This may sound lame but this is the furthes I have ever gotten with JS.

    Thanks and I need real baby steps to understand this.
    What I lack in acuracy I make up for in misteaks

  4. #4
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Loren,
    I'm starting a new thread called DOM Scripting Basics for purposes just like this. Have a look

  5. #5
    SitePoint Wizard lorenw's Avatar
    Join Date
    Feb 2005
    Location
    was rainy Oregon now sunny Florida
    Posts
    1,099
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Awesome, Im reading it but getting late here, will post back tomorrow after digesting this.

    Google Engineer! I could only dream. Sure glad we have you on these forums.

    Cheers and thanks.
    What I lack in acuracy I make up for in misteaks

  6. #6
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'll be adding more as time permits. I think it will be a good asset to the Sitepoint JavaScript forum. And indeed, Google is treating me quite well

  7. #7
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    excuse me, can i get the correct answer of lorenw 1st question ??


  8. #8
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    From what it seems, loren's original intention was set out to learn JavaScript. and quite frankly, I'm not even sure I fully understood the question :\

  9. #9
    rajug.replace('Raju Gautam'); bronze trophy Raju Gautam's Avatar
    Join Date
    Oct 2006
    Location
    Kathmandu, Nepal
    Posts
    4,013
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok try out like this using JS DOM:
    Code javascript:
    function changeColor(count){ 
    	var spn = document.getElementById('fontcol1');
    	if (count>5)
    		spn.style.color = '#FF0000';
    	else
    		spn.style.color = '#0000FF';
    }
    HTML Code:
    <form action="#" name="myForm1">
        <select name="count" onChange="changeColor(this.value)">
            <option value="1">1</option>
            <option value="12">12</option>
            <option value="5">5</option>
        </select>
    </form>
    <span id="fontcol1" style="color:#FF0000;">Hello World!</span>
    Mistakes are proof that you are trying.....
    ------------------------------------------------------------------------
    PSD to HTML - SlicingArt.com | Personal Blog | ZCE - PHP 5

  10. #10
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah. ok. in that case. You'll need to change the onchange event if you want the appropriate value when it changes: Change this line:
    Code:
    <select name="count" onChange="changeColor(this.value)">
    to this:
    Code:
    <select name="count" onChange="changeColor(this.options[this.options.selectedIndex].value)">

  11. #11
    rajug.replace('Raju Gautam'); bronze trophy Raju Gautam's Avatar
    Join Date
    Oct 2006
    Location
    Kathmandu, Nepal
    Posts
    4,013
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by polvero View Post
    Code:
    <select name="count" onChange="changeColor(this.options[this.options.selectedIndex].value)">
    If this.value returns the current selected value of the selected index why you use that much long one?
    Mistakes are proof that you are trying.....
    ------------------------------------------------------------------------
    PSD to HTML - SlicingArt.com | Personal Blog | ZCE - PHP 5

  12. #12
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow. How funny. As long as I can remember, I've been doing it the other way. There must be some bug associated with it at some point in time but was fixed without being documented. Nearly every example you'll find online you'll see it written the other way.
    why you use that much long one?
    Exactly, I wouldn't.

  13. #13
    SitePoint Wizard lorenw's Avatar
    Join Date
    Feb 2005
    Location
    was rainy Oregon now sunny Florida
    Posts
    1,099
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    this.value works great.

    this is my situation.

    1) php dynmically builds 150 forms

    2) all required elements need to be passed to the function. Ie... <span id="1" , 2, 3 etc..

    here is where I'm stuck.
    Code:
    ONCHANGE="change(this.value,getElementById('fontcol1'))"
    The second argument gets pased to the function as "color".

    Code:
    alert(color);
    The alert displays [object] so color is defined at this point.

    Btw is there a fuction like php's print_r() to see what is in an object?

    This changes the span color
    Code:
      document.getElementById('fontcol1').innerHTML="<FONT COLOR='#" + str + "'>*** Hello World! ***<" + "/FONT>";
    According to everything I have read this also should change the span color.
    Code:
      document.getElementById(color).innerHTML="<FONT COLOR='#" + str + "'>*** Hello World! ***<" + "/FONT>";
    Except it gets the error, document.getElementById is null or not an object.

    My question for now is, how do you get a variable into getElementById()?

    Thanks for the answers. Now I am seeing the different ways to do things and JS is starting to make some sense. This is what I needed to see.

    Edit:


    After doing some reading and googling, "color" is an object (array) and not a variable. Need to read polvero's DOM basics page.

    I just figured it out (after mind numbing hours).
    This was so simple and I was trying to make it way complicated.

    Change(this.value,'fontcol1')

    Now it's off to play with innerHTML
    Last edited by lorenw; Dec 4, 2007 at 12:08.
    What I lack in acuracy I make up for in misteaks


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •