Question

我有一个HTML选择，其中onchange会触发一个函数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（）的作用是将select值设置为等于变量text，将text的值设置为等于输入框的值。

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

在段落

的onChange中添加typeTest（）

<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”和“32”空间之外，逻辑可能需要正确格式化以适用于所有其他键码。

某些JavaScript代码不起作用

1 个答案: