一些JavaScript代碼不起作用

Question

我有一個HTML選擇哪個觸發電平變化的函數的run（）

<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> 

什麼的run（）的作用是，它設定的選擇值等於可變文本和值的文本被設置爲等於輸入框的值。

function run(){ 
var text = document.getElementById("select-para").value; 

var storyTextarea = document.getElementById("storytext"); 
storyTextarea.value = text; 
} 

我正在打字測試，我希望用戶選擇他選擇的段落。問題是，在這個函數結束之後，輸入測試代碼的其餘部分不會觸發。輸入框中的段落改變，但輸入測試代碼的其餘部分不起作用。如何使代碼的其餘部分工作？其餘的代碼在這裏。

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(); 
    } 
}); 

在run（）函數，使處理器獲得註冊。

從中刪除「textarea」，因爲它不需要標識ID。

$("textarea#usertext") 

該邏輯可能需要正確格式化以適用於除'8'bs和'32'空間以外的所有其他鍵碼。