向表单添加 Javascript 函数答案

【问题标题】：Adding Javascript functions to forms向表单添加 Javascript 函数
【发布时间】：2018-02-25 19:01:23
【问题描述】：

我正在学校学习 JavaScript，并且有一些家庭作业实验室。我创建了一些表单，我希望按下按钮时可以完成一些事情，我只在前几个按钮上寻求帮助，因为我只需要示例以便我可以处理更难的是我自己。这是我需要的前几个按钮：

JavaScript 函数hello( ) 获取输入到相应文本框中的姓名和出生年份，并输出字符串“Hello [name] you werebirth in [year]”。该字符串将在段落元素内输出。
从 Hello 按钮调用 hello( ) 函数。
JavaScript 函数calcAge( ) 从文本框中获取出生年份，并计算人的年龄。通过从当前年份中减去出生年份来计算年龄。然后输出字符串“You are [age] years old”。该字符串将在段落元素内输出。
从计算年龄按钮调用calcAge( ) 函数。

提前感谢您的帮助。我正在上一门独立学习课程，过得很艰难。这是我的表单 html。

<html>
    <head>
        <title>Forms Page</title>  
        <style>

            form {
                width: 500px; margin: 0px auto;
                border:1px solid khaki; background-color: antiquewhite;
                border-collapse:collapse; padding: 10px; margin-bottom: 20px;
            }
            form h2 { margin: 0; }
            input {
                margin:5px;
            }
        </style>
    </head>
    <body>

        <h1>Practice Manipulating Forms #1</h1>    

        <form id='calcForm'>
            <h2>Calc Form</h2>
            <span>Name:</span>
            <input type='text' name='name' id='name' ><br>
            <span>Year of Birth:</span>
            <input type='text' name='yob' id='yob' ><br>

            <input type='button' name='btnCalc' id='btnHello' value='Hello' >
            <input type='button' name='btnCalc' id='btnCalc' value='Calc Age' >    

            <p id='pForm'></p>
        </form>

        <form id='listForm'>
            <h2>List Form</h2>

            <span>Item:</span>
            <input type='text' name='item' id='item' ><br>

            <input type='button' name='btnAdd' id='btnAdd' value='Add to List' >
            <input type='button' name='btnClear' id='btnClear' value='Clear List' >
            <input type='button' name='btnShow' id='btnShow' value='Show List' >  

            <p id='pList'></p>
        </form>

    </body>
</html>

【问题讨论】：

欢迎来到 StackOverflow！这些都是非常简单的任务——到目前为止你有没有尝试过？ StackOverflow 期待您try to solve your own problem first。请先自己尝试，然后更新您的问题以显示您已经尝试过的内容，并在minimal, complete, and verifiable example 中展示您面临的特定问题。这样你就可以为更难的部分做好准备。欲了解更多信息，请拨打tour of the site。
您好，我尝试在几个网站上查找它，但它没有为我点击。感觉更像是一个谜题，我得到了一些我需要的信息，但不一定知道如何将它们组合在一起。在得到 Ivo 的帮助后，我能够将它添加进去，看看它应该是什么样子，我现在可以处理剩下的了。

标签： javascript html forms function

【解决方案1】：

为相应的按钮添加一个onclick属性来触发该功能。

onclick="hello()"
onclick="calcAge()"

然后是脚本：

function hello(){
  var name = document.getElementById("name").value;
  document.getElementById("pForm").innerHTML = "Hello "+name;
}
function calcAge(){
  var yob = document.getElementById("yob").value;
  var date = new Date();
  var year = date.getFullYear();
  var age = year - yob;
  var alreadyOutput = document.getElementById("pForm").innerHTML;
  document.getElementById("pForm").innerHTML = alreadyOutput+" and you are "+age;
}

请使用缩进，我强烈推荐https://www.w3schools.com/jsref/，因为你似乎不知道任何 js。

【讨论】：

感谢您的建议，对于格式不正确，我深表歉意。