Change the value of an element of a table by clicking on the corresponding box

Navigation
0

I have the following code: 

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="estilos.css">
        <script src="ejercicio3.js" type="text/javascript"></script>
</head>
<body>
	<div>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mattis enim vitae orci. Phasellus libero. Maecenas nisl arcu, consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien nunc, posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id, aliquam vitae, ultrices porttitor, pede. Nullam sit amet nisl elementum elit convallis malesuada. Phasellus magna sem, semper quis, faucibus ut, rhoncus non, mi. Duis pellentesque, felis eu adipiscing ullamcorper, odio urna consequat arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis scelerisque.<br>
        <input type="button" value="+">
        <input type="button" value="-">
	</div>
	<div>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mattis enim vitae orci. Phasellus libero. Maecenas nisl arcu, consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien nunc, posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id, aliquam vitae, ultrices porttitor, pede. Nullam sit amet nisl elementum elit convallis malesuada. Phasellus magna sem, semper quis, faucibus ut, rhoncus non, mi. Duis pellentesque, felis eu adipiscing ullamcorper, odio urna consequat arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis scelerisque.<br>
        <input type="button" value="+">
        <input type="button" value="-">
	</div>
	<div>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mattis enim vitae orci. Phasellus libero. Maecenas nisl arcu, consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien nunc, posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id, aliquam vitae, ultrices porttitor, pede. Nullam sit amet nisl elementum elit convallis malesuada. Phasellus magna sem, semper quis, faucibus ut, rhoncus non, mi. Duis pellentesque, felis eu adipiscing ullamcorper, odio urna consequat arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis scelerisque.<br>
        <input type="button" value="+">
        <input type="button" value="-">
	</div>
	<table border="1"><tbody><tr><td >1</td><td >2</td><td >3</td><td >4</td><td >5</td><td >6</td><td >7</td><td >8</td><td >9</td><td >10</td><td >11</td><td >12</td><td >13</td><td >14</td><td >15</td><td >16</td><td >17</td><td >18</td><td >19</td><td >20</td></tr><tr><td >2</td><td >4</td><td >6</td><td >8</td><td >10</td><td >12</td><td >14</td><td >16</td><td >18</td><td >20</td><td >22</td><td >24</td><td >26</td><td >28</td><td >30</td><td >32</td><td >34</td><td >36</td><td >38</td><td >40</td></tr><tr><td >3</td><td >6</td><td >9</td><td >12</td><td >15</td><td >18</td><td >21</td><td >24</td><td >27</td><td >30</td><td >33</td><td >36</td><td >39</td><td >42</td><td >45</td><td >48</td><td >51</td><td >54</td><td >57</td><td >60</td></tr><tr><td >4</td><td >8</td><td >12</td><td >16</td><td >20</td><td >24</td><td >28</td><td >32</td><td >36</td><td >40</td><td >44</td><td >48</td><td >52</td><td >56</td><td >60</td><td >64</td><td >68</td><td >72</td><td >76</td><td >80</td></tr><tr><td >5</td><td >10</td><td >15</td><td >20</td><td >25</td><td >30</td><td >35</td><td >40</td><td >45</td><td >50</td><td >55</td><td >60</td><td >65</td><td >70</td><td >75</td><td >80</td><td >85</td><td >90</td><td >95</td><td >100</td></tr><tr><td >6</td><td >12</td><td >18</td><td >24</td><td >30</td><td >36</td><td >42</td><td >48</td><td >54</td><td >60</td><td >66</td><td >72</td><td >78</td><td >84</td><td >90</td><td >96</td><td >102</td><td >108</td><td >114</td><td >120</td></tr><tr><td >7</td><td >14</td><td >21</td><td >28</td><td >35</td><td >42</td><td >49</td><td >56</td><td >63</td><td >70</td><td >77</td><td >84</td><td >91</td><td >98</td><td >105</td><td >112</td><td >119</td><td >126</td><td >133</td><td >140</td></tr><tr><td >8</td><td >16</td><td >24</td><td >32</td><td >40</td><td >48</td><td >56</td><td >64</td><td >72</td><td >80</td><td >88</td><td >96</td><td >104</td><td >112</td><td >120</td><td >128</td><td >136</td><td >144</td><td >152</td><td >160</td></tr><tr><td >9</td><td >18</td><td >27</td><td >36</td><td >45</td><td >54</td><td >63</td><td >72</td><td >81</td><td >90</td><td >99</td><td >108</td><td >117</td><td >126</td><td >135</td><td >144</td><td >153</td><td >162</td><td >171</td><td >180</td></tr><tr><td >10</td><td >20</td><td >30</td><td >40</td><td >50</td><td >60</td><td >70</td><td >80</td><td >90</td><td >100</td><td >110</td><td >120</td><td >130</td><td >140</td><td >150</td><td >160</td><td >170</td><td >180</td><td >190</td><td >200</td></tr></tbody></table>
</body>
</html>

I need the user to click left and add one to the value of the td in question without reaching 200 and, if right click, subtract one without being negative.

    
asked by Nicolás Figueras Parras 14.12.2018 в 12:50
source

1 answer

0

You create a click event on your table.

e.srcElement picks the selected item, once you have it you can manipulate it to your liking. 

  document.getElementById("idDeTuTabla").addEventListener("click",function (e) {

            console.log("texto del td: " + e.srcElement.innerHTML);

    } );
    
answered by 14.12.2018 в 13:50
Replace Return of Carriage and Line Feed CrLf in a Stream fetch javascript api