Making a html table cell into a html input field from javascript

Question

In the program, the user inputs a number and then a multiplication table shows up of that number (EX: userInput=13 ==> a 13 times table appears (see img below for an example)). I need the javascript to randomly pick a cell in the table and change it into a input field but all my attempts come up flat. Thank you! LMK if you'd like some more explanation.

EX: 13 times table 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

Alright I took a stab at this and this is what I have come up with:

To create the random input what I did was store the position of the cell in a data attribute on the table cell at position i_j . You can calculate the random position of the cell by:

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

Where the input is the value that was entered in your text box to generate the table in the first place. The +1 is because the floor function is inclusive.

You can reference the cell that you are going to put the random input in by: document.getElementById(i+'_'+j) . You will see this demonstrated clearly in the code.

If you choose to you can do it one monolithic function, but for simplicity I broke it up into different functions so that it was a little easier to read. If you have questions on something and you are not sure, please ask. This should give you a good starting point for where you are trying to get though I would think.

There is also a fiddle you can reference here:

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

1. Don't use document.write . It removes all content.
2. Use methods specific to TableObject .
3. Separate HTML code and style rules

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