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

javascript one input field connect to several functions

本文关键字：几个 函数 连接 输入 一个 Javascript 字段      更新时间：2023-09-26

我是一个编程新手，遇到了一些问题。我想创建一个形式(在html和javascript)，在那里我可以做一些计算。这是关于数字和年份的。所以首先我需要输入字段，在这里我可以输入年份(比如2013)。这个输入值将连接到几个函数:

  1. 计算与当前年份的差异(如果我要求2018年，它应该写5，或者如果我要求2000年，它应该写-13等等…)
  2. 检查年份是否为闰年(true/false或yes/no，…)
  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>

分隔关注点被认为是最佳实践，我使用jQuery作为DOM抽象库-这真的很容易。

输入如下:

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

你可以像这样使用jQuery的on方法:

$('#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>

我将使用输入参数定义与表单无关的函数。然后，您只需将该参数传递给每个函数，并按您希望的方式显示结果。

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

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

您可以创建一个函数来调用其他函数，然后将其设置为表单的onclick函数。

function processData(){
    function1();
    function2();
    function3();
}
<input name="b1" onClick="processData();" type="button" value="display" />

像PSR建议的那样用逗号分隔不同的函数调用也可以工作，但我认为这个结果更好，因为它使标记相对干净，并且允许您根据需要更改脚本中的逻辑，而无需直接编辑标记或根据需要不断添加函数。如果需要，还可以将一个函数的结果直接传递给另一个函数。

就像这样。这只是一个例子……

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

相关文章：