目录😋
介绍
营销号，有时候需要一些特定的欢迎语，但针对特定的用户，我们希望可以个性化一点。本题需要在项目文件中修改代码存在的问题，实现根据模版生成特定用户的欢迎语。
准备
本题已经内置了初始代码，打开实验环境，目录结构如下：
├── css │ ├── bootstrap.min.css │ └── style.css ├── js │ ├── bootstrap.bundle.min.js │ └── index.js └── index.html
其中：
css/style.css是页面样式文件。css/bootstrap.min.css和js/bootstrap.bundle.min.js是 Bootstrap 相关文件。js/index.js是页面功能实现的逻辑代码。index.html是页面布局。选中
index.html右键启动 Web Server 服务（Open with Live Server），让项目运行起来。打开环境右侧的【Web 服务】，就可以在浏览器中看到如下错误显示，当前显示没有正确获取到输入的用户、课程、平台的输入框内容。
目标
请修复
index.js文件中存在的 bug，修复完成后，在表单的对应输入框中输入以下内容：
编辑
页面效果如下所示：
编辑
规定
- 请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径等。
- 满足题目需求后，保持 Web 服务处于可以正常访问状态，点击「提交检测」系统会自动判分。
通关代码✔️
//index.js function generate() { subject = document.getElementById("subject").value; event1 = document.getElementById("event1").value; event2 = document.getElementById("event2").value; if (subject ==="" || event1 ==="" || event2 ===""){ return; } let result = `欢迎用户${subject}在${event2}学习${event1}课程！`; document.getElementById("result").value = result; }
代码解析📑
1. HTML 部分
<html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="./css/style.css" /> <script src="./js/index.js"></script> <link rel="stylesheet" href="./css/bootstrap.min.css" /> <script src="./js/bootstrap.bundle.min.js"></script> </head> <body onload="onload()"> <div class="container"> <h1>营销号生成器</h1> <div class="row"> <div class="col-5"> <form action="javascript:void(0);" autocomplete="off"> <div class="form-group"> <lable for="subject">用户：</lable> <input type="text" id="subject" class="form-control" placeholder="小蓝" required /> </div> <div class="form-group"> <lable for="event1">课程：</lable> <input type="text" id="event1" class="form-control" placeholder="Python" required /> </div> <div class="form-group"> <lable for="event2">平台：</lable> <input type="text" id="event2" class="form-control" placeholder="蓝桥云课" required /> </div> <div class="form-group"> <input type="submit" value="生成" class="btn btn-primary" onclick="generate()" /> </div> </form> </div> <div class="col-7" style="margin-top: 35px"> <textarea id="result" rows="8" placeholder="欢迎用户小蓝在蓝桥云课学习Python课程！" ></textarea> </div> </div> </div> </body> </html>
解释：
<!DOCTYPE html>声明该文档是一个 HTML5 文档。<html lang="en">表示该 HTML 文档使用的语言是英语。<head>部分包含了文档的元数据和资源引用：
<meta charset="UTF-8">设定字符编码为 UTF-8，确保页面能正确显示各种字符。<meta name="viewport" content="width=device-width, initial-scale=1.0">使页面在不同设备上具有良好的响应式布局，初始缩放比例为 1。<title>Document</title>定义页面的标题。<link rel="stylesheet" href="./css/style.css">引入自定义的 CSS 文件，用于自定义页面样式。<script src="./js/index.js"></script>引入自定义的 JavaScript 文件，用于实现页面逻辑。<link rel="stylesheet" href="./css/bootstrap.min.css">引入 Bootstrap 的 CSS 文件，方便使用 Bootstrap 的样式类。<script src="./js/bootstrap.bundle.min.js"></script>引入 Bootstrap 的 JavaScript 捆绑文件，包含了 Bootstrap 的各种组件和交互功能。
<body onload="onload()">：在页面加载完成时调用onload函数（不过在提供的代码中未看到onload函数的具体实现）。<div class="container">是一个 Bootstrap 提供的容器类，用于将内容包裹在一个固定宽度的容器中。<h1>营销号生成器</h1>显示页面的主标题。<div class="row">是 Bootstrap 的行类，用于创建行。<div class="col-5">和<div class="col-7">是 Bootstrap 的列类，将页面分为两列，宽度分别为 5/12 和 7/12。<form action="javascript:void(0);" autocomplete="off">：
action="javascript:void(0);"防止表单提交时刷新页面，因为使用 JavaScript 函数来处理表单提交。autocomplete="off"关闭输入框的自动完成功能。
<div class="form-group">是 Bootstrap 的表单组类，用于将表单元素分组。<lable for="subject">用户：</lable>为输入框提供一个标签，for属性与输入框的id关联。<input type="text" id="subject" class="form-control" placeholder="小蓝" required />：
type="text"表示输入框为文本输入框。id="subject"为输入框设置唯一标识符，方便 JavaScript 操作。class="form-control"使用 Bootstrap 的表单控件样式。placeholder="小蓝"显示输入框的占位符。required使该输入框为必填项。
- 其他输入框类似，用于输入课程和平台信息。
<input type="submit" value="生成" class="btn btn-primary" onclick="generate()" />：
type="submit"表示这是一个提交按钮。class="btn btn-primary"使用 Bootstrap 的按钮样式，使其具有主要按钮的外观。onclick="generate()"点击按钮时调用generate函数。
<textarea id="result" rows="8" placeholder="欢迎用户小蓝在蓝桥云课学习 Python 课程！"></textarea>：
id="result"为文本区域设置唯一标识符，用于显示生成的欢迎语。rows="8"设置文本区域的行数。placeholder显示初始占位符。
2. CSS部分
textarea { resize: none; overflow: hidden; width: 100%; min-height: 50px; } #footer { text-align: center; } .form-group { margin-top: 10px; }
解释：
textarea选择器：
resize: none;禁止用户调整文本区域的大小。overflow: hidden;隐藏文本区域的溢出内容。width: 100%;使文本区域的宽度占满父元素。min-height: 50px;设置文本区域的最小高度。
#footer选择器：
text-align: center;将元素内的文本居中对齐（虽然在 HTML 中未看到元素使用id="footer"）。
.form-group选择器：
margin-top: 10px;为表单组元素设置顶部外边距，使其在垂直方向上有一定的间隔。
3. JavaScript 部分
function generate() { subject = document.getElementById("subject").value; event1 = document.getElementById("event1").value; event2 = document.getElementById("event2").value; if (subject ==="" || event1 ==="" || event2 ===""){ return; } let result = `欢迎用户${subject}在${event2}学习${event1}课程！`; document.getElementById("result").value = result; }
解释：
function generate() {...}定义了一个名为generate的函数，用于生成欢迎语。subject = document.getElementById("subject").value;等：
- 通过
document.getElementById("subject").value获取id为subject的输入框的值，存储在subject变量中。- 同样地，获取
event1和event2输入框的值。
if (subject ==="" || event1 ==="" || event2 ===""){...}：
- 此条件检查输入框是否为空，如果任何一个输入框为空，则函数将直接返回，不执行后续操作。
let result =`欢迎用户在{event2} 学习 ${event1} 课程！`;：
- 使用模板字符串生成欢迎语，将变量
subject、event1和event2的值插入到字符串中。
document.getElementById("result").value = result;：
- 将生成的欢迎语设置为
id为result的文本区域的value，使其显示在页面上。
4. 工作流程 ▶️
- 页面加载：
- 页面加载时，会引入所需的 CSS 和 JavaScript 文件，包括 Bootstrap 的资源和自定义资源。
- 显示页面的布局，包括输入框和文本区域。
- 用户输入：
- 用户在输入框中输入用户名称、课程名称和平台名称。
- 生成欢迎语：
- 点击 "生成" 按钮时，调用
generate函数。- 在
generate函数中，首先获取三个输入框的值。- 检查输入框是否都不为空，如果有空值，函数将不执行后续操作。
- 若输入完整，使用模板字符串根据输入的内容生成欢迎语。
- 将生成的欢迎语存储在
result变量中，并将其设置到id为result的文本区域，使其显示在页面上。
综上所述，HTML 部分提供了页面的结构和布局，CSS 部分负责页面的样式，JavaScript 部分实现了根据用户输入生成欢迎语的功能，三者协同工作，为用户提供了一个简单的营销号欢迎语生成器。
测试结果👍
