複数のa href=""を生成し、クリックするとその関数自身に変数を渡して関数を再実行させたいのですが・・・

いつもありがとうございます。
１から１０の番号を持つリンクを生成し、クリックするとその番号を表示するだけの関数を書いています。１つの関数で完結するように書ける方法があればご教示下さいますよう、お願い申し上げます（あとで出そうと思うのですがページリンクの前処理のようなものを想定しています）。

ブラウザはchrome バージョン 43.0.2357.130 (64-bit)です。

lang
1
2現状の方法
3<html>
4<head>
5<script type="text/javascript">
6// グローバル変数val
7var val= 1;
8window.onload = test;
9function test() {
10  console.log(val);
11  var out = '';
12  for (var i=1; i<=10; i++) {
13    out += "<a href='#' val='"+i+"' onclick='test2(this);return false;'>"+i+"/"+"</a>";
14  }
15  document.getElementById("result").innerHTML = out;
16}
17function test2(e) {
18  // グローバル変数valの値を変更
19  val = e.getAttribute('val');
20  // 関数testを再実行
21  test(); 
22}
23</script>
24<body>
25<div id="result"></div>
26</body>
27</html>
28
29本来は下記のように１つの関数だけでできないかと思案中。しかしUncaught TypeError: e.getAttribute is not a functionというエラーになる。
30
31失敗例：
32function test(e) {
33  var val = e.getAttribute('val') || 1;
34  console.log(val);
35  var out = "";
36  for (var i=1; i<=10; i++) {
37    out += "<a href='#' val='"+i+"' onclick='test(this);return false;'>"+i+"/"+"</a>";
38  }
39  document.getElementById("result").innerHTML = out;
40}
41
42~

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

回答2件

ベストアンサー

window.onloadで呼び出されるときに入る引数がEventなのが問題なので

lang
1window.onload = test;
2function test(e) {
3    var val = (e.constructor != Event)?e.getAttribute('val'):1;
4    console.log(val);
5    var out = "";
6    for (var i=1; i<=10; i++) {
7        out += "<a href='#' val='"+i+"' onclick='test(this);return false;'>"+i+"/"+"</a>";
8    }
9    document.getElementById("result").innerHTML = out;
10}

として引数(e)がEventでない時だけgetAttributeを呼び出すようにするといいのではないでしょうか

投稿2015/07/11 13:18

退会済みユーザー

総合スコア0

true

2015/07/11 13:33

var val = (e.constructor != Event)?e.getAttribute('val'):1; 大変勉強になりました。問題の所在はなんとなく分かっていたのですが、そこのところを var val = e.getAttribute('val') || 1;とか書いていたりしたのですがうまくいかず、悩んでいました。ありがとうございました！

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

jquery をつかって書いてみました。
http://jsdo.it/katoy/7nmw

html:

<ul id="links">
</ul>

javascript

$(function() {
    // 10 個の数字の link を作る
    for (var i = 1; i <= 10; i++) {
      $("#links").append('<li><a href="#" class="mylink" val="' + i + '">' + i + '</a></li>');
    }
    
    // リンクをクリックしたときの処理
    $(".mylink").on('click', function(event) {
        event.preventDefault();
        event.stopPropagation();
        var val = $(this).attr('val');
        alert(val);
        // location.href = 'http://hoge' + $(this).attr('href');
        return false;
    });
});

![イメージ説明]WIDTH:600

投稿2015/07/11 15:52