javascript - 动态 js 答案取决于用户的输入

Question

我想制作一个带有问题的表单，当用户在输入框中回答时，该框下应该有一个立即的答案。喜欢问题:你开的什么车？我:福特

动态响应:所以你开的是福特!嗯，什么样的福特？

“另一个供用户回答的输入框”

这一切都应该用 javascript 完成，而不是 jQuery。我需要一些从哪里开始的指导。

Answer 1

html

<div id='questions'></div>​

和 JavaScript

var _$ = function(id) {
    return document.getElementById(id);
};

var handle = function(e, div, num, q) {
    num = num || 0;

    var n_div = document.createElement('div');
    n_div.innerHTML = q[num].replace(/\$\{ans\}/g, e.value);
    console.log(e.value)
    div.appendChild(n_div);

    if (num + 1 < q.length) {
        var i = document.createElement('input');
        i.type = 'text';
        i.onblur = function() {
            handle(i, div, num + 1, q);
        };

        div.appendChild(i);
    }
};

var question = [
    'What car do you drive?',
    'So you drive a ${ans}, what kind?',
    'I like the ${ans} kind, where do you drive it?',
    'Its nice to drive at ${ans}'
], div;

div = _$('questions');

var n_div = document.createElement('div');
n_div.innerHTML = question[0];
div.appendChild(n_div);

var i = document.createElement('input');
i.type = 'text';
i.onblur = function() {
    handle(i, div, 1, question);
};                               
div.appendChild(i);

给你，一个正在工作的 example