JavaScript综合练习2

JavaScript 综合练习 2

1. 案例演示

QQ录屏20240207205838 -original-original

2. 代码实现

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>js综合练习2</title></head><body><input type="text" id="input" /><ul id="list"></ul><script>// 第一步，获取input当中输入文本的数据getElementById通过id获取界面中的元素对象const input = document.getElementById("input");// console.log(input);const list = document.getElementById("list");const todos = [];// 监听input的按键事件onkeydown是按键事件，我们给input的按键事件赋予了执行函数input.onkeydown = (event) => {// console.log(event);// 如果这个keyCode是13说明我们按下了回车键if (event.keyCode === 13) {console.log(event.target.value);if (todos.includes(event.target.value)) {alert("已经有这个值啦！");} else {todos.push(event.target.value);// 创建一个li标签createElementconst li = document.createElement("li");// innerHTML就是li标签中的内容li.innerHTML = event.target.value;// appendChild就是将li标签放到ul标签中list.appendChild(li);}// 清空input中的内容event.target.value = "";}};</script></body>
</html>