Question

在程序中，用户输入一个数字，然后显示该数字的乘法表（例如，出现13次表（例如，请参见下面的img））。我需要javascript来随机选择表中的一个单元格并将其更改为输入字段，但所有尝试都平淡无奇。谢谢！ LMK如果您需要更多说明。

EX： 13倍表 https://nicholasacademy.com/multiplicationto13chart.gif

//change userInput into a number
var userInput = document.getElementById("userInput");
console.log("userInput", userInput);
var valUserInput = parseInt(userInput.value);

console.log(valUserInput);

console.log(valUserInput);

function table_function() {

  var userInput = document.getElementById("userInput");

  var valUserInput = parseInt(userInput.value);

  console.log(valUserInput + 1);

  var color;

  document.write("<div style='text-align:center;'>");
  document.write("<h1>Multiplication table game</h1>");
  document.write("<h2>By: Lauren Cerino, Nate Divine, Zack Beucler</h2>");
  document.write("<form> Please enter a number below 20: <input type='number' id='userInput' name='name' value=''> ");
  document.write("<button type='button' onclick=table_function()>Multiply!</button> </form>");
  document.write("</div>");


  document.write('<table border="1px"; align="center";>');

  for (var i = 1; i < valUserInput + 1; i++) {
    document.write("<tr style='height:45px;'>");

    for (var j = 1; j < valUserInput + 1; j++) {

      var randomCell = Math.floor(Math.random() * valUserInput);
      if (i === randomCell || j === randomCell) {
        document.write("<td style='width:45px;background-color:" + color + ";' align='center'>" + document.write("<input type='number' id='cell' name='name' value=''>") + "</td>")
      }
      if (j == 1 || i == 1) { // current iteration through i or j * 1 will be colored
        color = "#4286f4";
      } else {
        color = "#fff";
      }
      document.write("<td style='width:45px;background-color:" + color + ";' align='center'>" + j * i + "</td>");
    }
    document.write("</tr>");
  }
  document.write("</table>");
}

<input id="userInput" onchange="table_function()" />

Answer 1

好吧，我为此感到刺痛，这就是我想出的：

要创建随机输入，我所做的就是将单元格的位置存储在表单元格i_j上的data属性中。您可以通过以下方式计算单元格的随机位置：

var i = Math.floor(Math.random()*(input+1));
var j = Math.floor(Math.random()*(input+1));

input是在文本框中输入的用于首先生成表格的值。之所以+1是因为发言权函数具有包容性。

您可以通过以下方式引用将要输入随机输入的单元格： document.getElementById(i+'_'+j)。您将在代码中清楚地看到这一点。

如果您愿意，可以执行一个整体功能，但为简单起见，我将其分解为不同的功能，以便于阅读。如果您对某事有疑问，但不确定，请询问。尽管我认为，这应该为您提供了一个很好的起点。

还有一个小提琴供您参考：

https://jsfiddle.net/xh8by90g/

HTML

<div>
  <h1>Multiplication Table Game</h1>
  <p>
    Enter a Number Less than 20
  </p>
  <input type="text" id="inputNumber" name="inputNumber" /> 
  <button type='button' id='startGame'>
    Multiply!
  </button>
</div>

JavaScript

var MAX = 20;

var button = document.getElementById('startGame');

button.addEventListener('click', function(e){
    var oldTable = document.getElementById('multipleTable');
  if(oldTable){
    oldTable.parentNode.removeChild(oldTable);
  }

    var input = document.getElementById('inputNumber').value;
  if(input < MAX){
    var table = document.createElement('table');
    table.setAttribute('id', 'multipleTable');
    table.appendChild(createTableHeader(input));
    for(var i = 0; i <= input; i++){
        var tr = document.createElement('tr');
        var td = document.createElement('td');
      td.innerHTML = i;
      tr.appendChild(td);
      for(var j = 0; j <= input; j++){
        td = document.createElement('td');
        td.innerHTML = '';
        td.setAttribute('id', i+'_'+j);
        td.setAttribute('data-product', i*j);
        tr.appendChild(td);
      }
      table.appendChild(tr);
    }
    document.body.appendChild(table);
    createRandomInput(input, table);
  }
});

function createRandomInput(input, table){
    var i = Math.floor(Math.random()*(parseInt(input)+1));
  var j = Math.floor(Math.random()*(parseInt(input)+1));
  var rand = document.getElementById(i+'_'+j);
  var box = document.createElement('input');
  box.style.width = '25px';
  rand.appendChild(box);
}

function createTableHeader(input){
    var tr = document.createElement('tr');
  var td = document.createElement('td');
  td.innerHTML = "X";
  tr.appendChild(td);
  for(var i = 0; i <= input; i++){
    td = document.createElement('td');
    td.innerHTML = i;
    tr.appendChild(td);
  }
  return tr;
}

Answer 2

请勿使用document.write。它会删除所有内容。
使用特定于TableObject的方法。
单独的HTML代码和样式规则

//define reusable elements
const userInput = document.getElementById("userInput");
const container = document.getElementById('container');

function table_function() {
  //get numeric value from input
  var valUserInput = parseInt(userInput.value);
  //  console.log(valUserInput + 1);
  //empty container
  container.innerHTML = '';
  var tbl = document.createElement('table');
  container.appendChild(tbl);
  //TableObject has its own DOM model and methods
  var row = tbl.insertRow(-1); //add to end
  row.insertCell(-1).innerHTML = 'X';
  //fill in first row
  for (var i = 1; i <= valUserInput; i++) {
    row.insertCell(-1).innerHTML = i;
  }
  //fill in the table
  for (var i = 1; i <= valUserInput; i++) {
    var row = tbl.insertRow(-1);
    row.insertCell(-1).innerHTML = i;//first cell in the row
    for (var j = 1; j <= valUserInput; j++) {
      var rnd = Math.ceil(Math.random() * valUserInput);
      row.insertCell(-1).innerHTML = i == rnd || j == rnd ? '<input type="number" />' : i * j;
    }
  }
}

/* style table content */

#container table tr td {
  border: solid 1px #33f;
  text-align: center;
  vertical-align: middle;
  width: 45px;
  height: 45px
}

#container table input {
  max-width: 42px
}

#container table tr:first-child td,
#container table tr td:first-child {
  background-color: #33f;
  font-weight: bold
}

<h1>Multiplication table game</h1>
<h2>By: Lauren Cerino, Nate Divine, Zack Beucler</h2>
<input id="userInput" type="number" min="2" max="13" />
<button type='button' onclick=table_function()>Multiply!</button>
<div id="container">
</div>

从javascript

2 个答案: