javascript一個輸入字段連接到幾個函數

Question

我對編程非常陌生，並且有一些問題。 我想創建一個表單（在html和javascript中），我可以在這裏做一些計算。這是關於數字和年份。所以起初我需要把輸入字段，我可以鍵入年份（如2013）。這個輸入值將被連接到幾個函數：

1. 計算與當年的差異（如果我要求2018年它應該寫5，或者如果我要求2000年，我會寫-13等......）
2. 檢查，如果今年是閏年（真/假或是/否，...）
3. 計算我問數的總和（2018 = 11，2013 = 6，...）
4. 如果數字是素數（真/假，是/否，...）
5. 反向數字（2013 = 3102,2018 = 8102，...）
6. 顯示今年中國十二生肖
7. 轉換年羅馬數字（1 = I，2 = II，10 = X，...）

我也找到了一些功能，可我就是」把它放在一起，這將工作。 如果有人可以幫忙，我會非常有幫助。

的例子，我發現互聯網上：

function isleap() { 
    var yr = document.getElementById("year").value; 
    if ((parseInt(yr) % 4) == 0) { 
     if (parseInt(yr) % 100 == 0) { 
      if (parseInt(yr) % 400 != 0) { 
       alert("Not Leap"); 
       return "false"; 
      } 
      if (parseInt(yr) % 400 == 0) { 
       alert("Leap"); 
       return "true"; 
      } 
     } 
     if (parseInt(yr) % 100 != 0) { 
      alert("Leap"); 
      return "true"; 
     } 
    } 
    if ((parseInt(yr) % 4) != 0) { 
     alert("Not Leap"); 
     return "false"; 
    } 
} 

反向：

<script type="text/javascript"> 
    var year, b = 0; 
    year= parseInt(prompt("Enter year: ")); 

    document.write("You've entered: " + year+ "<br />"); 
    while(year> 0) {   
     b = b * 10 
     b = b + parseInt(year% 10) 
     year= parseInt(year/ 10) 
    } 
    document.write("Reverse numbers: ", b); 

</script> 

總和號：

<script> 
function find() { 
    var sum = 0; 
    var no = parseInt(frm.txt1.value); 
    while (no > 0) { 
     sum = sum + no % 10; 
     no = Math.floor(no/10); 
    } 
    alert("Sum of digits " + sum); 
} 
</script> 

<form name="frm"> 
    Enter a Number:<input name="txt1" type="text" /> 
    <input name="b1" onClick="find();" type="button" value="display" /> 
</form> 

Answer 1

我會定義獨立於輸入參數形式的函數。然後，只需將該參數傳遞給每個函數並根據需要顯示結果。

<script type="text/javascript"> 
function isLeap(yr) { 
    if ((parseInt(yr) % 4) == 0) { 
     if (parseInt(yr) % 100 == 0) { 
      if (parseInt(yr) % 400 != 0) { 
       return "false"; 
      } 
      if (parseInt(yr) % 400 == 0) { 
       return "true"; 
      } 
     } 
     if (parseInt(yr) % 100 != 0) { 
      return "true"; 
     } 
    } 
    if ((parseInt(yr) % 4) != 0) { 
     return "false"; 
    } 
} 

function reverse(year) { 
    var b = 0; 
    year = parseInt(year); 
    while (year > 0) { 
     b = b * 10 
     b = b + parseInt(year % 10) 
     year = parseInt(year/10) 
    } 
    return b; 
} 

function sum(no) { 
    var sum = 0; 
    while (no > 0) { 
     sum = sum + no % 10; 
     no = Math.floor(no/10); 
    } 
    return sum; 
} 

function outputData() { 
    var year = form.year.value; 
    alert("Is leap: " + isLeap(year)); 
    alert("Reversed: " + reverse(year)); 
    alert("Sum: " + sum(year)); 
} 
</script> 

<form name="form"> 
    Enter a Number:<input name="year" type="text" /> 
    <input name="b1" onClick="outputData();" type="button" value="display" /> 
</form> 

Answer 2

<input name="b1" onClick="function1(),function2()" type="button" value="display" /> 

    you can call like this 

    or 
    <input name="b1" onClick="callAllFunctions();" type="button" value="display" /> 

function callAllFunctions(){ 
    function1(); 
    function2(); 
} 

Answer 3

您可以只創建一個函數來調用每個其他功能，然後設置爲表單的onclick函數。

function processData(){ 
    function1(); 
    function2(); 
    function3(); 

} 

<input name="b1" onClick="processData();" type="button" value="display" /> 

分離該不同的功能與像PSR逗號提示也適用要求，但我認爲這個結果是更好，因爲它使標記比較乾淨，並允許您更改腳本邏輯需要，而不必直接編輯標記或根據需要繼續添加功能。如果需要，您也可以直接將一個功能的結果傳遞給另一個功能。

Answer 4

它被認爲是最佳實踐separate concerns，我使用jQuery作爲我DOM抽象庫 - 它真的很容易。

有了這樣的輸入：

<input id="b1" name="b1" type="button" value="display" />

您可以使用jQuery on method這樣的：

$('#b1').on('click', function (event) { alert('I was clicked'); });

$('#b1').on('click', function (event) { alert('I heard that click too'); });

你可以調用任何功能：

$('#b1').on('click', isLeap);

只是不要忘了，包括在這個片段在頁面上的jQuery：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Answer 5

這樣的事情。這是唯一的例子...

<input type="text" name="year" id="year" value="" /> 
<input type="button" name="process" value="processYear" id="proc" onclick="process()"/> 


<script> 
function isLeap(val) 
{ 
    if (val % 4 ==0 && ((val % 100 ==0 && val % 400 ==0) || (val % 100 !=0))) 
    { 
     console.log("Leap..."); 
     return true; 
    } 
    else 
    { 
     console.log("Not Leep..."); 
     return false; 
    } 
} 

function _revers(val) 
{ 
    _val = val+""; 
    return _val.split("").reverse().join(""); 
} 

function sum(val) 
{ 
    _val = val+""; 
    return _val.split("").reduce(function(previousValue, currentValue){ 
       return currentValue + parseInt(previousValue); 
      }) 
} 

function diff(val) 
{ 
    return (new Date()).getFullYear() - val; 
} 

function process() 
{ 
    val = parseInt(document.getElementById("year").value)|0; 
    isLeap(val); 
    console.log('reverse:', _revers(val)); 
    console.log('sum:', sum(val)); 
    console.log('diff:', diff(val)); 
}