正文

揭秘点击按钮轻松记录输入词的JavaScript技巧

/0 浏览量
0514

在网页开发中，我们常常需要实现一些用户交互的功能，比如记录用户输入的词。通过JavaScript，我们可以轻松地实现这一功能。本文将带你一步步了解如何通过点击按钮来记录输入框中的词。

基本思路

要实现这个功能，我们需要以下几个步骤：

  1. 创建一个HTML页面，其中包含一个输入框和一个按钮。
  2. 使用JavaScript为按钮添加点击事件监听器。
  3. 在事件监听器中，获取输入框中的值，并将其存储起来。

代码实现

下面是具体的实现步骤和代码：

1. 创建HTML页面

首先，我们需要创建一个简单的HTML页面，其中包含一个输入框和一个按钮。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>记录输入词</title>
</head>
<body>
    <input type="text" id="inputWord" placeholder="请输入文字">
    <button id="recordBtn">记录</button>
    <div id="recordedWords"></div>

    <script src="script.js"></script>
</body>
</html>

2. 添加JavaScript代码

接下来，我们需要为按钮添加点击事件监听器，并在事件处理函数中获取输入框的值。

// script.js
document.addEventListener('DOMContentLoaded', function() {
    var recordBtn = document.getElementById('recordBtn');
    var inputWord = document.getElementById('inputWord');
    var recordedWords = document.getElementById('recordedWords');

    recordBtn.addEventListener('click', function() {
        var word = inputWord.value;
        recordedWords.innerHTML += word + '<br>';
        inputWord.value = ''; // 清空输入框
    });
});

3. 测试效果

保存以上代码，并在浏览器中打开HTML文件。当你输入一些文字并点击“记录”按钮时，输入的文字将显示在页面下方。

进阶技巧

  1. 使用localStorage存储记录：为了持久化存储记录，我们可以使用localStorage来保存用户输入的词。
recordBtn.addEventListener('click', function() {
    var word = inputWord.value;
    localStorage.setItem('recordedWords', localStorage.getItem('recordedWords') ? localStorage.getItem('recordedWords') + word + '<br>' : word + '<br>');
    inputWord.value = '';
    updateRecordedWords();
});

function updateRecordedWords() {
    recordedWords.innerHTML = localStorage.getItem('recordedWords') || '';
}
  1. 使用CSS美化页面：为了让页面看起来更美观，我们可以添加一些CSS样式。
#recordedWords {
    margin-top: 20px;
    border: 1px solid #ccc;
    padding: 10px;
    min-height: 50px;
}

将以上CSS代码添加到HTML文件的<head>部分。

通过以上步骤，你就可以轻松地实现点击按钮记录输入词的功能了。希望这篇文章能帮助你更好地理解JavaScript在网页开发中的应用。

-- 展开阅读全文 --