软件技术NINI 2024-10-10 11:24 采纳率: 90.9%
浏览 0
已结题

(关键词-事件处理)

事件处理
创建一个按钮，点击按钮时弹出一个警告框显示“按钮被点击了”。
创建一个输入框和一个按钮，点击按钮时打印出输入框中的内容。

  • 写回答

3条回答 默认 最新

  • Kwan的解忧杂货铺@新空间 2024-10-10 11:26
    关注

    上午好☀️☀️☀️️
    本答案参考ChatGPT-3.5

    这是一个基础的编程问题，涉及到HTML、JavaScript、CSS等知识。下面是详细的解答。

    首先，我们需要创建一个简单的HTML结构，包括一个按钮和一个输入框。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Handling Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 50vh;
            margin-top: 50px;
        }
        button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            cursor: pointer;
            width: 100%;
        }
        input {
            display: block;
            padding: 10px;
            border: none;
            border-radius: 5px;
        }
        .alert {
            text-align: center;
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 999;
        }
    </style>
</head>
<body>
    <div class="container">
        <button onclick="displayAlert()">Click me</button>
        <input type="text" id="inputText" placeholder="Enter something..."></input>
        <div id="alert"></div>
    </div>

    <script>
        function displayAlert() {
            let alertText = "Button clicked!";
            document.getElementById("alert").innerText = alertText;
        }

        document.getElementById("inputText").addEventListener("input", function(event) {
            this.value = event.target.value;
        });
    </script>
</body>
</html>

    在这个例子中，我们首先创建了一个包含两个元素的div。第一个div是按钮，第二个div是输入框。然后，我们在按钮上添加了一个点击事件监听器，当用户点击按钮时，会调用displayAlert函数，并将一个警告框的内容设置为点击按钮时触发的文本。

    接下来，我们需要定义displayAlert函数。这个函数有两个参数：alertText和event。alertText是我们想要在警告框中显示的消息，event是当用户点击按钮时触发的事件对象。

    最后，我们在input文本元素上添加了一个输入事件监听器，当用户在输入框中输入内容时，会将输入的内容保存到document.getElementById("inputText")所指向的对象中。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

问题事件

  • 系统已结题 10月18日
  • 已采纳回答 10月10日
  • 创建了问题 10月10日