mintblue928 2024-04-18 22:34 采纳率: 100%
浏览 2
已结题

『dw』求解答此上机指导的代码

万分感谢！教材是刘和秀慕课版web前端开发技术(html+css+javascript)

img

  • 写回答

3条回答 默认 最新

  • 专家-赤兔[在线] 优质创作者: 编程框架技术领域 2024-04-18 22:35
    关注

    引自免费微信小程序：皆我百晓生

    为了帮助您完成这个上机指导任务，我们将按照题目要求分步骤编写JavaScript代码，并在HTML文件中嵌入这些代码。以下是完整的代码示例：

    首先，创建一个名为JeventExercise.html的HTML文件，然后将以下代码粘贴到其中：

    <!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上机指导</title>
    <style>
        label {
            display: block;
        }
    </style>
</head>
<body>
    <h1>请选择你喜欢的水果</h1>
    <form id="fruitForm">
        <label><input type="checkbox" name="fruits" value="苹果"> 苹果</label>
        <label><input type="checkbox" name="fruits" value="香蕉"> 香蕉</label>
        <label><input type="checkbox" name="fruits" value="桃子"> 桃子</label>
        <label><input type="checkbox" name="fruits" value="葡萄"> 葡萄</label>
        <label><input type="checkbox" name="fruits" value="西瓜"> 西瓜</label>
        <label><input type="checkbox" name="fruits" value="芒果"> 芒果</label>
        <label><input type="checkbox" name="fruits" value="木瓜"> 木瓜</label>
        <label><input type="checkbox" name="fruits" value="草莓"> 草莓</label>
        <br>
        <button type="button" onclick="displayFruits()">显示</button>
    </form>
    <div id="selectedFruits"></div>

    <!-- JavaScript 代码 -->
    <script>
        // 方式一：传统事件处理函数
        function traditionalEventHandler() {
            var fruits = document.getElementsByName('fruits');
            var selectedFruits = [];
            for (var i = 0; i < fruits.length; i++) {
                if (fruits[i].checked) {
                    selectedFruits.push(fruits[i].value);
                }
            }

            document.getElementById('selectedFruits').innerText = '你喜欢的水果有：' + selectedFruits.join(', ');
        }

        // 方式二：内联事件处理函数
        function inlineEventHandler() {
            document.getElementById('fruitForm').addEventListener('click', function(event) {
                if (event.target.tagName.toLowerCase() === 'button') {
                    var fruits = document.getElementsByName('fruits');
                    var selectedFruits = [];
                    for (var i = 0; i < fruits.length; i++) {
                        if (fruits[i].checked) {
                            selectedFruits.push(fruits[i].value);
                        }
                    }

                    document.getElementById('selectedFruits').innerText = '你喜欢的水果有：' + selectedFruits.join(', ');
                }
            });
        }

        // 方式三：匿名函数
        function anonymousEventHandler() {
            document.getElementById('fruitForm').addEventListener('submit', function(event) {
                event.preventDefault(); // 阻止表单提交

                var fruits = document.getElementsByName('fruits');
                var selectedFruits = [];
                for (var i = 0; i < fruits.length; i++) {
                    if (fruits[i].checked) {
                        selectedFruits.push(fruits[i].value);
                    }
                }

                document.getElementById('selectedFruits').innerText = '你喜欢的水果有：' + selectedFruits.join(', ');
            });
        }

        // 初始化时调用一种事件注册方式（这里使用传统方式作为示例）
        traditionalEventHandler();
    </script>
</body>
</html>

    这段代码包括了HTML结构、样式定义以及三种不同类型的事件处理方法。您可以根据喜好选择其中的一种方法，将其替换为实际运行的事件处理程序。在这个例子中，我们使用的是传统事件处理函数（traditionalEventHandler()）。如果您想尝试其他两种方式，请注释掉这一段并启用相应的函数（inlineEventHandler() 或 anonymousEventHandler()）。

    保存上述代码并用Dreamweaver打开JeventExercise.html文件，浏览器会显示如图9-6所示的页面。选中您喜欢的水果，点击“显示”按钮，下方就会显示所选的水果列表。

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

报告相同问题？

问题事件

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