JavaScriptコードの一部が動作しません

Question

私のonchangeは、関数の実行（）

<select id="select-para" onchange="run();"> 
    <option value="paragraph 1...">Para 1</option> 
    <option value="paragraph 2...">Para 2</option> 
    <option value="paragraph 3...">Para 3</option> 
    <option value="paragraph 4....">Para 4</option> 
</select> 

何を実行（）いを発射するHTML選択は、それが選択の値が変数テキストと値を等しく設定することである持っていますのテキストは入力ボックスの値と等しく設定されます。

私はタイピングテストを行っています。ユーザーが選択した段落を選択するようにします。問題は、この関数の終了後、タイピングテストコードの残りの部分は起動しないということです。入力ボックスの段落は変更されますが、タイピングテストコードの残りの部分は機能しません。残りのコードを動作させるには？残りのコードはここにあります。

var textArr = text.split(" "); 
var usertext = ""; 
var lastWord = "" 
var usertextArr = new Array(); 
var mistakes = new Array(); 
var highlightArgs = new Array(); 
var score = 0; 
var count = 0; 
var highlightIndex = 0; 

//Prevent pasting into user text box 
$('textarea').bind("cut paste", function (e) { 
    e.preventDefault(); 
}); 

//Keep highlighted text responsive 
$(window).on('resize', function(){ 
    $(".highlightTextarea").css('width','100%'); 
    $(".highlightTextarea-container").css('width','99%'); 

    if (highlightArgs.length > 0){ 
     updateHighlight(); 
    } 
}); 

//Jump to next word to be typed 
function textJump(jumpIndex){ 
    var textStr = text.substring(0, jumpIndex); 
    storyTextarea.value = textStr; 
    storyTextarea.scrollTop = storyTextarea.scrollHeight; 
    storyTextarea.value = text; 
} 

//Jump to specified line of TextArea 
//OLD METHOD DO NOT USE 
function textareaJump(line){ 
    storyTextarea = document.getElementById("storytext"); 
    var lht = (storyTextarea.clientHeight/storyTextarea.rows)*0.875; 
    var jump = (line - 1) * lht; 
    storyTextarea.scrollTop = jump; 
} 

//Refresh the highlighted area 
function updateHighlight(){ 
    $('#storytext').highlightTextarea('destroy'); 
    $('#storytext').highlightTextarea({ ranges: highlightArgs }); 
} 

function typeTest(){ 

    function updateUsertext(){ 
    usertext = $('textarea#usertext').val(); 
    var usertextLatestArr = usertext.split(" "); 
    usertextArr.push(usertextLatestArr[usertextLatestArr.length-1]); 
    count = usertextArr.length - 1; 
    var wordLen = textArr[count].length; 
    var charBufferIndex = textArr[count].length < 3 ? 5 : 2; 

    //Word spelling matches 
    if(textArr[count] === usertextArr[count]){ 
     if (mistakes[mistakes.length-1] === count){ mistakes.pop() } 
     score++; 
     highlightArgs.push({ color: '#c1f5b0', start: highlightIndex, length: wordLen }) 
     highlightIndex += (wordLen + 1); 
    } 

    //Missed one word 
    //any more than a single consecutive missed word counts as an error 
    else if(textArr[count+1] === usertextArr[count]){ 
     usertextArr.splice(count, 0, "blank"); 
     if (mistakes[mistakes.length-1] === count){ mistakes.pop() } 
     score++; 
     mistakes.push(count); 
     highlightArgs.push({ color: '#febbb9', start: highlightIndex, length: wordLen }) 
     highlightIndex += (wordLen + 1); 
     highlightArgs.push({ color: '#c1f5b0', start: highlightIndex, length: textArr[count+1].length }) 
     highlightIndex += (textArr[count+1].length + 1); 
    } 

    //Spelling mistake 
    else{ 
     highlightArgs.push({ color: '#febbb9', start: highlightIndex, length: wordLen }) 
     highlightIndex += (wordLen + 1); 
     mistakes.push(count); 
    } 

    //Rebuild the highlight object 
    updateHighlight(); 

    //Jump to the next word 
    var jumpIndex = highlightIndex + (wordLen + 1) + charBufferIndex; 
    textJump(jumpIndex); 
    }; 

    //User presses backspace 
    $('#usertext').on('keydown', function(e) { 
    var lastChar = $('textarea#usertext').val().slice(-1); 
    var secondLastChar = $('textarea#usertext').val().slice(-2).substring(0, 1);; 
    if(e.keyCode == 8 && lastChar === " " && secondLastChar !== " "){ 
     usertextArr.pop(); 
     mistakes.pop(); 
     highlightArgs.pop(); 
     updateHighlight(); 
     highlightIndex -= (textArr[count].length + 1); 
     count--; 
    } 
    }); 

    $('#usertext').on('keydown', function(e) { 
    var lastChar = $('textarea#usertext').val().slice(-1); 
    var spaceTest = lastChar === " " ? true : false; 
    if(e.keyCode == 32 && spaceTest == false){ 
     updateUsertext(); 
    } 
    }); 
} 

すべてのコード作業とタイピングテストがスムーズに機能する方法。ここではHTMLは次のとおりです。ハンドラが登録されますように

は

<select id="select-para" onchange="run();"> 
     <option value="paragraph 1...">Para 1</option> 
     <option value="paragraph 2...">Para 2</option> 
     <option value="paragraph 3...">Para 3</option> 
     <option value="paragraph 4....">Para 4</option> 
    </select> 
<div class="typebox"> 
      <textarea id="storytext" name="storytext" class="form-control" type="text" readonly="readonly" rows="3"></textarea> 
     </div> 

     <div class="typebox"> 
      <textarea id="usertext" name="usertext" type="text" class="form-control" rows="2" placeholder="Start typing here to begin the test..."></textarea> 
     </div> 

     <div class="timer">You have <span id="time" class="timerTime">02:00</span> minutes left.</div> 

Answer 1

はtypeTestを追加（）のonChange段落の間、

<select id="select-para" onchange="run(); typeTest();"> 

は、実行中

$("#usertext").bind("cut paste", function (e) { 
    e.preventDefault(); 
}); 

//Keep highlighted text responsive 
$(window).on('resize', function(){ 
    $(".highlightTextarea").css('width','100%'); 
    $(".highlightTextarea-container").css('width','99%'); 

    if (highlightArgs.length > 0){ 
     updateHighlight(); 
    } 
}); 

（）関数が含まれます。

IDを特定する必要がないため、「textarea」を削除します。

$("textarea#usertext") 

ロジックは「8」、BSと「32」の空間から離れて他のすべてのキーコードのために適切に機能するように適切にフォーマットされる必要があるかもしれません。