Javascript table input

Question

I'm currently doing a project on creating a webpage. I want to make the cells have input based on what I type in. But I can't think of any way to make it simpler. I'm still new to javascript so please bear with me.

function getInput(){
	var input = prompt("Please enter your plan here");
	document.getElementById("data").innerHTML = input;
}
function getInput1(){
	var input = prompt("Please enter your plan here");
	document.getElementById("data1").innerHTML = input;
}
function getInput2(){
	var input = prompt("Please enter your plan here");
	document.getElementById("data2").innerHTML = input;
}
function getInput3(){
	var input = prompt("Please enter your plan here");
	document.getElementById("data3").innerHTML = input;
}
function getInput4(){
	var input = prompt("Please enter your plan here");
	document.getElementById("data4").innerHTML = input;
}
function getInput5(){
	var input = prompt("Please enter your plan here");
	document.getElementById("data5").innerHTML = input;
}
function getInput6(){
	var input = prompt("Please enter your plan here");
	document.getElementById("data6").innerHTML = input;
}
function getInput7(){
	var input = prompt("Please enter your plan here");
	document.getElementById("data7").innerHTML = input;
}
function getInput8(){
	var input = prompt("Please enter your plan here");
	document.getElementById("data8").innerHTML = input;
}
function getInput9(){
	var input = prompt("Please enter your plan here");
	document.getElementById("data9").innerHTML = input;
}
function getInput10(){
	var input = prompt("Please enter your plan here");
	document.getElementById("data10").innerHTML = input;
}
function getInput11(){
	var input = prompt("Please enter your plan here");
	document.getElementById("data11").innerHTML = input;
}
function getInput12(){
	var input = prompt("Please enter your plan here");
	document.getElementById("data12").innerHTML = input;
}
function getInput13(){
	var input = prompt("Please enter your plan here");
	document.getElementById("data13").innerHTML = input;
}
function getInput14(){
	var input = prompt("Please enter your plan here");
	document.getElementById("data14").innerHTML = input;
}
function getInput15(){
	var input = prompt("Please enter your plan here");
	document.getElementById("data15").innerHTML = input;
}
function getInput16(){
	var input = prompt("Please enter your plan here");
	document.getElementById("data16").innerHTML = input;
}
function getInput17(){
	var input = prompt("Please enter your plan here");
	document.getElementById("data17").innerHTML = input;
}
function getInput18(){
	var input = prompt("Please enter your plan here");
	document.getElementById("data18").innerHTML = input;
}
function getInput19(){
	var input = prompt("Please enter your plan here");
	document.getElementById("data19").innerHTML = input;
}
function getInput20(){
	var input = prompt("Please enter your plan here");
	document.getElementById("data20").innerHTML = input;
}

<table>    
<tr>
		<td class="tg-031e">0000</td>
		<td class="tg-031e" id="data" onclick="getInput()"></td>
		<td class="tg-031e" id="data1" onclick="getInput1()"></td>
    <td class="tg-031e" id="data2" onclick="getInput2()"></td>
    <td class="tg-031e" id="data3" onclick="getInput3()"></td>
    <td class="tg-031e" id="data4" onclick="getInput4()"></td>
    <td class="tg-031e" id="data5" onclick="getInput5()"></td>
    <td class="tg-031e" id="data6" onclick="getInput6()"></td>
  </tr>
    <tr>
		<td class="tg-031e">0100</td>
		<td class="tg-031e" id="data7" onclick="getInput7()"></td>
    <td class="tg-031e" id="data8" onclick="getInput8()"></td>
    <td class="tg-031e" id="data9" onclick="getInput9()"></td>
    <td class="tg-031e" id="data10" onclick="getInput10()"></td>
    <td class="tg-031e" id="data11" onclick="getInput11()"></td>
    <td class="tg-031e" id="data12" onclick="getInput12()"></td>
    <td class="tg-031e" id="data13" onclick="getInput13()"></td>
  </tr>
    <tr>
	<td class="tg-031e">0200</td>
	<td class="tg-031e" id="data14" onclick="getInput14()"></td>
    <td class="tg-031e" id="data15" onclick="getInput15()"></td>
    <td class="tg-031e" id="data16" onclick="getInput16()"></td>
    <td class="tg-031e" id="data17" onclick="getInput17()"></td>
    <td class="tg-031e" id="data18" onclick="getInput18()"></td>
    <td class="tg-031e" id="data19" onclick="getInput19()"></td>
    <td class="tg-031e" id="data20" onclick="getInput20()"></td>
  </tr>
</table>

I would edit the title to reflect what the question is about. If people get an idea of what the question is about they are more likely to view your question and provide an answer. — jsondwyer
– jsondwyer, Commented Jul 21, 2016 at 4:37

Hector Barbossa · Accepted Answer · 2016-07-21 04:54:24Z

1

You can re-write your getInput function to accept this. Like below

function getInput(that){
    var input = prompt("Please enter your plan here");
    that.innerHTML = input;
}

and then you can use this as your onclick handler for all the cells. Like

<td class="tg-031e" id="data10" onclick="getInput(this)"></td>
<td class="tg-031e" id="data11" onclick="getInput(this)"></td>
<td class="tg-031e" id="data12" onclick="getInput(this)"></td>
<td class="tg-031e" id="data13" onclick="getInput(this)"></td> ...

Heres a link to a Fiddle.

edited Jul 21, 2016 at 4:54

answered Jul 21, 2016 at 4:48

Hector Barbossa

5,53813 gold badges51 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

castletheperson Over a year ago

You don't need the document.getElementById. Just do that.innerHTML = input;

Elias Chew Over a year ago

Thanks for helping me @HectorBarbossa. I got my code working now

Hector Barbossa Over a year ago

@EliasChew Glad it helped. If this answer or any other one solved your issue, please mark as accepted.

Elias Chew Over a year ago

@HectorBarbossa How do i do that?

Piyush.kapoor · Accepted Answer · 2016-07-21 04:54:37Z

0

You can have one function and just pass it in the id and call that function respective times.

function getInput(id){
    var input = prompt("Please enter your plan here");
    document.getElementById(id).innerHTML = input;
}

answered Jul 21, 2016 at 4:54

Piyush.kapoor

6,8311 gold badge25 silver badges21 bronze badges

Collectives™ on Stack Overflow

Javascript table input

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related