javascriptリンクの動的な処理について

Question

liにＵＲＬを設定しつつ、
それぞれのアドレスをlocation.href = "index" + count + "html";

変数countに動的にliの番号を代入して
index1.html
index2.html
index3.html
index4.html

というようにliにリンクを設定したいと考えたのですが
うまくいきません。

どのようにしたら、実現できるんでしょうか。

<ul id="list">
<li>≫とは？</li>
<li>≫初期設定</li>
<li>≫ＯＳの設定</li>
<li>≫共有</li>
<li>≫接続</li>
<li>≫ＳＳＨ接続</li>
<li>≫ええええ</li>
</ul>

var ulElement = document.getElementById("list");//ulを取得
var childElementCount = ulElement.childElementCount;//liの数を調べる


for(var $count = 0; $count < childElementCount; $count++) {
    document.getElementsByTagName("li")[$count].onclick = function(){
　　location.href = "index" + $count + ".html";
　　}
}

Comments

[m.ts10806]

インデントをきちんと調整してください。関数などのネストが深くなっているときなど、揃っていないと開始と終了がわかりづらくなって不具合につながりやすいです。

Answer 1

jun68yktさんの指摘する点も問題ですが、実はもう1つ問題があって、varでループ変数を宣言してその内部でイベントを宣言した場合、変数は共通なので、すべて「抜けきったあとの値」になってしまいます。

対策は2つあります。

その1： varではなくletで宣言する（IEはletをループで回した場合の挙動に非対応なので、IEを無視できる状況、あるいはBabelなどでコンパイルする場合に使える）

その2: ループ1回毎に関数を立ててスコープを切る

for(var $count = 0; $count < childElementCount; $count++) {
  // ループ1回毎にcountという別の変数を立てて、$countと分離する
  (function(count){
    document.getElementsByTagName("li")[count].onclick = function(){

      location.href = "index" + count + ".html";
    };
  })($count);
}

Comments

[sphy]

ありがとうございます。
無事設定することができました。

Answer 2

以下のように html の前にドット . 　を追加でいかがでしょうか？

修正前：

location.href = "index" + $count + "html";

修正後：

location.href = "index" + $count + ".html";

---

追記

上記の回答は、 . の抜けのことしか見ていませんでした。以下で意図通りになるかなと思います。

var ulElement = document.getElementById("list");//ulを取得
var childElementCount = ulElement.childElementCount;//liの数を調べる


for(var $count = 0; $count < childElementCount; $count++) {

    document.getElementsByTagName("li")[$count].onclick = (function(n){
          return function() {
        	  location.href = "index" + n + ".html";
          };        
        })($count);

}

以下、上記のコードを動作確認するためのサンプルです。（ location.href を置き換えるのではなく　console.log で表示しています）

• https://jsfiddle.net/jun68ykt/2w1xkdbz/1/

---

追記2

質問の主旨からは外れてしまいますが、以下のように getElementsByTagName の結果に対して、Array.prototype.forEach を使うことでも実現できます。

const items = document.getElementsByTagName("li");

Array.prototype.forEach.call(items, function(item, i) {
  item.onclick = function() {
       var href = "index" + i + ".html";            
       console.log(href);
  };        
});

動作確認用のサンプル： https://jsfiddle.net/jun68ykt/4amvgz6n/1/

Comments

[sphy]

すみません。.抜けは入力ミスでした。
このjsを出力してみると

すべてのliに対してindex6.htmlのリンクがついてしまいます。

[jun68ykt]

初めに回答を書いた時点では、ドットの抜けしか見てませんでした。つきましては、
意図通り動くと思われるコードを追記しました。参考になれば幸いです。

[sphy]

ありがとうございます。
プログラム初心者なのですが、本当に勉強になります。

[jun68ykt]

どういたしまして。解決されたようでよかったです。
回答に追記2として、こういう書き方もできます、というコードを上げておきました。

[sphy]

ご丁寧にありがとうございます。
このような書き方もあるんですね。

Answer 3

location.href = "index" + $count + ".html";  // "."が抜けています