www.webdeveloper.com
Results 1 to 4 of 4

Thread: getElementById javascript help needed

  1. #1
    Join Date
    Mar 2006
    Posts
    35

    getElementById javascript help needed

    I'm looking for a Javascript that makes the following: I have a list of questions with three answers each. I would like to have the following behaviour: on rollover the correct answer should change to green color. Somebody can gives me a good hint?

    Example:

    Question 1: how much is 2+3?
    a) the correct answer is 6
    b) the correct answer is 5 On rollover over the question "b) the correct answer is 5" should change to green
    c) the correct answer is 4

    Thank you

  2. #2
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,460
    Hi there paldo,

    there is no need to use javascript.

    Try it like this...
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title></title>
    
    <style type="text/css">
    .correct:hover { 
        color:#008000;
        cursor:pointer;
     }
    </style>
    
    </head>
    <body>
    
    <h4>Question 1: how much is 2+3?</h4>
    
    <p>a) the correct answer is 6</p>
    <p class="correct">b) the correct answer is 5</p>
    <p>c) the correct answer is 4</p>
    
    </body>
    </html>
    
    coothead

  3. #3
    Join Date
    Mar 2006
    Posts
    35
    Dear Coothead, simple as that ? Thank you so much, it is less complicated that javascript.

    But is it possible with CSS to hover with the pointer over the question and get the answer in green?

  4. #4
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,460
    Hi there paldo,

    no problem...
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title></title>
    
    <style type="text/css">
    h4 {
        cursor:pointer;
     }
    #q1:hover~.correct { 
        color:#008000;
     }
    #q2:hover~.correct { 
        color:#008000;
     }
    </style>
    
    </head>
    <body>
    
    <div>
    <h4 id="q1">Question 1: how much is 2+3?</h4>
    
    <p>a) the correct answer is 6</p>
    <p class="correct">b) the correct answer is 5</p>
    <p>c) the correct answer is 4</p>
    
    </div>
    
    <div>
    
    <h4 id="q2">Question 2: how much is 2x3?</h4>
    
    <p class="correct">a) the correct answer is 6</p>
    <p>b) the correct answer is 5</p>
    <p>c) the correct answer is 4</p>
    
    </div>
    
    </body>
    </html>
    
    coothead
    Last edited by coothead; 11-19-2012 at 05:21 AM. Reason: forgot to section the questions

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