ボタンでテキスト入力欄に反映

html
1<body>
2番号：<input type="number" id="bango">
3
4<table border="1">
5            <thead>
6                <tr>
7                    <th>もの</th>
8                    <th>番号</th>
9                </tr>
10            </thead>
11            <tbody>
12                <tr>
13                    <td><input type="button" value="リンゴ" onclick="ringo()"></td>
14                    <td>1</td>
15                </tr>
16<script>
17     function ringo(){
18              **???**
19}
20</script>
21
22</body>
23

例えばなのですが、リンゴのボタンを押すと番号のテキスト欄に”1”が反映させるようにすることは可能でしょうか。
方法があれば教えていただきたいです。

行動規範の内容に同意します

回答2件

相対位置を使うとこんな感じ

javascript
1<script>
2function ringo(obj){
3  document.querySelector('#bango').value=obj.closest('td').nextElementSibling.textContent;
4}
5</script>
6番号：<input type="number" id="bango">
7<table border="1">
8<thead>
9<tr>
10<th>もの</th>
11<th>番号</th>
12</tr>
13</thead>
14<tbody>
15<tr>
16<td><input type="button" value="リンゴ" onclick="ringo(this)"></td>
17<td>1</td>
18</tr>
19<tr>
20<td><input type="button" value="リンゴ" onclick="ringo(this)"></td>
21<td>2</td>
22</tr>
23</tbody>
24</table>
25

投稿2021/11/29 00:23

yambejp

総合スコア115012

ripan

2021/11/30 00:26

違うパターンも教えていただきありがとうございます！とても勉強になりました

行動規範の内容に同意します

ベストアンサー

こんな感じでしょうか？

html
1<body>
2番号：<input type="number" id="bango">
3
4<table border="1">
5    <thead>
6        <tr>
7            <th>もの</th>
8            <th>番号</th>
9        </tr>
10    </thead>
11    <tbody>
12        <tr>
13            <td><input type="button" value="リンゴ" onclick="ringo()"></td>
14            <td id="ringo_no">1</td>
15        </tr>
16    </tbody>
17</table>
18<script>
19function ringo(){
20    let bango = document.getElementById("bango");
21    let ringo_no = document.getElementById("ringo_no");
22    bango.value = ringo_no.textContent;
23}
24</script>
25</body>