アプリ版：「スタンプのみでお礼する」機能のリリースについて

初心者です。

解決済

  • 質問者：future-boy
  • 質問日時：
  • 回答数：6件

初心者です。

すごく単純なことかもしれませんが、教えて下さい。
document.writeでdiv idの中身を取り出してみました。
それで並び変えてまた表示させたいと思っています。

最初は　return を使って関数を呼び出してみましたが、受け取れず・・・
なんか難しいので、とりあえず以下のプログラムで画面に表示さえすれば
あとはインフレームなどで対応しようかと思いました。

しかし、出力結果が一行しか表示されません。
アラートで出力すると、順番に表示されるのですか。

どなたか宜しくお願いします。


<script type="text/javascript">

function yomikomi(){
var selectObj = new Array();
var parents = new Array();

//配列を読み込む
parents=Item();

//日付順にする
alert(parents);
parents.sort();
alert(parents);
//return parents;
for(i=0; i < parents.length; i++){
//ID_ だけ削除する。
if(parents[i]=='ID_'){
delete parents[i];
parents.splice([i],1);
}
selectObj[i] = document.getElementById(parents[i]);

//小窓で確認
alert(selectObj[i].innerHTML);

//★問題の箇所 画面には１行しか表示されない。
document.write(selectObj[i].innerHTML);
}
}

</script>
<script type="text/javascript">
function Item(){
var parents = Array(

'ID_'

,'201008012'

,'201007161'

);
return parents;
}
</script>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (6件)

No.5ベストアンサー

やりたいことは、divのidに日付が入っており、


そのid情報を元にdivをソートし再出力したい
でよろしいですか？

<html>
<head>
<script type="text/javascript">
　　function yomikomi(){
　　　　var div = document.getElementsByTagName("div");　
　　　　var list = document.getElementById("list");
　　　　var kids = [];
　　　　for(var i=0; i<div.length; i+=1){
　　　　　　if(div[i].id && div[i].id.match(/\d+/)){
　　　　　　　　kids.push(div[i]);
　　　　　　}
　　　　}
　　　　kids.sort(function(n, m) {
　　　　　　　　　　if (n.id === m.id) return 0;
　　　　　　　　　　return (n.id < m.id) ? -1 : 1;
　　　　　　　　});
　　　　for(var i=0; i<kids.length; i+=1){
　　　　　　list.appendChild(kids[i]);
　　　　}
　　}
</script>
</head>
<body onload="yomikomi();">
　　<div id="list">
　　　　<div id="201008012">ID201008012</div>
　　　　<div id="201007161">ID201007161</div>
　　　　<div id="201008013">ID201008013</div>
　　　　<div id="201008015">ID201008015</div>
　　　　<div id="201006015">ID201006019</div>
　　</div>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

参考させてもらいました。
結果やりたいことができました。
すごく助かりました。
ありがとうございました。

通報する
お礼日時：2010/09/02 20:28

No.6

  • 回答者： fujillin
  • 回答日時：

#2です。



＞undefined」という文字だけ連続して表示されています。
失礼しました。演算子の優先順位をミスったみたい。
　if(e = document.getElementById(parents[i]) && parents[i] != 'ID_')
　　　　　　　　　　↓
　if((e = document.getElementById(parents[i])) && parents[i] != 'ID_')
にすれば、動作すると思います。
（No4様：フォローありがとうございます。）


でも、やりたいことに関しては、どうやらNo5様の推理があたっているみたいなので、最初にidの配列を定義しておくよりも、No5様のようにドキュメントから該当する要素を拾い出すようにしておいたほうがなにかと便利なはずと思われます。

ということで、もし利用なさるならそちらをどうぞ。
    • good
    • 0
    • 件
通報する
この回答へのお礼

なんどもご回答頂きありがとうございます。
とても参考になりました。
天才ですね。

通報する
お礼日時：2010/09/02 20:27

No.4

  • 回答者： yyr446
  • 回答日時：

No.2さんのだと、eにtrue/falseが入っている。


素直に
for(i=0; i<parents.length; i++) {
if(document.getElementById(parents[i]) && parents[i] != 'ID_')
html += document.getElementById(parents[i]).innerHTML + "<br>";
}
でうまくいく。

※HTML文法の間違いは、ブラウザーが何とかしてくれる。
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： yyr446
  • 回答日時：

