動態js根據用戶輸入回答

Question

我想製作一個帶有問題的表單，當用戶在輸入框中回答時，應該在該框下面有一個immidiate answere。像問題： 你開什麼車？我：福特

動態反應：所以你開一輛福特！ 那麼福特是什麼樣的？

「另外的輸入框裏回答到用戶」

這都應該用JavaScript實現，沒有jQuery的。我需要一些指導從哪裏開始。

Answer 1

您可以使用可用於輸入測試框的不同事件來執行此操作。例如，您可以使用onchange或onblur事件作爲文本框，並在這些事件中編寫適當的邏輯。所以這將被動態執行。 看到這個reference

Answer 2

使用JQuery，它可以讓你輕鬆處理事件。你可能想要的具體一個是改變：http://api.jquery.com/change/

然而，從你必須問什麼時候開始的事實來看，我建議你閱讀關於這個問題的一些教程。例如見：http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

Answer 3

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