用js简单实现单词默写系统

最新推荐文章于 2022-07-02 16:53:08 发布

原创最新推荐文章于 2022-07-02 16:53:08 发布 · 915 阅读

5 ·

CC 4.0 BY-SA版权

个人代码展示专栏收录该内容

7 篇文章

订阅专栏

本文将介绍如何使用JavaScript来创建一个简单的单词默写系统，帮助用户进行单词记忆和复习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

单词默写系统作业

<h2>单词默写系统</h2>
<div id="app">
</div>
<script>
    // 定义一个数组
    var dataSource = [
        {
            ch: "对象",
            en: "object",
            state: false
        },
        {
            ch: "数组末尾删除元素",
            en: "pop",
            state: false
        },
        {
            ch: "删除对象的属性",
            en: "delete",
            state: false
        },
        {
            ch: "截取字符的属性",
            en: "slice",
            state: false
        }
    ]
    //循环生成div中的中英文输入框等
    var div = document.getElementById("app");
    var str = "";
    for (let i = 0; i < dataSource.length; i++) {
        str += `<div id="app">
    <label>${dataSource[i].ch}</label>
    <input name="en"/>
    </div>`
    }
    div.innerHTML = str + `<div><button onclick="fn()">点击检查</button></div>`;

    // button上的点击事件
    function fn() {
        // 获取lable和input
        var lables = document.getElementsByTagName("label");
        var inputs = document.getElementsByTagName("input");
        var arr = [];
        for (let i = 0; i < lables.length; i++) {
            arr.push({
                ch: lables[i].innerHTML,
                en: inputs[i].value
            })
        }
        console.log(arr)

        //比较
        var res = "";
        for (let i = 0; i < arr.length; i++) {
            for (let j = 0; j < dataSource.length; j++) {
                if (arr[i].ch == dataSource[j].ch && arr[i].en == dataSource[j].en) {
                    res += arr[i].ch + arr[i].en + "\n";
                    break;
                }
                // if(arr[i].en=""||arr[i].en!=dataSource[j].en)alert("error");
                // else alert("error");
            }
        }
        alert(res);
    }

</script>