jumping window on adding child elements

Question

i'm using javascript appendchild to add mor form element if its needed but i have problem when the num of element grow bigger than window size. it making window jumping to top and its annoying. i made the div hight big enough but it didnt work.

<div class="topnav" id="myTopnav">
  <a href="javascript:void(0);" style="font-size:15px;" class="icon active" onclick="myFunction()">&#9776;</a>

  <a href="#home" class="aactive">Home </a>
  <a href="#news">Edit</a>
  <a href="#about">Logout</a>
</div> 

<div class="frameHolder" id="frame1">
<fieldset class="frame">
<legend>information : </legend>
    <form action="#" method="post" id="contactform">
    <ul>
        <li class="liner">mobile :    </li>
        <li><input type="tel" name="mobiles[]" id="mobile0" class="txtfield" placeholder="09112345678" onBlur="mobilecheck('mobile0')"><a href="#" onClick="addfield('mobiles')"><font class="char">&#43;</font></a></li>
   <span class="error">A valid url is required</span>
       <li id="mobiles"> </li>      

        </ul>
        </form>
    </fieldset> 
</div>

the javascript part is

<script>
var mobileCounter=0;
function addfield(args){

    var x = document.createElement("li");
    y=document.createElement("input");
    document.getElementById(args).appendChild(x);
if(args == "mobiles"){
    mobileCounter++;
    var idcounter="mobile" + mobileCounter;

    x.innerHTML="<input type=\"text\" id=\""+idcounter+"\" onblur=\"mobilecheck('"+idcounter+"')\" class=\"txtfield\">";
}
}
</script>

css is

@font-face {
    font-family: iransans;
    font-style: normal;
    font-weight: normal;
    src: url("/fonts/IRANSansWeb_Bold.eot");
    src: url('/fonts/IRANSansWeb_Bold.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
    url('/fonts/IRANSansWeb_Bold.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
    url('/fonts/IRANSansWeb_Bold.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('fonts/IRANSansWeb_Bold.ttf') format('truetype');
}
a{
    text-decoration: none;
}

body {
    font-family: iransans;
    font-size: 12px;
  margin: 0;
  /*font-family: Arial, Helvetica, sans-serif;*/
}

.topnav {
  overflow: hidden;
  background-color: #E7FD00;
}

.topnav a {
  float: right;
  display: block;
  color: #020202;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 14px;
}

.topnav a:hover {
  background-color: #E00D00;
  color: black;
}

.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 400px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 400px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 1px;
      float: right;
    top: 0px;
  }
}
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: right;

  }

     .topnav.responsive .aactive {
      margin-top: 50px;
  }
    .frameHolder {
        margin: auto;
        margin-bottom: 40px;
        width: 300px;
        /*border: dotted #04F144;*/
    }

.frame{
    margin-top: 50px;
    border: solid #6F05E4;
    border-radius: 3%;
    padding:  20px 15px;
    direction: rtl;

}
li{
    display: block;
    text-decoration: none;
    /*border: solid #FF0C10;
    width: 200px;*/
    direction: rtl;
    text-align: right;
}

li .txtfield{
    width: 150px;

}
.char{
font-size: 24px;
    font-weight: bolder;
    color: #167C0A;
    margin-right: 5px;
}
.buffer{
    display: none;
    width: 1px;
    height: 0px;
    overflow: hidden;
}
.checkboxLabel{
    display: block;
    padding: 10px;
}
.button{
    padding: 5px 8px;
    margin-top: 12px;
    margin-left: 10px;
    border: solid 1px #14D14D;
    background-color: #F59F11;
    color:#090398;
    font-weight: bolder;

}
ul{
    margin-right: 25px;
    padding-right: 1px;
    width: 200px;
}

is this problem from appendchild method or its in css designing?. i do many search but no answer.

score 0 · Accepted Answer · answered Apr 16 '18 at 15:44

The jumping is caused by href="#" within your link:

<a href="#" onClick="addfield('mobiles')">…</a>

# is not a URL that does nothing – it is a URL fragment that links to the top of the page. This is an extension of the anchor link feature where specifying an id of an element, such as #footer, will scroll the page to the element with that id.

To prevent the link from scrolling the window when clicked, you have two options:

Change the href to javascript:void(0), a no-op JavaScript URL.
In your onclick handler addfield, take the click event as the argument and call preventDefault() on it to prevent the default scrolling behavior:
```
function addfield(event) {
    // your code to add the field
    event.preventDefault();
}
```

For help choosing between these options, see Which href value should I use for JavaScript links, # or javascript:void(0)?

jumping window on adding child elements

1 Answers1