如果比较错误，则尝试使按键数字变为红色

Question

有人可以帮助在我的 javascript 项目中实现一些东西吗？ @http://codepen.io/urketadic/pen/YpLgBX 如果数字错误并且与 pi 不一致，我希望数字变为红色。我真的很难统计和比较。

我已经尝试了很多，最后我想出了这个代码：

 var count = 0;
// color the mistake right away
   $("#inputsm").keyup(function(event) {
    var pressed = event.key;
    answer = $("#inputsm").val();
    pisub = pi.substr(input,answer.length)
    if (pressed!=="Backspace"&&pressed!=="Delete") count++;
    else count--;
     console.log(count);
});

我很困惑，我不知道我该怎么做。文本区域甚至允许数字变红吗？我也尝试添加 jquery css 但它不起作用。有人可以用自己的 codepen 和 post a link 来写吗？

Answer 1

看看这个fiddle：https://jsfiddle.net/ebv5n64j/2/

我整理了一些基本上可以完成您想要做的事情的东西。您可以从那里修改它，但这是基本概念。我将我的设计设计为在用户正确之前不让用户继续，但您可以轻松更改它。

这是一个片段，但是 jsfiddle 有完整的工作版本：

// If it's a delete command
  if(code === 8){
    if(!$("#wrong").length > 0)
        inputCount = (inputCount === 0 ? 0 : --inputCount);
    $("#pi span").last().remove();
    console.log(inputCount);
  } else if (code >= 48 && code <= 57) {

    var inputNumber = code - 48;
    var numSpan;

    $("#wrong").remove();

    numSpan = $("<span>"); // make a new one

    // Append the number
    numSpan.text(inputNumber);
    numSpan.removeClass("incorrect");

    if(String(inputNumber) === piDigits[inputCount]){
        numSpan.addClass("correct");
      inputCount++;
    } else {
        numSpan.attr("id", "wrong");
    }

    $("#pi").append(numSpan);

    placeCaretAtEnd(this);

  }

Answer 2

所以我看了看你的笔，认为你的解决方案有点过于复杂了。我认为更好的方法是将输入文本区域的字符串与 pi 的子字符串进行比较。无论如何，这是固定代码，我已经将工作版本链接到笔。

顺便说一句，你在描述中提到，如果他们想从 3.14 中的数字 4 开始，他们应该输入 1（对于索引 1），但是你将他们的输入减去 1，所以它如果他们输入 1，则基本上从 1 而不是 4 开始。

$("#inputsm").keyup(function() {
 var thisLength = parseInt(input) + $(this).val().length - 1;
 if($(this).val().trim() === pi.substring(parseInt(input), thisLength)) {
    console.log("good so far!");
   $(this).removeAttr('style');
 } else {
   console.log("ahhh no good!");
   $(this).css('background', 'red');
 }
});

http://codepen.io/msafi/pen/dOKogK/

如果比较错误，则尝试使按键数字变为红色

Trying to make keydown number turn red if wrong in comparison

javascript

jquery

keydown