javascriptでテキストボックスの数字に連動して、セレクトボックスを動くようにしたい

前提・実現したいこと

javascriptで
テキストボックスの数字に連動して、
セレクトボックスを動くようにしたいです。

テキストにある数字を使って、
0なら『あ』とセレクトボックスが動き、
1なら『い』とセレクトボックスが動くようにしたいです。

色々と試してみてはみたのですが、
どうすればいいか分からず、ご質問させていただきました。

勉強し始めたばかりのため、色々とおかしいかもしれませんが、よろしくお願いします。

（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>SamPle</title>
<script type="text/javascript">
<!--
/*
function deme1(){
	document.form1.kankyou1.selectedIndex = document.form1.deme1.value;
}*/

/*
function deme1(){
	document.form1.kankyou1.selectedIndex = document.getElementByid("deme1");
}*/
//-->
</script>
</head>
<body>
<form name="form1">

<table border="1">
	<tr>
		<th><select name="kankyou1"><option>あ</option><option>い</option></select></th>
		<th><input id=deme1 name="deme1" type="text" value="0" onchange="deme1()" ></th>
	</tr>
</table>
</form>


	</body>
</html>

試したこと

まずはname属性にして、試してみましたが、上手くいかず、
次にdocument.getElementByidで取れないか試みてみました。
コメントアウトしたものがその実験記録です。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答3件

ベストアンサー

微妙に惜しいです

javascript
1function deme1change(){
2    document.form1.kankyou1.selectedIndex = document.form1.deme1.value;
3}

html
1        <th><input id="deme1" name="deme1" type="text" value="0" onchange="deme1change()" ></th>

質問者のコードが動作しない理由は、関数名と要素名が同じため、deme1がinput要素を指しているからです。
余談ですが、onchengeだとフォーカスアウトしないと動作しませんが、oninputならキー入力に即座に反応します。

投稿2018/11/20 14:08

kaba

総合スコア314

kaba

2018/11/20 14:08

回答がかぶってしまいました

sanag

2018/11/21 13:38

ありがとうございます。ちょうど、onchengeのところを、もっと使いやすく変更できないか考えていました。凄く助かりました。

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

関数名とname属性が被っているのが問題のようです

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>SamPle</title>
6<script type="text/javascript">
7function deme(){
8    document.form1.kankyou1.selectedIndex = document.form1.deme1.value;
9}
10
11/*
12function deme1(){
13    document.form1.kankyou1.selectedIndex = document.getElementByid("deme1");
14}*/
15</script>
16</head>
17<body>
18<form name="form1">
19<table border="1">
20    <tr>
21        <th><select name="kankyou1"><option>あ</option><option>い</option></select></th>
22        <th><input id=deme1 name="deme1" type="text" value="0" onchange="deme()" ></th>
23    </tr>
24</table>
25</form>
26    </body>
27</html>

これで動きましたよ。

投稿2018/11/20 14:03

Takumiboo

総合スコア2534

sanag

2018/11/21 13:37

ありがとうございます。 name属性と関数名は変えておいた方がいいんですね。無事に動きました！！

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

0から始まる数字ではなく任意の文字を利用したいならリストをつくっておきます

javascript
1<script>
2window.addEventListener('DOMContentLoaded', function(e){
3  document.querySelector('#deme1').addEventListener('input',function(e){
4    var l={"hoge":"あ","fuga":"い","piyo":"う"};
5    var v=e.target.value;
6    document.querySelector('[name=kankyou1]').value=(typeof l[v]==="undefined")?"":l[v];
7  });
8});
9</script>
10<form name="form1">
11<select name="kankyou1">
12<option value="">--</option>
13<option>あ</option>
14<option>い</option>
15<option>う</option>
16</select><br>
17<input id=deme1 name="deme1" type="text" value="0">
18</form>