全角を半角に変換するがうまくいかない

質問

https://webllica.com/change-double-byte-to-half-width/
を使って全角の数値や英数で回答されても

半角に変換して正解にするクイズを作りたいのですが、全角を入れると偽のほうが実行されてしまいます。

https://codepen.io/anon/pen/gKmgNQ

インスペクタで確認したところ、全角の１を入力すると半角の1に変換されるように見えるのになぜでしょうか？

まさか文字列と数値の問題かと思い==と二つにしても変わりません。

回答No.1

t_ohta · ベストアンサー

inputAnswer は文字列型の変数ですから value などというプロパティは存在しません。
判定を
if (inputAnswer === '1') {
とすれば望まれているような判定結果になります。

お礼

確かにそのまま入力した値を変数に入れずに判定する場合はvalueをつけても大丈夫ですが一度valueの値を変数に入れた場合はvalueをつけてはいけなかったですね。
確認してみます。

補足

https://webllica.com/change-double-byte-to-half-width/

で確認してみました。

Aをaにする機能はないようですね。あくまで全角のAを半角のAにするだけのようですね。

回答No.5

t_ohta

＞　if (inputAnswer == １)となっていました。おかげさまで数値はうまくいきました。ただaとここにいれて
＞　入力欄にAと入れてもうまくいきませんがこれは数値だけではないはずですよね。

「if (inputAnswer == 'A')」であれば入力欄に「Ａ」と全角大文字のエーを入れれば「真」と判定されますが、入力欄に「ａ」と全角小文字のエーを入れても大文字と小文字は違う文字ですから「偽」と判定されます。
アルファベットの大文字、小文字を正規化して判定したい場合は「inputAnswer.toLowerCase()」として小文字に統一して判定するか、「inputAnswer.toUpperCase()」として大文字に統一して判定するしかありません。

お礼

inputAnswer.toLowerCase()として返り血を変数に入れて判定すればAをaに変換できるのですね。やってみます。ありがとうございました。

回答No.4

t_ohta

＞　入力された文字列で真偽判定したいのは、inputAnswer.value === '1'のほうです。ここに12345とどの数値を閲覧者さんが入力したかを判定して、
＞　例えば1を入力してほしい場合は１を入力してくれたら真をそれ以外の数値や文字列なら偽を実行したいということです。

その趣旨は理解していますが、「if (inputAnswer === '1') {」の前に「if (randomNum === 0) {」と言う判定が入っていますので、こちらが「真」にならない限り「inputAnswer」の中身は判定されません。
なので、先の回答に書いた通り私の手元では「if (randomNum === 0) {」と言う判定を省いて実行した所、意図した通りの動作をしました。

お礼

確かにわかりずらいので下記のみでお考えいただいた方がいいですね。
if (inputAnswer.value === '1') {

} else {
}

それでは下記であればどんな環境でも全角で１と入力されてもちゃんと半角に変換されてちゃんと真になるということですね。
https://codepen.io/anon/pen/BVdgwp

私の環境だとならないのはいったいなぜだと思いますか？
私の記憶違いでしょうか？

補足

if (inputAnswer == １)となっていました。おかげさまで数値はうまくいきました。ただaとここにいれて
入力欄にA
と入れてもうまくいきませんがこれは数値だけではないはずですよね。

別質問が良ければそうします。

回答No.3

t_ohta

＞　数値を入力しても、文字列に変換されていると言う事でしょうか?

全角の数字はプログラミング言語では「数値」では無く「文字列」として扱われます。
toHalfWidth() 関数内では受け取った文字列を一文字ずつ文字コードを取り出し、全角半角のコードの差の分を計算して半角文字の文字コードを導き出し、文字コードを文字に変換するという処理をしていますから、戻り値は文字列です。

＞　のように変更して、大文字の１を入力して確認しても偽が出てしまいます。
まだおかしいでしょうか？
＞　それともここは正しいので、ここにない部分の問題でしょうか？

公開されていない部分で何をしているか判らないので randomNum 変数の中身が何なのか判断できないので、「if (randomNum === 0)」がどのように判定されるか分かりません。
ここが「真」になっていると仮定して
==========
var Answerhalf = "１";
var inputAnswer = toHalfWidth(Answerhalf);

if (inputAnswer == 1) {
document.write("TRUE");
} else {
document.write("FALSE");
}

/**
* 全角から半角への変革関数
* 入力値の英数記号を半角変換して返却
* [引数] strVal: 入力値
* [返却値] String(): 半角変換された文字列
*/
function toHalfWidth(strVal){
// 半角変換
var halfVal = strVal.replace(/[！-～]/g,
function( tmpStr ) {
// 文字コードをシフト
return String.fromCharCode( tmpStr.charCodeAt(0) - 0xFEE0 );
}
);

// 文字コードシフトで対応できない文字の変換
return halfVal.replace(/”/g, "\"")
.replace(/’/g, "'")
.replace(/‘/g, "`")
.replace(/￥/g, "\\")
.replace(/　/g, " ")
.replace(/～/g, "~");
}
==========
として実行したら「TRUE」が表示されました。

お礼

うまく伝わっておらずに恐縮です。
入力された文字列で真偽判定したいのは、inputAnswer.value === '1'のほうです。ここに12345とどの数値を閲覧者さんが入力したかを判定して、
例えば1を入力してほしい場合は１を入力してくれたら真をそれ以外の数値や文字列なら偽を実行したいということです。

if (randomNum === 0) {
if (inputAnswer.value === '1') {

} else {
}
}

補足

var Answerhalf = "１（全角）";を例の関数で変換してから判定するとちゃんと半角になっているならもしかするとinputタグに入力してもらうPCやスマホの１が数値となるからなのでしょうか？

＞＞＞
全角の数字はプログラミング言語では「数値」では無く「文字列」として扱われます。

ただこれを見ると、入力欄に入力してもらった１は、必ず文字列の１として利用されると考えるべきなのでしょうか？
すると入力者がどんな環境で入力しても数値ではなく文字列になっているのでこの可能性は０なんですかね？

回答No.2

t_ohta

＞　確かにそのまま入力した値を変数に入れずに判定する場合はvalueをつけても大丈夫ですが

input タグをJavaScriptで取得した場合は単純な変数では無くオブジェクトインスタンスですからプロパティ名を指定しないと値は取り出せないので、「valueをつけても大丈夫」なのでは無く「valueをつけてる必要がある」です。

貴方が作った toHalfWidth() 関数は戻り値として文字列型の変数を return しているので、inputAnswer 変数は単純な文字列型の変数になります。
扱っている変数の中身がどんなモノなのか正しく認識してコーディングしないとプログラムは正しく動きません。

お礼

数値を入力しても、文字列に変換されていると言う事でしょうか?

補足

その後
https://codepen.io/anon/pen/BVdgwp

のように変更して、大文字の１を入力して確認しても偽が出てしまいます。
まだおかしいでしょうか？
それともここは正しいので、ここにない部分の問題でしょうか？