【JavaScript】笑话生成器

根据MDN网站学习记录笔记

---

一、项目目标

主要针对js部分进行设计，html和css部分遵照MDN给出的示例未作改动

• 点击“随机生成笑话”按钮时生成一则笑话。
• 若“生成”按钮按下之前，你在“输入自定义的名字”文字框中输入了一个自定义名字，那么生成的笑话中原有的名字（李雷 / Bob）将被取代。
• 通过选择国家名称的单选按钮来确定界面语言以及笑话中温度和重量的制式。
• 点一次按钮，生成一个新故事。点一次生成一个……

二、项目流程

1. 初始化变量和函数

• customName 是对“输入自定义的名字”文本框的引用，randomize 是对“随机生成笑话”按钮的引用，story 是对 HTML 底部的、准备存放笑话的 <p> 元素的引用）；函数randomValueFromArray() ，取一个数组作参数，随机返回数组中的一个元素

const customName = document.getElementById('customname');
const randomize = document.querySelector('.randomize');
const story = document.querySelector('.story');

function randomValueFromArray(array) {
   
  return array[Math.floor(Math.random() * array.length)];
}

• 用合适的变量来保存文本字符串

let storyText = '今天气温 34 摄氏度，:inserta:出去遛弯。当走到:insertb:门前时，突然就:insertc:。人们都惊呆了，李雷全程目睹但并没有慌，因为:inserta:是一个 130 公斤的胖子，天气又辣么热.';
let insertX = ['怪兽威利','大老爹','圣诞老人'];
let insertY = ['肯德基','迪士尼乐园','白宫'];
let insertZ = ['自燃了','在人行道化成了一坨泥','变成一条鼻涕虫爬走了'];

其中:inserta:是占位符

2. 放置事件处理器并补全result()函数

// 事件监听器
randomize.addEventListener('click', result);

function result() {
   
  let newStory = storyText