当触发输入时快速执行并返回?

时间:2017-07-06 12:04:25

标签: javascript performance return execute enter

当我按下按钮时一切都很好但是当按下它时它会触发该功能并在我的浏览器上快速返回,在它的最后一个按钮中。按下输入时我尝试了几种触发按钮的方法,但我遇到了同样的问题



function calculate() {
          
         
      var response = document.getElementById("text").value;
    
    if (response ==0 || response =="" || response >100 || response < 0) {
        alert('you should write a 0<number<100');
       
        
    } else{
    
     var start = new Date();
     var date = start.getFullYear();
        

    
   var result = date - response;
   
    x.innerHTML = 'Your Birth is '+ result;
    document.getElementById('ma').style.color = 'lightpink';   
    document.getElementById('ma').style.fontFamily = 'sans-serif';
    document.getElementById('ma').style.fontSize = "45px";
      
 
        
    } ;
    


  
  

};

var x= document.getElementById('ma');
document.getElementById("button").onclick = function(){calculate();};


      
   
&#13;
body {
    outline: none;
}
h1 {
     font-family: fresca;
    outline: none;
    font-size: 35px;
    color:cornflowerblue;
    
}
form {
    margin-top: 20em;
   outline: none;
}

#text{
    width: 35em;
    height: 3em;
    padding-left: 20px;
    border-radius: 5px;
    outline: none;
    
}
#text:focus {
    background: lightblue;
}
#button{
    width: 80;
    height: 3em;
    text-align: center;
    border-radius: 10px;
    border-style: none;
    background: lightblue;
outline: none;
}

#button:hover {
    background: lightgreen;
    
}
&#13;
<html>

<head>
<link rel="stylesheet" type="text/css" href="css.css">
<link href="https://fonts.googleapis.com/css?family=Fresca" rel="stylesheet">
</head>




<body>
    <center>
    
    <form>
        <input type="text" placeholder="Your Age" id="text" onkeypress="Javascript: if (event.keyCode==13) calculate();" >
        <input type="button" id="button" value="Calculate">
    </form>
        <h1 id="ma" >Manaf</h1>
     
   </center> 
   
    
<script src="script.js";></script>
    
<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
</body>
</html>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:-1)

         
<h1 id="ma" >Manaf</h1>

你好,因为你正在用一个表格包装,这就是为什么它的触发器输入