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

Answer 2

您可以使用输入测试框可用的不同事件来执行此操作。例如，您可以对文本框使用onchange或onblur事件，并在这些事件中编写适当的逻辑。所以这将动态执行。见reference

Answer 3

使用JQuery可以轻松处理事件。您可能需要的具体内容是更改：http://api.jquery.com/change/

但是，从你必须要问从哪里开始的事实来看，我建议你阅读一些有关此事的教程。例如，请参阅：http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

动态js取决于用户的输入

3 个答案: