CODEWITHSUNDEEP
javascript
alyelgarhy
alyelgarhy

Reputation: 51

Replace onclick

i want when click on phone code text it show the second hint span hint2 and when click on phone number text its show the first hint span is that possible to do with JavaScript only????

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Javascript Change Div InnerHTM</title>
    <link type="text/css" rel="stylesheet" href="pasha_css/hint.css"></link>
    <script type="text/javascript" src="pasha_js/hint.js"></script>
    <link href="pasha_css/main.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
    <div id="form-item7" class="form-profile">
    <label class="form-phone">Phone:</label>
    <input type="text"  name="Phone_code" value="03" class="form-text phonecode " onclick="this.value=''" onselect="this.value=''"></input>
    <input type="text"  name="phone" value="4567890"
        class="form-text phone" onclick="this.value='';" onselect="this.value=''"></input>
    <span id="hint1" class="hint">Use Text only please!
    <span class="hint-pointer">&nbsp;</span>
    </span>
    <span id="hint2" class="hint">enter code!
    <span class="hint-pointer">&nbsp;</span>
    </span>
        </div>
    </body>
    </html>

Upvotes: 1

Views: 375

Answers (1)

James Allardice
James Allardice

Reputation: 165941

If the hint span elements are hidden by default (using display:none) you can show them with document.getElementById('hintId').style.display = "inline".

You probably want to do this in the onfocus event of the text fields, otherwise it won't be fired when someone navigates to that field with their keyboard (e.g. using the tab key).

See this fiddle for an example.

Upvotes: 1

Related Questions