www.webdeveloper.com
Results 1 to 4 of 4

Thread: Hyper link in Div ID

  1. #1
    Join Date
    Feb 2014
    Posts
    14

    Hyper link in Div ID

    Hi,

    I have this code.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Color Quiz</title>
    <style>
    #answer{
    font-weight:bold;
    }
    .yes{
    color:green;
    }
    .no{
    color:red;
    }
    .exp1{
    border-style:solid;
    background-color:green;
    color:white;
    }

    .exp2{
    border-style:solid;
    background-color:red;
    color:white;
    }
    </style>

    <script>
    function color(el,ans,exp){
    if (el.value == "red"){
    ans.innerHTML = "Correct!";
    ans.className = "yes";
    exp.innerHTML = "because red is love !";
    exp.className = "exp1";

    }
    else if(el.value == "blue"){
    ans.innerHTML = "try again";
    ans.className = "no";
    exp.innerHTML = "blue is not the relevant color for you !";
    exp.className = "exp2";

    } else{
    ans.innerHTML = "try again";
    ans.className = "no";
    }
    }
    </script>

    </head>
    <body>
    <h3>what is your favorite color ?</h3>
    <form action="#">
    <input type="radio" name="colors" value="red" onclick="color(this,answer,exp)">Red<br>
    <input type="radio" name="colors" value="blue" onclick="color(this,answer,exp)">blue<br>
    <input type="radio" name="colors" value="green" onclick="color(this,answer,exp)">green<br>
    <input type="radio" name="colors" value="black" onclick="color(this,answer,exp)">black<br>
    </form>
    <div id="answer"><a href="http://www.webdeveloper.com"></a></div>
    <div id="exp"><a href="http://www.webdeveloper.com"></a></div>
    </body>
    </html>




    Once the id="answer" and id="exp" is display on screen, I want the text to be an hyperlink.
    As you can see, I tried to link it to "Web Developer" web site, but it is not work.
    Any ideas ?

  2. #2
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,204
    Please use forum tags to wrap code, it makes it easier to read.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  3. #3
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,667
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Color Quiz</title>
    <style>
    #answer{
    font-weight:bold;
    }
    .yes{
    color:green;
    }
    .no{
    color:red;
    }
    .exp1{
    border-style:solid;
    background-color:green;
    color:white;
    }
    
    .exp2{
    border-style:solid;
    background-color:red;
    color:white;
    }
    </style>
    
    <script>
    function color(el,ans,exp){
    var a1=ans.getElementsByTagName('A')[0],a2=exp.getElementsByTagName('A')[0];
    if (el.value == "red"){
    a1.innerHTML = "Correct!";
    ans.className = "yes";
    a2.innerHTML = "because red is love !";
    exp.className = "exp1";
    
    }
    else if(el.value == "blue"){
    a1.innerHTML = "try again";
    ans.className = "no";
    a2.innerHTML = "blue is not the relevant color for you !";
    exp.className = "exp2";
    
    } else{
    a1.innerHTML = "try again";
    ans.className = "no";
    }
    }
    </script>
    
    </head>
    <body>
    <h3>what is your favorite color ?</h3>
    <form action="#">
    <input type="radio" name="colors" value="red" onclick="color(this,answer,exp)">Red<br>
    <input type="radio" name="colors" value="blue" onclick="color(this,answer,exp)">blue<br>
    <input type="radio" name="colors" value="green" onclick="color(this,answer,exp)">green<br>
    <input type="radio" name="colors" value="black" onclick="color(this,answer,exp)">black<br>
    </form>
    <div id="answer"><a href="http://www.webdeveloper.com"></a></div>
    <div id="exp"><a href="http://www.webdeveloper.com"></a></div>
    </body>
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  4. #4
    Join Date
    Feb 2014
    Posts
    14
    Thanks a lot !

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles