Question

I put an A tag on my page , and when the user clicks on it, the page will have a new input field to write in information, like this:

HTML code

<a href="" class="smallLink" onclick="return ioAddNewContent()">new info</a>

I don’t want to add hash to the url after clicking “new info” so I make the javascript return null, like this:

javascript code

    function ioAddNewContent(){
    var bigLi = document.getElementById('ioAddContents');
    var p = document.createElement('p');
    var label=document.createElement('label');
    var input = document.createElement('input');
    var a = document.createElement('a');
    label.setAttribute('class', 'ioAddOneContent');
    label.innerHTML='write one info';
    input.setAttribute('type', 'text');
    input.setAttribute('class', 'longInput');
    a.setAttribute('href', '');
    a.setAttribute('class', 'smallLink');
    a.setAttribute('onclick', 'return ioAddNewContent()');
    a.innerHTML=' new info';
    p.appendChild(label);
    p.appendChild(input);
    p.appendChild(a);
    bigLi.appendChild(p);
    return false;
}

after clicking the “new info” 10 times the user have to scroll down to see the new input field , i don’t want that , i want with every click of the “new info” the screen should go to that new input field ,

i know i can do that by adding A tag with a name = “here ” on the html code and then put `window.location(“#here”)` on the javascript code but i want to do that dynamic

when user click to add the new input field , the screen should automaticly scroll to that new input field

Answer 1

Use .focus() and .last()

$('a.smallLink').last().focus();

This is part of the jQuery set, not sure if you are using a library.