Question

我对编程非常陌生并遇到一些问题。我想创建一个表单（在html和javascript中），我可以在那里做一些计算。这是关于数字和年份。所以起初我需要输入输入字段，我可以输入年份（如2013）。此输入值将连接到多个功能：

计算当前年份的差异（如果我要求2018年它应该写5，或者如果我要求2000 iz应该写-13等等......）
检查年份是否为闰年（真/假或是/否，......）
计算我要求的数字之和（2018 = 11,2013 = 6，...）
如果数字是素数（真/假，是/否，......）
反向编号（2013 = 3102,2018 = 8102，...）
显示年度十二生肖
将年份转换为罗马数字（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

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 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

我将使用输入参数定义独立于表单的函数。然后，您只需将该参数传递给每个函数，并根据需要显示结果。

<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 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));
}

javascript一个输入字段连接到几个函数

5 个答案: