Variable Input appearance and placement. I want each input variable to be placed in their own <td-CodePudding

IMAGE 1: https://i.stack.imgur.com/BCTFE.png

how do I get Input variables to display in different html TD boxes? I have 3 TD side by side, I want input 1 to be under TD1, Input 2 to be under TD2 and Input 3 to be under TD3. However I am getting all inputs under TD1 and not the the rest.

HTML

    <input type="text" id="inputTask" placeholder="Enter your your task">
    <button onclick="addTask()">Add</button>

<main>
    <table>
        <tr>
            
            <td >Task description 1</td>
            <td >Task description 2</td>
            <td >Task description 3</td>
        </tr>
        <tr> 
           <td id="taskName"></td>
           <td id="taskName"></td>
           <td id="taskName"></td>
        </tr>

JAVASCRIPT

function addTask() {
let inputTask = document.getElementById('inputTask');
console.log(inputTask.value); 

let ul = document.getElementById('taskName');
ul.innerHTML = `<p >${inputTask.value}</p>`; 
inputTask.value = '';

}

CodePudding user response：

First of all, element ids should be unique. You have three tds with the same ID, which is bad to begin with.

If you want to add an input field to each td in turn (that is, if you click Add button twice, it adds the input to the first td and then second td), you need two things:

Unique identifier for each td
Global index that keeps track of which is the "current" td to add the input to.

Here's the solution:

let currentIndex = 0;

function addTask() {
  let inputTask = document.getElementById('inputTask');
  console.log(inputTask.value);

  let ul = document.getElementById(`taskName-${currentIndex}`);
  ul.innerHTML  = `<p >${inputTask.value}</p>`;
  inputTask.value = '';
  
  currentIndex = (currentIndex   1) % 3;
}

td {
  border: 1px solid;
}

<input type="text" id="inputTask" placeholder="Enter your your task">
<button onclick="addTask()">Add</button>

<main>
  <table>
    <tr>
      <td >Task description 1</td>
      <td >Task description 2</td>
      <td >Task description 3</td>
    </tr>
    <tr>
      <td id="taskName-0"></td>
      <td id="taskName-1"></td>
      <td id="taskName-2"></td>
    </tr>
</main>

CodePudding user response：

i guess this might work for you.

function addTask() {
    let inputTd = document.getElementById('tdInput');
    let inputTask = document.getElementById('inputTask');
      
    let tdOne = document.getElementById('taskName1');
    let tdTwo = document.getElementById('taskName2');
    let tdThree = document.getElementById('taskName3');
    if(inputTask.value != ""){
        if(inputTd.value == 1){
            tdOne.insertAdjacentHTML('beforeend', '<p>' inputTask.value '</p>');
        }else if(inputTd.value == 2){
            tdTwo.insertAdjacentHTML('beforeend', '<p>' inputTask.value '</p>');
        }else{
            tdThree.insertAdjacentHTML('beforeend', '<p>' inputTask.value '</p>');
        } 
    }else{
      alert("Please insert your task!");
    }
  inputTask.value = "";
};

<label>Choose TD :</label>
<select id="tdInput">
  <option value="1">TD1</option>
  <option value="2">TD2</option>
  <option value="3">TD3</option>
</select>

<input type="text" id="inputTask" placeholder="Enter your your task">
<button id="addTask" type="button" onClick="addTask()">Add</button>
<br><br>
<table border="1">
  <tr>
    <td >Task description 1</td>
    <td >Task description 2</td>
    <td >Task description 3</td>
  </tr>
  <tr> 
    <td id="taskName1"></td>
    <td id="taskName2"></td>
    <td id="taskName3"></td>
  </tr>
</table>