私のコードを確認してください。トリガーhtmlボタンをクリックして入力してください

Question

http://codepen.io/urketadic/pen/JKbddVに私のcodepenを確認してください 私はそれをクリックしてはいけないが、Enterを押しても、そのアニメーションを再生するボタンが必要です。 私は何をする必要がありますか？

 $(document).ready(function() { 
    var secondsPerMin = 60; 
    var minsPerHour = 60; 
    var hoursPerDay = 24; 
    var daysPerWeek = 7; 
    var weeksPerYear = 52; 
    var yearsAlive; 
    var secondsPerDay = secondsPerMin * minsPerHour * hoursPerDay; 

    function calculateSeconds(yearsAlive) { 
    $("#output").val("For "+ yearsAlive + " years you have lived " + secondsPerDay * daysPerWeek * weeksPerYear * yearsAlive + " seconds."); 
    } 

$("#inpute").on("keydown", function(e) { 
    if (e.keyCode == 13) { 
     e.preventDefault(); 
     var yearsAlive = $('#inpute').val(); 
    if (isNaN(yearsAlive)) { 
    $("#output").html("Your age must be a number."); 
    } 
    else { 
     calculateSeconds(yearsAlive); 
    } 
    } 
    }); 

    $("#buttoninput").on('click', function() { 
    var yearsAlive = $('#inpute').val(); 
    if (isNaN(yearsAlive)) { 
    $("#output").html("Your age must be a number."); 
    } 
    else{ 
    calculateSeconds(yearsAlive); 
    } 
    }); 
}); 

Answer 1

アプローチ以下を見てください：

$(document).ready(function() { 
 
    var secondsPerMin = 60; 
 
    var minsPerHour = 60; 
 
    var hoursPerDay = 24; 
 
    var daysPerWeek = 7; 
 
    var weeksPerYear = 52; 
 
    var yearsAlive; 
 
    var secondsPerDay = secondsPerMin * minsPerHour * hoursPerDay; 
 

 
    function calculateSeconds(yearsAlive) { 
 
    $("#output").val("For " + yearsAlive + " years you have lived " + secondsPerDay * daysPerWeek * weeksPerYear * yearsAlive + " seconds."); 
 
    } 
 

 
    $("#buttoninput").on('click', function() { 
 
    var yearsAlive = $('#inpute').val(); 
 
    if (isNaN(yearsAlive)) { 
 
     $("#output").html("Your age must be a number."); 
 
    } else { 
 
     calculateSeconds(yearsAlive); 
 
    } 
 
    }); 
 

 
    $("#inpute").on("keydown", function(e) { 
 
    if (e.keyCode == 13) { 
 
     e.preventDefault(); 
 
     $("#buttoninput").click(); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 

 
<div class="container"> 
 
    <div class="jumbotron"> 
 
    <div class="page-header"> 
 
     <h1 class="text-center animated bounceInDown">How old are you? <small>IN SECONDS.</small></h1> 
 
    </div> 
 

 

 
    <div class="input"> 
 
     <input type="text" id="inpute" class="col-xs-12 col-sm-6 col-md-8 animated bounceInLeft" placeholder="write age"> 
 
     <button type="submit" id="buttoninput" class="col-sm-4 btn btn-default btn-danger animated bounceInRight">Calculate</button> 
 
    </div> 
 

 
    <div class="output"> 
 
     <output id="output" placeholder="output" class="col-xs-12"> 
 
    </div> 
 

 
    </div>

Answer 2

宣言される前にyearsAlive変数を使用しようとしています。試してみてください：

$("#inpute").on("keydown", function(e) { 
    if (e.keyCode == 13) { 
    var yearsAlive = $('#inpute').val(); 
    calculateSeconds(yearsAlive); 
    e.preventDefault(); 
    } 
}); 

Answer 3

すると、そのようにそれを試してみてください。

$(document).ready(function() { 
    var secondsPerMin = 60; 
    var minsPerHour = 60; 
    var hoursPerDay = 24; 
    var daysPerWeek = 7; 
    var weeksPerYear = 52; 
    var yearsAlive; 
    var secondsPerDay = secondsPerMin * minsPerHour * hoursPerDay; 

    function calculateSeconds(yearsAlive) { 
    $("#output").val("For "+ yearsAlive + " years you have lived " +  secondsPerDay * daysPerWeek * weeksPerYear * yearsAlive + " seconds."); 
    }; 

    $("#buttoninput").on('click', function() { 
    var yearsAlive = $('#inpute').val(); 
    if (isNaN(yearsAlive)) { 
    $("#output").html("Your age must be a number."); 
    } 
    else{ 
    calculateSeconds(yearsAlive); 
    } 
    }); 


    $("#inpute").on("keydown", function(e) { 
    if (e.keyCode == 13) { 
     e.preventDefault(); 
     $("#buttoninput").click(); // just read you want the click behaviour.. 
    } 
    }); 
});