Function内の変数を出力したい (javascript)

Question

以下でalertが'0123456789'と表示されるようにしたいのですが、functionの括弧内をalert上に表示させることができません。何かヒントはないでしょうか？

※ありがとうございます。function内の括弧にcheckが入ったままの状態がデフォルトで動かせない状況です。

Comments

[date]

なぜ動かせないのですか　動かすことは可能ですか?

[kei344]

コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

Answer 1

document.getElementById('demo').onsubmit = function(check)
↓
document.getElementById('demo').onsubmit = function()

onsubmit = function(arg)
の場合第一引数にはeventオブジェクトが渡されます、したがって、

document.getElementById('demo').onsubmit = function(check)
書くと上で宣言したcheckではなくcheckの中身はeventオブジェクトになるからです。

Comments

[arare000]

ありがとうございます。function内の括弧にcheckが入ったままの状態がデフォルトで動かせない場合、他に解決策はあるでしょうか？

[hiim]

function(check)の引数をcheck以外に変更できないという事ですか？
もし関数の中身は編集かのうならcheckは使わず、var check2='0123....として
check2を使うとか。。。

[arare000]

そうですね、ちょっと考えなおしてみたいと思います。難しいということが分かりました。ありがとうございました。

Answer 2

スコープの範囲の問題なのでcheckがグローバル変数で設定されていれば
以下で処理できるみたいです

<script>
var check = '0123456789';
window.onload=function(){
  document.getElementById('demo').onsubmit = function(check){
    alert(window.check);
    return false;
  };
};
</script>
<form id="demo">
<input type="submit" value="demo">
</form>

Comments

[arare000]

ありがとうございました。大変勉強になります。助かります。

Answer 3

addEventListener で this オブジェクトに値を持たせる

function内の括弧にcheckが入ったままの状態がデフォルトで動かせない状況です。

動かせない理由が不可解ですが、変数名を変更できないなら外部から参照する方法を変えるしかないですね。
ただし、変数 check にイベントオブジェクトが入る事になって変数名と中身が一致しないのでとても分かりづらいコードだと思います。

• イベントハンドラ関数内から外部変数を参照する - JSFiddle

<form id="demo">
  <input type="submit" value="submit" />
</form>
<script type="text/javascript">
'use strict';
document.getElementById('demo').addEventListener('submit', {
  check: '0123456789',
  handleEvent: function handleEvent (check) {
    alert(this.check);  // "0123456789"
    alert(check);       // "[object Event]"
    check.preventDefault();
}}, false);
</script>

Function.prototype.bind で第一引数に束縛する

あまりコードを変えたくないのなら、Function.prototype.bind で引数束縛する方法もあります。

'use strict';
var check = '0123456789';
document.getElementById('demo').onsubmit = function (check, event) {
  alert(check);
  alert(event);
  return false;
}.bind(null, check); // Function.prototype.bind で第一引数を束縛

ただ、内容的に引数束縛しなければならない理由も見つからないので、「checkを動かせない理由」や背景を明らかにした方が良いと思います。

Re: arare17 さん

Comments

[arare000]

ここまで詳細に書いていただきすみませんでした。