HTML DOM Anchor username Property

HTMLWeb DevelopmentFront End Technology

<p>The HTML DOM anchor username property associated with anchor tag is used to set or return the value of the username part of the href attribute. The username is entered by the user and is often used in username-password pair. The username value is specified after the protocol and just before the password part of the link.</p><h2>Syntax</h2><p>Following is the syntax for &minus;</p><p>Returning the username property &minus;</p><pre class="result notranslate">anchorObject.username</pre><p>Setting the username property &minus;</p><pre class="result notranslate">anchorObject.username = UsernameValue</pre><h2>Example</h2><p>Let us see an example of anchor username property &minus;</p><p><a class="demo" href="http://tpcg.io/eF4qcl" rel="nofollow" target="_blank">&nbsp;Live Demo</a></p><pre class="prettyprint notranslate">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;body&gt; &lt;p&gt;&lt;a id=&quot;Anchor&quot;href=&quot;https://john:john123@www.examplesite.com&quot;&gt;ExampleSite&lt;/a&gt;&lt;/p&gt; &lt;p&gt;Click the button to change username&lt;/p&gt; &lt;button onclick=&quot;changeUser()&quot;&gt;Set User&lt;/button&gt; &lt;button onclick=&quot;GetUser()&quot;&gt;Get User&lt;/button&gt; &lt;p id=&quot;Sample&quot;&gt;&lt;/p&gt; &lt;script&gt; &nbsp; &nbsp;function changeUser() { &nbsp; &nbsp; &nbsp; document.getElementById(&quot;Anchor&quot;).username = &quot;Rohan&quot;; &nbsp; &nbsp;} &nbsp; &nbsp;function GetUser() { &nbsp; &nbsp; &nbsp; var x=document.getElementById(&quot;Anchor&quot;).username; &nbsp; &nbsp; &nbsp; document.getElementById(&quot;Sample&quot;).innerHTML = x; &nbsp; &nbsp;} &lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</pre><h2>Output</h2><p>It will produce the following output &minus;</p><p><img src="https://www.tutorialspoint.com/assets/questions/media/26307/anchor_username.jpg" class="fr-fic fr-dib" style="width:594px; height:205px;" width="594" height="205"></p><p>On clicking &ldquo;Set User&rdquo; &minus;</p><p><img src="https://www.tutorialspoint.com/assets/questions/media/26307/anchor_username1.jpg" class="fr-fic fr-dib" style="width:600px; height:211px;" width="600" height="211"></p><p>On clicking &ldquo;Get User&rdquo; &minus;</p><p><img src="https://www.tutorialspoint.com/assets/questions/media/26307/anchor_username2.jpg" class="fr-fic fr-dib" style="width:600px; height:211px;" width="600" height="211"></p><p>In the above example &minus;</p><p>We have taken a link with username as john and password john123.</p><pre class="result notranslate">&lt;p&gt;&lt;a id=&quot;Anchor&quot; href=&quot;https://john:john123@www.examplesite.com&quot;&gt;ExampleSite&lt;/a&gt;&lt;/p&gt;</pre><p>We have then two buttons &ldquo;Set User&rdquo; and &ldquo;Get User&rdquo; to execute functions changeUser() and GetUser() respectively.</p><pre class="result notranslate">&lt;button onclick=&quot;changeUser()&quot;&gt;Set User&lt;/button&gt; &lt;button onclick=&quot;GetUser()&quot;&gt;Get User&lt;/button&gt;</pre><p>The changeUser() function changes the username specified in the link to the username specified by us; &rdquo;Rohan&rdquo; in our case. The GetUser() function gets the username from the link with id Anchor associated with it and returns &ldquo;Rohan&rdquo; only if changeUser() is called before GetUser().Otherwise it will be &ldquo;john&rdquo;.</p><pre class="result notranslate">function changeUser() { &nbsp; &nbsp;document.getElementById(&quot;Anchor&quot;).username = &quot;Rohan&quot;; } function GetUser() { &nbsp; &nbsp;var x=document.getElementById(&quot;Anchor&quot;).username; &nbsp; &nbsp;document.getElementById(&quot;Sample&quot;).innerHTML = x; }</pre>
raja
Updated on 20-Feb-2021 06:30:37

Advertisements