配列のなかの単語が何番目なのかを，indexOfを用いて，取得したいのにできない（

前提・実現したいこと

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

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

テキストボックスに，バナナと入力したときに，window.alert(number)により，アラートで「１」と帰ってきてほしいのに，「ー１」となってしまう。

該当のソースコード

javascript
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<title>サンプル</title>
6</head>
7<body>
8
9
10<p>
11<input type="text" id="nameText">
12<input type="button" value="Check" id="checkButton">
13</p>
14
15<p id="msg"></p>
16<p id="mm"></p>
17
18<script>
19function butotnClick(){
20  msg.innerText =  get.value;
21  window.alert(number);
22}
23
24//コメントに対する返答方法
25var value=['リンゴ', 'バナナ', 'メロン'];
26
27//入力された内容をゲット
28var get=document.getElementById("nameText");
29
30//ゲットされた内容の中のがバリューの何番目かを確かめる
31var number=value.indexOf(get.value);
32
33//ｐを取得する
34var msg = document.getElementById('msg');
35
36//ボタン自体を取得
37var checkButton = document.getElementById('checkButton');
38
39//ボタンをクリックしたときに発動させること
40checkButton.addEventListener('click', butotnClick);
41
42</script>
43
44</body>
45</html>
46
47

試したこと

var number=value.indexOf(get.value);
のget.valueの部分を，nameText.valueにするなど

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

回答5件

//入力された内容をゲット
var get=document.getElementById("nameText");

//ゲットされた内容の中のがバリューの何番目かを確かめる
var number=value.indexOf(get.value);

をfunction butotnClickの中にいれると，解決できました。

投稿2021/10/04 13:19

kagar

総合スコア0

javascript
1function butotnClick(){
2  msg.innerText =  get.value;
3  var number=value.indexOf(get.value);
4  window.alert(number);
5}

butotnClick()内でvalueからget.valueをチェックしないと入力後の文字はチェックできません

投稿2021/10/04 12:44

yambejp

総合スコア116724

JavaScript
1var number=value.indexOf(get.value);

この部分が実行されるのがボタンクリックした時ではなくイベント登録する前だから、『バナナ』と入力する前にnumberは**-1**になっています。

投稿2021/10/04 12:43

ishina_yum

総合スコア509

とりあえず・・・

ページが読み込まれてスクリプトの実行が始まります。
そこでユーザーが何もアクションしていなくても

JavaScript
1var get=document.getElementById("nameText");
2var number=value.indexOf(get.value);

が実行されています。
当然get.valueは空ですよね。

ボタンが押されたときに値を取得するように制御する必要があるということです。

リクエストがあったので…

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8">
5    <title>サンプル</title>
6  </head>
7  <body>
8
9    <p>
10      <input type="text" id="nameText">
11      <input type="button" value="Check" id="checkButton" onclick="buttonClick();">
12    </p>
13
14    <p id="msg"></p>
15    <p id="mm"></p>
16
17    <script>
18      const valueList = ['リンゴ', 'バナナ', 'メロン'];
19      const nameText = document.getElementById("nameText");
20      const msg = document.getElementById('msg');
21      const mm = document.getElementById('mm');
22      function buttonClick() {
23        let inputValue = nameText.value;
24        msg.innerText = inputValue;
25        mm.innerText = valueList.indexOf(inputValue);
26      }
27    </script>
28
29</body>
30</html>