Replace onclick
<p>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????</p>

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