javascriptで回文を作るプログラムを書いています（※回文を判定するプログラムではありません）

前提・実現したいこと

javascriptで回文を作るページを作っています（回文を判定するものではありません）。
回文を作る公式的なものは分かりましたが、全く動きません...

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

Uncaught TypeError: document.getElementById(...).charAt is not a function
    at kaibun (練習2.html:10)
    at HTMLButtonElement.onclick (練習2.html:22)

該当のソースコード

javascript
1
2      <!DOCTYPE html>
3<html lang="ja">
4    <head>
5        <meta charset="UTF-8">
6        <script>
7            function kaibun(){
8                let N=0;
9                let total=0;
10                let l=document.getElementById("source").length; 
11                let n=document.getElementById("source").charAt(N);
12                
13
14                for(let i=0;i<=l;i=n(l-1)-2n*(i++)){
15                total+=i;
16                }
17                document.getElementById("total").textContent = result;
18            }
19        </script>
20    </head>
21    <body>
22        <input id="source" value="こんばんは"/>
23        <button onclick="kaibun()">回文</button>
24        <p id="result"></p>
25    </body>
26</html>

試したこと

for文の中はかなり弄りました

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

ブラウザはchrome、ツールはVisual Studio Codeです。

momon-ga

2020/10/14 12:49

"N is not defined"と、ありますが意味(と対応方法)は調べましたか？

bot73145848

2020/10/14 13:20

ご回答ありがとうございます！すみません、エラーメッセージを読む前に質問しちゃってますね・・・ mozillaなどを読みながら編集しました（残念ながらまだ動きませんが）。

Jon_do

2020/10/14 13:46

例えば、こんばんわと打ち込んだ場合出力結果で望んでいるのは ①こんばんわんばんこ ②こんばんわわんばんこどちらでしょうか？

bot73145848

2020/10/14 14:38

返信遅れてすみません。②です。わんばんこ、が出力されて欲しいです。

yambejp

2020/10/15 00:55

「わんばんこ」は回文ではないですよ

bot73145848

2020/10/16 12:07

回文というか、後ろから読んだら元の文になるようなプログラムを作りたいので、「わんばんこ」で大丈夫です。

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

回答3件

（×）let n=document.getElementById("source").charAt(N);
（○）let n=document.getElementById("source").value.charAt(N);

**charAt(N)**は取得したテキスト（こんばんは）のN番目の文字を取得する操作です。
**document.getElementById("source")**で取得しているのはテキストではなく、
<input id="source" value="こんばんは" />です。
このinputタグ内のテキストであるvalue部分を取るため、.valueを追記しました。
エラー文からもcharAtが使える関数になっていないことが分かりましたので、エラー文から読み取る力を身に付けましょう。僕も習得中です。

この後もエラーが発生しています。
ケアレスミスもあると思いますので、一度再考してみてください。

投稿2020/10/14 14:05

編集2020/10/14 14:14

chemicalist11

総合スコア44

bot73145848

2020/10/14 14:54

ご回答ありがとうございます！もう一度編集してみます。

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

javascript
1var a = "こんばんわ";
2var b = a.split("").reverse().join("");
3console.log(b)

投稿2020/10/15 00:57

yambejp

総合スコア115010

yambejp

2020/10/15 00:59

回文ならこう？ var b = a.substr(0,a.length-1)+a.split("").reverse().join("");

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

ベストアンサー

全く動きません.

kaibun() 関数の最初でエラーとなるので、（以降の処理に進まず）全く動かない結果になっています。

HTML をJavaScriptで扱う場合、マークアップ構造とDOMのAPIとが密接に関係しています。
ご質問のコードで再確認すべき点は大きく２つです。

1) HTMLInputElement に無いプロパティを参照しようとしている

diff
1- let l=document.getElementById("source").length; 
2+ let l=document.getElementById("source").value.length; 
3- let n=document.getElementById("source").charAt(N);
4+ let n=document.getElementById("source").value.charAt(N);

2) 検証に至っていないステートメントがある

document.getElementById("total").textContent = result;

total という id属性値が HTML内に確認できない
result という変数は JavaScriptコード内で宣言されていない。

全く動かなかったために、検証できていなかったものと思います。

操作対象のhtml要素は、APIを頻繁に使うと見通しが悪くなるので、変数に格納しておく方法もあります。

html
1<script>
2  function kaibun(){
3    // 操作対象のhtml要素を変数に格納
4    let src = document.getElementById("source");
5    let dst = document.getElementById("result"); // html の id属性に合わせる。
6
7    // 文字列処理（回文作成）
8    let val = src.value; // 入力値（回文の前半）
9    // 回文の後半を作成
10    let tmp = val.split("").reverse() // 回文の前半を 一旦、配列化して反転
11      .slice(1) // 最初の１文字は前半と重複する文字なので2文字目以降を取り出す
12      .join(""); // 配列を文字列に戻す
13
14    dst.textContent = val + tmp;
15  }
16</script>

CODEPEN 動くサンプル

投稿2020/10/16 05:31

編集2020/10/16 05:52

AkitoshiManabe

総合スコア5434

bot73145848

2020/10/16 12:22

ご回答ありがとうございます！ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <script> function kaibun(){ let N=0; let total=""; let src=document.getElementById("source"); let dst=document.getElementById("result"); let val= src.value; let tmp = val.split("").reverse().slice(1).join(""); dst.textContent = val + tmp; total+=i; document.getElementById("result").textContent = total; } </script> </head> <body> <input id="source" value="こんばんは"/> <button onclick="kaibun()">回文</button> <p id="result"></p> </body> </html> と直してみました。無事動きました！もう少し手直ししてみます。ありがとうございました。

bot73145848

2020/10/16 12:31

追記：total+=i ,document...total;の部分削ったほうが良かったですね。すみませんでした。

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

あなたの回答