老师帮忙检查一下

来源:4-5 编程练习

DB1时间的玫瑰

2021-08-26 11:02:29

<!DOCTYPE html>

<html lang="en">


<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>对象展开运算符的应用</title>

    <style>

        #wrap {

            width: 324px;

            margin: 0 auto;

        }

        

        button {

            padding: 10px 20px;

            margin-bottom: 20px;

            border: none;

            border-radius: 3px;

            background: #f01414;

            color: #fff;

        }

        

        #intro {

            width: 300px;

            min-height: 100px;

            line-height: 20px;

            padding: 10px;

            border: 2px solid gray;

            border-radius: 3px;

        }

    </style>

</head>


<body>

    <div id="wrap">

        <button>添加</button>

        <div id="intro"></div>

    </div>

    <script>

        // 在此补全代码

        let wrap = document.getElementById('wrap');

        // 获取按钮

        const btn = document.querySelector('button');

        // 获取div

        let ointro = document.getElementById('intro');


        // 创建函数

        const userParam = {

            name: "gf",

            year: "2004",

            director: "zxc",

            star: "zxc / hsy",

            type: "武打 / 爱情 ",

            introduction: " aaaaaaa"

        };


        const logUser = userParam => {

            const defaultParam = {

                // 默认值

                name: "dhxyzygbh ",

                year: "2014",

                director: "lzw",

                star: "zxc / wmd /ljy",

                type: "喜剧 / 爱情 / 奇幻 / 古装",

                introduction: " asdadasdasdsad"

            }


            // 将默认参数和用户参数拼接作为最终参数

            const {

                name,

                year,

                director,

                star,

                type,

                introduction

            } = {...defaultParam,

                ...userParam

            };

        };


        // 绑定事件

        btn.onclick = function {

            // 添加合并内容

            ointro.innerHTML = `<h3>名称:${name}</h3></br>导演:${director}</br>主演:${star}</br>类型:${type}</br>上映年份:${year}</br>简介:${introduction}`

        };


        logUser();

    </script>

</body>


</html>


写回答

1回答

好帮手慕慕子

2021-08-26

同学你好,给按钮绑定的点击事件中,function后面没有添加括号,不符合语法,建议添加上,示例:

http://img.mukewang.com/climg/612709cb09d088af05880135.jpg

另外,应该在logUser函数中,设置ointro的innerHTML属性值,然后在点击事件函数中调用logUser函数并传入参数就可以了。为了方便截图,老师将代码折叠起来了,示例:

http://img.mukewang.com/climg/61270aa509a01af216070504.jpg

祝学习愉快~

0

0 学习 · 15276 问题

查看课程