Question

我正在努力实施数独谜题。

我正在采取的第一步是尝试验证用户输入的内容是0-9之间的值。

但我坚持使用语法以及如何解决这个问题。

<table class="spuzzle">
  <caption>Sudoku</caption>
  <thead>
    <tr>
      <th></th>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
      <th>6</th>
      <th>7</th>
      <th>8</th>
      <th>9</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>A</th>
      <td colspan="3" rowspan="3" class="greenBox">
        <table class="subTable">
          <tr>
            <td contentEditable="true" class="sudEnter"></td>
            <td contentEditable="true" class="sudEnter"></td>
            <td>4</td>
          </tr>
          <tr>
            <td contentEditable="true" class="sudEnter"></td>
            <td contentEditable="true" class="sudEnter"></td>
            <td contentEditable="true" class="sudEnter"></td>
          </tr>
          <tr>
            <td>3</td>
            <td>5</td>
            <td contentEditable="true" class="sudEnter"></td>
          </tr>
        </table>
      </td>
      <td colspan="3" rowspan="3" class="goldBox">
        <table class="subTable">
          <tr>
            <td>5</td>
            <td contentEditable="true" class="sudEnter"></td>
            <td>3</td>
          </tr>
          <tr>
            <td contentEditable="true" class="sudEnter"></td>
            <td contentEditable="true" class="sudEnter"></td>
            <td contentEditable="true" class="sudEnter"></td>
          </tr>
          <tr>
            <td contentEditable="true" class="sudEnter"></td>
            <td contentEditable="true" class="sudEnter"></td>
            <td contentEditable="true" class="sudEnter"></td>
          </tr>
        </table>
      </td>
      <td colspan="3" rowspan="3" class="greenBox">
        <table class="subTable">
          <tr>
            <td contentEditable="true" class="sudEnter"></td>
            <td>7</td>
            <td contentEditable="true" class="sudEnter"></td>
          </tr>
          <tr>
            <td>3</td>
            <td>1</td>
            <td contentEditable="true" class="sudEnter"></td>
          </tr>
          <tr>
            <td>2</td>
            <td contentEditable="true" class="sudEnter"></td>
            <td contentEditable="true" class="sudEnter"></td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <th>B</th>
    </tr>
    <tr>
      <th>C</th>
    </tr>
    <tr>
      <th>D</th>
      <td colspan="3" rowspan="3" class="goldBox">
        <table class="subTable">
          <tr>
            <td contentEditable="true" class="sudEnter"></td>
            <td contentEditable="true" class="sudEnter"></td>
            <td contentEditable="true" class="sudEnter"></td>
          </tr>
          <tr>
            <td>6</td>
            <td contentEditable="true" class="sudEnter"></td>
            <td>9</td>
          </tr>
          <tr>
            <td>4</td>
            <td>7</td>
            <td>2</td>
          </tr>
        </table>
      </td>
      <td colspan="3" rowspan="3" class="greenBox">
        <table class="subTable">
          <tr>
            <td contentEditable="true" class="sudEnter"></td>
            <td>2</td>
            <td contentEditable="true" class="sudEnter"></td>
          </tr>
          <tr>
            <td contentEditable="true" class="sudEnter"></td>
            <td contentEditable="true" class="sudEnter"></td>
            <td contentEditable="true" class="sudEnter"></td>
          </tr>
          <tr>
            <td contentEditable="true" class="sudEnter"></td>
            <td>9</td>
            <td contentEditable="true" class="sudEnter"></td>
          </tr>
        </table>
      </td>
      <td colspan="3" rowspan="3" class="goldBox">
        <table class="subTable">
          <tr>
            <td>9</td>
            <td>3</td>
            <td>7</td>
          </tr>
          <tr>
            <td>4</td>
            <td contentEditable="true" class="sudEnter"></td>
            <td>8</td>
          </tr>
          <tr>
            <td contentEditable="true" class="sudEnter"></td>
            <td contentEditable="true" class="sudEnter"></td>
            <td contentEditable="true" class="sudEnter"></td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <th>E</th>
    </tr>
    <tr>
      <th>F</th>
    </tr>
    <tr>
      <th>G</th>
      <td colspan="3" rowspan="3" class="greenBox">
        <table class="subTable">
          <tr>
            <td contentEditable="true" class="sudEnter"></td>
            <td contentEditable="true" class="sudEnter"></td>
            <td>1</td>
          </tr>
          <tr>
            <td contentEditable="true" class="sudEnter"></td>
            <td>4</td>
            <td>5</td>
          </tr>
          <tr>
            <td contentEditable="true" class="sudEnter"></td>
            <td>6</td>
            <td contentEditable="true" class="sudEnter"></td>
          </tr>
        </table>
      </td>
      <td colspan="3" rowspan="3" class="goldBox">
        <table class="subTable">
          <tr>
            <td contentEditable="true" class="sudEnter"></td>
            <td contentEditable="true" class="sudEnter"></td>
            <td contentEditable="true" class="sudEnter"></td>
          </tr>
          <tr>
            <td contentEditable="true" class="sudEnter"></td>
            <td contentEditable="true" class="sudEnter"></td>
            <td contentEditable="true" class="sudEnter"></td>
          </tr>
          <tr>
            <td>8</td>
            <td contentEditable="true"></td>
            <td>1</td>
          </tr>
        </table>
      </td>
      <td colspan="3" rowspan="3" class="greenBox">
        <table class="subTable">
          <tr>
            <td contentEditable="true" class="sudEnter"></td>
            <td>5</td>
            <td>2</td>
          </tr>
          <tr>
            <td contentEditable="true" class="sudEnter"></td>
            <td contentEditable="true" class="sudEnter"></td>
            <td contentEditable="true" class="sudEnter"></td>
          </tr>
          <tr>
            <td>7</td>
            <td contentEditable="true" class="sudEnter"></td>
            <td contentEditable="true" class="sudEnter"></td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <th>H</th>
    </tr>
    <tr>
      <th>I</th>
    </tr>
  </tbody>
</table>

这是我在HTML中的数独，这是我现在的JS：

function inputCheck() {
  var userInput = ""
  userInput = document.getElementsByClassName("sudEnter");

  if (userInput > 0) {
    userInput === userInput;
  } else if (userInput < 9) {
    userInput === userInput;
  } else {
    document.getElementsByClassName("sudEnter").value = "";
  }
}

document.addEventListener("keyup", inputCheck);

Answer 1

如果你使用的是===，它用于比较变量。您基本上将userInput与userInput进行比较。只需使用一个=虽然你根本不需要做任何事情。

Answer 2

尝试将input type="number"元素替换为min属性设置为0，max属性设置为9 td元素

＆＃13;

$("input").change(function() {
  if (this.value > this.max) {
    this.value = this.max
  }
  if (this.value < this.min) {
    this.value = this.min
  }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<input type="number" min="0" max="9" value="0" />

＆＃13;

输入检查用户输入的值介于0-9 Javascript

2 个答案: