javascript - 将选定的文本元素放入文本框，或在没有文本框的情况下提交选定的单词

Question

我想让用户从词库中选择给定的词并将它们放入文本框中。用户提交输入后，我将创建一个脚本来验证单词的正确顺序。

我现在关注的是如何从词库中选择词并将它们作为文本(每个词之间有空格)放入文本框中。

如何做到这一点？当用户点击单词时，只会放置中文单词，而不是英文单词。

---

编辑:文字不一定要在文本框中。我只希望用户能够从单词库中选择单词，点击提交，然后允许按该顺序解析单词。不过，我认为提交一串单词的方式是通过文本框。

---

HTML:

Create sentence:

<input type="text" id="test"  value="" />
<br/>
<button onclick="submitMe()" id="testButton" >Submit Response </button>
<br/>

<div class="wordBank_Headings">Word Bank:
    <span class="wordBank_Words"></span>
</div>

JavaScript:

var words = {
    "task1" :
    {
        'Ni'    : 'you',
        'Wo'    : 'I',
        'Hao'   : 'good',
        'Shi'   : 'am'  
    }
}

function bank() {
    $(".wordBank_Words").empty();
    for (obj in words) {
        for (key in words[obj]) {
            $(".wordBank_Words").append("<li><b>" + key + "</b>: " + words[obj][key] + "</li>");
        }
    }
}

function submitMe() {
//will eventually verify input from textbox
    var value = document.getElementById('test').value;
    alert(value);
}

Answer 1

给 li 添加一个属性。然后你可以在点击事件中完成它

function bank() {
        $(".wordBank_Words").empty();
        for (obj in words) {
            for (key in words[obj]) {
                $(".wordBank_Words").append("<li class='bank-word' data-display-word='" + key + "' ><b>" + key + "</b>: " + words[obj][key] + "</li>");
            }
        }
    }

    bank();

    $(".bank-word").click(function (event) {

        $('#test').val($('#test').val() + " " + $(this).attr('data-display-word'));
        $(this).hide();
    });