web蓝桥杯真题--14、关于你的欢迎语

介绍

营销号,有时候需要一些特定的欢迎语,但针对特定的用户,我们希望可以个性化一点。本题需要在项目文件中修改代码存在的问题,实现根据模版生成特定用户的欢迎语。

准备

本题已经内置了初始代码,打开实验环境,目录结构如下:

├── 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 服务处于可以正常访问状态,点击「提交检测」系统会自动判分。

解题思路:

首先这个题目考虑的是两个问题

一个是能否正确的获取到value值,我刚开始就是忽略这里了

    subject = document.getElementById("subject").value;

第二点就是看会不会模板字写法了,(还有别的方法,我会这个)模板字面量是一种特殊的字符串表示方法,它可以在字符串中插入变量、表达式或函数调用,并且保留换行符和空格。

    result = `欢迎用户${subject}在${event2}学习${event1}课程!`;

另外一定要注意这里的在***学习是event2,学习的***课程才是event1,刚开始没注意,太粗心了,这要是考试就废了

整体代码:

function generate() {subject = document.getElementById("subject").value;event1 = document.getElementById("event1").value;event2 = document.getElementById("event2").value;if (subject.length==0 || event1.length==0 || event2.length==0){return;}result = `欢迎用户${subject}在${event2}学习${event1}课程!`;// result = "欢迎用户subject在event学习event1课程!";document.getElementById("result").value = result;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/646107.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Backend - Django URL 路由 重定向

目录 一、url 的 <> 作用 &#xff08;一&#xff09;操作流程 &#xff08;二&#xff09;前端设置链接 1. 包括&#xff1a; 2. 比如 &#xff08;三&#xff09;后端匹配路由 1. 理解 2. 比如 &#xff08;三&#xff09;后端视图的 get( )的参数 1. 理解 …

python绘图创建两个坐标轴 共享一个x轴

在Matplotlib中&#xff0c;可以使用twiny()或者twinx()方法创建一个共享一条轴线的第二个坐标轴&#xff0c;从而实现绘制两个坐标轴的效果 import matplotlib.pyplot as plt import numpy as np# 创建一些示例数据 x np.linspace(0, 10, 100) y1 np.sin(x) y2 np.cos(x)#…

第十四届蓝桥杯国赛 C++ B 组 G 题——AB路线(AC)

目录 1. AB路线1. 问题描述2. 输入格式3. 输出格式4. 样例输入5. 样例输出6. 样例说明7. 评测用例规模与约定8. 原题链接 2. 解题思路3. AC_Code 1. AB路线 前置知识点&#xff1a;BFS (广度优先搜索) 1. 问题描述 有一个由 N M N \times M NM 个方格组成的迷宫&#xff0…

flutter-相关个人记录

1、flutter 安卓打包打包报错 flutter build apk -v --no-tree-shake-icons 2、获取华为指纹证书命令 keytool -list -v -keystore ***.jks 3、IOS项目中私有方法查找隐藏文件中 1、cd 项目目录地址 2、grep -r xerbla. "xerbla"为需要查找的关键字 3…

【秒剪】如何一键恢复至素材原长?

Step1:点击下方【剪辑】 Step2:点击【时长截取】 Step3:点击【恢复至原长】 Step4:点击【恢复所有片段到原长】

推荐一个还可以的windows ssh工具

1.下载 https://github.com/kingToolbox/WindTerm/releases 2.解压 3.使用 上传 下载都很快 比cmd窗口好用 当然和finalshell有点像

JAVASE进阶(设计模式、设计原则)

目录 一、注解 内置注解:JAVA中已经定义好的注解。 元注解:修饰注解的注解。 自定义注解。 二、克隆 JAVA中对clone的实现? 浅克隆 深克隆 那么该如何做到深克隆呢? 三、常用设计模式 1、创建型模式 单例模式 工厂模式 工厂方法模式 抽象工厂模式 原型模式 一、注…

系统登录的时候的密码如何做到以加密的形式进行登录【java.security包下的api】工具类。

/** description: 将普通的publicKey转化得到一个RSAPublicKey* author: zkw* date: 2024/1/24 16:17* param: publicKey 普通的publicKey* return: RSAPublicKey 得到一个新的RSAPublicKey**/public static RSAPublicKey getPublicKey(String publicKey) throws NoSuchAlgorit…

oracle数据库插入或者更新判断是否存在记录的SQL

oracle数据库插入或者更新判断是否存在记录的SQL 1、插入的时候判断是否存在&#xff0c;若存在则忽略&#xff0c;若不存在则插入 写法① insert into student(id,name,sex) select 111,张三,女 from dual where not exists (select 1 from student where id 111)写法② …

vue中图片不显示问题 - vue中静态资源加载

文章目录 vue中图片不显示问题静态资源URL 转换规则webpack 静态资源处理 图片不显示问题问题描述解决办法1&#xff1a;使用require引入require is not defined 解决办法2&#xff1a;使用import引入解决办法3&#xff1a;将图片放进公共文件夹static或public vue中图片不显示…

代码随想录算法训练营第十四天|104.二叉树的最大深度,559.n叉树的最大深度,111.二叉树的最小深度,222.完全二叉树的节点个数

系列文章目录 代码随想录算法训练营第一天|数组理论基础&#xff0c;704. 二分查找&#xff0c;27. 移除元素 代码随想录算法训练营第二天|977.有序数组的平方 &#xff0c;209.长度最小的子数组 &#xff0c;59.螺旋矩阵II 代码随想录算法训练营第三天|链表理论基础&#xff…

Qt 鼠标按下移动释放事件

文章目录 1 通过自定义控件实现1.1 鼠标跟踪 2 鼠标事件移动标签 QEvent::MouseButtonPress ​ 鼠标按下时&#xff0c;触发该事件&#xff0c;它对应的子类是QMouseEvent QEvent::MouseMove ​ 鼠标移动时&#xff0c;触发该事件&#xff0c;它对应的子类是QMouseEvent QEv…

《解锁R统计分析:深度探索R Commander图形界面》

&#x1f482; 个人网站:【 海拥】【神级代码资源网站】【办公神器】&#x1f91f; 基于Web端打造的&#xff1a;&#x1f449;轻量化工具创作平台&#x1f485; 想寻找共同学习交流的小伙伴&#xff0c;请点击【全栈技术交流群】 在数据科学与大数据技术的浪潮中&#xff0c;R…

基于Java的学生宿舍门禁信息管理系统的设计与实现(源码+lw+部署文档+讲解等

目录 前言 详细视频演示 具体实现截图 技术栈 后端框架SpringBoot 前端框架Vue 持久层框架MyBaitsPlus 系统测试 系统测试目的 系统功能测试 系统测试结论 代码参考 数据库代码参考 源码获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、…

Cesium 常见配置

文章目录 常见配置1. 修改天空背景(skyBox)2. 去除版权信息3. 增加太阳光照效果4. 实现昼夜联动效果5. 显示帧数6. 增加太阳光照7. 大气层显示8. 开启地形深度检测9. 禁止相机进入地下10. 右键拖拽场景倾斜11. 关闭抗锯齿12. 鼠标操作惯性控制13. 自动调整分辨率14. 默认定位到…

记录:云计算学习日常之shell

一、初识shell 文件描述符与输出重定向&#xff1a; 在shell程式中&#xff0c;最常使用的FD(filedescriptor)有三个&#xff0c;分别是&#xff1a; 0&#xff1a;Standard Input(STDIN) 1&#xff1a;Standard Output(STDOUT) 2&#xff1a;Standard Error Output(STDER…

Linux 常见性能指标 -- 网络

本系列记录操作系统常见性能指标&#xff0c;写这个主要是记录也是回顾&#xff0c;笔记很长&#xff0c;拆分了几个部分&#xff0c;本篇记录 网络 的性能指标 日常最常见的问题就是 ping 能不能通&#xff0c;telnet 端口通不通&#xff0c;来判断网络是否正常。但是有些时候…

【数据结构】数据结构初识

前言&#xff1a; 数据结构是计算存储&#xff0c;组织数据的方式。数据结构是指相互间存在一种或多种特定关系的数据元素的集合。通常情况下&#xff0c;精心选择的数据结构可以带来更高的运行或者存储效率。数据结构往往同高效的检索算法和索引技术有关。 Data Structure Vi…

H.264数据解析

什么是H.264 H264 是 MPEG-4 标准所定义的最新编码格式&#xff0c;同时也是技术含量最高、代表最新技术水平的视频编码格式之一&#xff0c;标准写法应该是H.264 H264 视频格式是经过有损压缩的&#xff0c;但在技术上尽可能做的降低存储体积下获得较好图像质量和低带宽图像…

劳特巴赫的基础使用(二)

一、基本介绍 LAUTERBACH是世界领先的微处理器开发工具厂商&#xff0c;成立于1979年&#xff0c;总部位于德国慕尼黑。 JTAG Debugger由PowerDebug和Debug Cable组成。PowerDebug是通用控制模块&#xff0c;支持所有Cable&#xff0c;没有License。Debug Cable绑定License&a…