dcsimg
www.webdeveloper.com
Results 1 to 4 of 4

Thread: Hyper link in Div ID

  1. #1
    Join Date
    Feb 2014
    Posts
    16

    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,589
    Please use forum tags to wrap code, it makes it easier to read.
    If your post falls off the page, bump it. ...
    Please remember to wrap any code you have in forum tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  3. #3
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,693
    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
    16
    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