HTML（）のエレメントのid属性は、数字で始められません。


　HTML4.01で仕様確認
http://www.w3.org/TR/1999/REC-html401-19991224/t …

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： fujillin
  • 回答日時：

HTMLが不明なので、想像するしかないのだけれど…


（スクリプトの目的もよくわかりませんけれど）

document.writeを使っていることから、body内にスクリプトがあるのだと思いますが、document.getElementById(parents[i])で取得しようとしている要素のDOMは生成された後でしょうか？（生成されていないと取得できずエラーになる）
あるいは、ロード後にスクリプトが実行されているのなら、document.writeで新たな文書が作成されるので現在のDOMが参照できなくなっているとか…

＞//★問題の箇所 画面には１行しか表示されない。
「1行」の意味が不明ですが、配列は全て書き出されるが1行になってしまうと言う意味なのか、配列要素が1個分しか表示されないという意味なのか…
前者ならば、出力したHTMLに改行がないから。
もっとも、HTMLで改行しても表示には反映されないので、<br>や<p>要素を記述してあげる必要があります。
後者であれば↑のエラーで処理が止まっている可能性が考えられます。

また、配列を削除するにはspliceだけでよいですが、i=0から増加順に行なうとミスが起こる可能性があります。
（例の場合だと「ID_」が最後になるので、問題はありませんが…）
i = parents.length-1から減少順に処理するか、または、増順におこなうなら削除せずに処理をスキップするだけにするかにしたほうがよさそう。

さらには
＞selectObj[i] = document.getElementById(parents[i]);
で定義した内容に対して
＞document.write(selectObj[i].innerHTML);
を出力しようとしても、selectObj[i].innerHTMLの値は未定義のはず。


内容がよくわかってませんけれど、以下みたいにしたらどうなりますか？
<script type="text/javascript">
<!--
window.onload = yomikomi;

function yomikomi(){
var parents = ['ID_', '201008012', '201007161'];
var e, html = "";

//日付順にする
parents.sort();

//html作成
for(i=0; i<parents.length; i++) {
if(e = document.getElementById(parents[i]) && parents[i] != 'ID_') html += e.innerHTML + "<br>";
}

//★表示
document.write(html);
}
//-->
</script>

* ところで、idって数字から始まってもよかったんだっけ？

この回答への補足

早速のご返答ありがとうございます。
HTMLについては下の回答への補足で付け足しました。
スクリプトの目的とは・・・
これはIDに日付を付けて、perlでファイル出力したものを並び替えしたい事です。

一応複数表示できましたが、「undefined」という文字だけ連続して表示されています。
これをIDの中身にするにはどうのようにすれば良いのでしょうか？
大変恐縮なんですがもしも宜しければ教えて下さい。
javascriptは難しい。。。

補足日時：2010/08/24 14:48
通報する
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： zeff#1
  • 回答日時：

document.writeが実行された時点で


HTML文書が書き換えられてしまっているので、
２回目以降の関数が実行されていない（関数自体が消えてしまった）
んだと思いますけど。

スクリプトが置いてある場所と、
HTMLがどうなっているのか（現象を再現可能な文書を）書き添えたら、
誰か親切な人が直してくれますので、
この回答の補足欄使ってください。

この回答への補足

ありがとうございます。
そうですね、私の説明不足です。

//▼追記したもの
<body onload="yomikomi()";>

<script type="text/javascript">

function yomikomi(){
var selectObj = new Array();
var parents = new Array();

//配列を読み込む
parents=Item();

//日付順にする
alert(parents);
parents.sort();
alert(parents);
//return parents;
for(i=0; i < parents.length; i++){
//ID_ だけ削除する。
if(parents[i]=='ID_'){
delete parents[i];
parents.splice([i],1);
}
selectObj[i] = document.getElementById(parents[i]);

//小窓で確認
alert(selectObj[i].innerHTML);

//★問題の箇所 画面には１行しか表示されない。
document.write(selectObj[i].innerHTML);
}
}

</script>
<script type="text/javascript">
function Item(){
var parents = Array(

'ID_'

,'201008012'

,'201007161'

);
return parents;
}
</script>

//▼追記したもの
<div id="201008012">
ID
</div>
<div id="201007161">
ID
</div>
</body>

補足日時：2010/08/23 23:29
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報