SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    problem with radio button changing background color

    <HTML>
    <Head>
    <Script Language=JavaScript>

    function change_it()
    {
    var a=document.forms["myForm"]["colorc"].getInputValue

    if(a="blue")
    {
    document.body.style.background=a
    return false;
    }
    else if(a="red")
    {
    document.body.style.background=a
    return false;
    }

    else if(a="yellow")
    {
    document.body.style.background=a
    return false;
    }
    }

    </Script>
    </Head>
    <body>
    <form name="myForm">
    <input type="radio" name="colorc" value="blue">blue <br>
    <input type="radio" name="colorc" value="red">red <br>
    <input type="radio" name="colorc" value="yellow">yellow <br/> <br />

    <input type="button" value="changecolor" name="ChangeColor" onClick="return change_it()"> <br /> <br />
    </form>
    </body>
    </html>

    problem:"it only change background color into blue"
    Last edited by strikefist; Apr 4, 2011 at 17:48. Reason: new

  2. #2
    SitePoint Evangelist
    Join Date
    Jul 2001
    Location
    UK
    Posts
    407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're using assignment (=) instead of comparison (==) in the if statements.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You'll need to correct those comparison operators as obliq says. Your getInputValue function was not included. However, the following works:


    Code:
    <!DOCTYPE HTML>
    <head>
    <title>Test</title>
    <script type="text/javascript">
    function getInputValue() {
      var radioObj = document.forms["myForm"]["colorc"];
      for (var i=0; i<radioObj.length; i++) {
        if (radioObj[i].checked)
          return radioObj[i].value;
      }
      alert("No radio button was selected.")
    }
    
    function change_it() {
      var a = getInputValue();
      if(a=="blue") {
        document.body.style.background=a
        return false;
      } else if(a=="red") {
        document.body.style.background=a
        return false;
      } else if(a=="yellow") {
        document.body.style.background=a
        return false;
      }
    }
    </script>
    </head>
    <body>
    <form name="myForm">
      <input type="radio" name="colorc" value="blue">blue <br>
      <input type="radio" name="colorc" value="red">red <br>
      <input type="radio" name="colorc" value="yellow">yellow <br/> <br />
      <input type="button" value="changecolor" name="ChangeColor" onclick="return change_it()"> 
    </form>
    </body>
    </html>

  4. #4
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Whoops! Just noticed that change_it() function is way too long. Should be just this:

    Code:
    function change_it() {
      document.body.style.background = getInputValue();
    }


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
  •