javascriptで "replace is not a function" と出る

#目的
javascriptで全角英数字を半角英数字に変換するアプリを作ろうとしています．
replaceメソッドを使って全角文字を半角文字に変換しようとしているのですが，"replace is not a function"とエラーが出てしまいます．

なぜこのようなエラーが出てしまうのか，また解決方法を教えていただきたいです．
よろしくお願いいたします．

#エラーメッセージ
Uncaught TypeError: text.replace is not a function
at HTMLButtonElement.<anonymous> (main.js:6)
(anonymous) @ main.js:6
#ソース

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <title>全角数字 -> 半角数字</title>
6    <link rel="stylesheet" href="styles.css">
7  </head>
8  <body>
9    全角英数字を半角英数字に直します
10    <table>
11      <tr>
12        <td><textarea id="text" rows="30" cols="80" placeholder="ここにテキストを入力"></textarea></td>
13        <td>>>></td>
14        <td><textarea id="result" rows="30" cols="80" placeholder="結果が表示されます"></textarea></td>
15      </tr>
16    </table>
17    <button type="button" id="btn">実行</button>
18    <script src="main.js"></script>
19  </body>
20</html>

javascript
1(function () {
2  'use strict';
3
4  document.getElementById('btn').addEventListener('click', function(){
5    document.getElementById('text').value;
6    text.replace(/[Ａ-Ｚａ-ｚ０-９]/g, function(s) {
7      return String.fromCharCode(s.charCodeAt(0) - 65248);
8    });
9    document.getElementById('result').value += text;
10  });
11
12})();

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

回答1件

ベストアンサー

以下のようにすることで質問者さんが実現したいことが行えると思いますが、いかがでしょうか？

HTML
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="utf-8">
5    <title>全角数字 -> 半角数字</title>
6    <link rel="stylesheet" href="styles.css">
7</head>
8<body>
9全角英数字を半角英数字に直します
10<table>
11    <tr>
12        <td><textarea id="text" rows="30" cols="80" placeholder="ここにテキストを入力"></textarea></td>
13        <td>>>></td>
14        <td><textarea id="result" rows="30" cols="80" placeholder="結果が表示されます"></textarea></td>
15    </tr>
16</table>
17<button type="button" id="btn">実行</button>
18<script>
19    (function () {
20        'use strict';
21
22        document.getElementById('btn').addEventListener('click', function () {
23            var text = document.getElementById('text').value;
24            text = text.replace(/[Ａ-Ｚａ-ｚ０-９]/g, function (s) {
25                return String.fromCharCode(s.charCodeAt(0) - 65248);
26            });
27            document.getElementById('result').value += text;
28        });
29
30    })();
31</script>
32</body>
33</html>

投稿2017/12/16 06:52

s8_chu

総合スコア14731

退会済みユーザー

2017/12/16 06:59

ありがとうございます，できました．しかし，なぜ成功したのかが知りたいです．私の方法は何が間違っていたのでしょうか？

s8_chu

2017/12/16 07:09 編集

以下の2点かと思います。 - 変数textにtextareaの値を設定する必要があったのにしていなかった - replaceメソッドは、設定した正規表現にマッチした文字列を置換した文字列を返すもので、変数textの値が変化するわけではないため、何かしらの変数に結果を入れて扱う必要があったがそうしていなかった

退会済みユーザー

2017/12/16 07:18

ありがとうございます．理解できました．

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