I have a table and in the table, I have tag to get user input. I want to print or get the value from the table cell. I want to input two number such as 12 and 14 and then print sum value at result id. I don’t want to use the form tag. Is it possible to do this? Thanks.
for(i=0;i<x.length-1;i++) { result=x[i].cellIndex + x[i+1].cellIndex; document.getElementById("result").innerHTML=result; }
<!DOCTYPE HTML> <html> <body> <table> <tr> <td> <input id="firstnumber" type="number"> </td> <td> <input id="secondNumber" type="number"> </td> </tr> <p id="result"></p> </table> </body> </html>
Advertisement
Answer
Here is a working example
// get the Dom object of the ttwo cells var cell1 = document.querySelector("#firstnumber"), cell2 = document.querySelector("#secondNumber"); // when the user writes on each of them the result changes cell1.oninput = cell2.oninput = function() { // + before the cell.value only for casting the string to a number document.getElementById("result").innerHTML = +cell1.value + +cell2.value; }
<!DOCTYPE HTML> <html> <body> <table> <tr> <td> <input id="firstnumber" type="number"> </td> <td> <input id="secondNumber" type="number"> </td> </tr> <p id="result"></p> </table> </body> </html>