为表单添加JavaScript函数：实现hello()函数功能求助

很乐意为你提供这个作业的示例代码，直接看下面的完整实现，你就能明白怎么操作啦：

HTML 结构 #

首先我们需要搭建表单的基础结构，包含姓名输入框、出生年份输入框，还有触发函数的按钮：

<!-- 姓名输入框 -->
<label for="nameInput">姓名：</label>
<input type="text" id="nameInput" placeholder="请输入你的姓名">

<!-- 出生年份输入框 -->
<label for="yearInput">出生年份：</label>
<input type="number" id="yearInput" placeholder="请输入你的出生年份">

<!-- 触发函数的按钮 -->
<button onclick="hello()">点击打招呼</button>

<!-- 用来显示结果的区域（可选，也可以用alert弹窗） -->
<div id="result"></div>

JavaScript 函数实现 #

接下来写hello()函数，完成获取输入值、拼接字符串并输出的逻辑：

function hello() {
  // 通过ID获取输入框元素，提取用户输入的值
  const userName = document.getElementById('nameInput').value;
  const birthYear = document.getElementById('yearInput').value;

  // 简单判断输入是否为空（可选，提升用户体验）
  if (!userName || !birthYear) {
    alert('请填写完整的姓名和出生年份哦！');
    return;
  }

  // 拼接要求的字符串
  const greeting = `Hello ${userName} you were born in ${birthYear}`;

  // 两种输出方式选一种就行：
  // 方式1：弹窗显示
  alert(greeting);
  // 方式2：显示在页面的result区域
  document.getElementById('result').textContent = greeting;
}

关键步骤解释 #

• 用document.getElementById()获取页面上的输入元素，通过.value属性拿到用户输入的内容；
• 用模板字符串（反引号`包裹）来拼接字符串，比传统的+拼接更直观；
• 额外加了简单的输入校验，避免用户空点按钮，你也可以根据作业要求去掉这部分；
• 提供了两种输出方式：弹窗或者页面内显示，你可以根据需求选择。

这样你运行这段代码，填写姓名和年份后点击按钮，就能得到你想要的结果啦，剩下的按钮功能可以照着这个逻辑来写～

内容的提问来源于stack exchange，提问作者Kitty