アメブロで外部ファイル（js）を読み込みたい

質問

アメブロで、プラグインの文字数を節約するため
サーバーに外部ファイル（jsファイル）を置き、読み込みたいのですが
参考サイトの記事を読んで、同じように書いても出来ません。。

一つ一つの記事の上に、メッセージが出るようにしたいのですが
反映されず・・・

反映されないブログ⇒　http://ameblo.jp/webtest04/

サーバーにUPしたjsファイルには、以下のように書きました。

//全ページにメッセージボード設置
//http://ameblo.jp/exlink/entry-10241077474.html
var myTm ='ここにタグを書いてください'
//http://ameblo.jp/exlink/
function myT() {
var myObj = document.getElementById('main');
myObj.innerHTML = ( '<div id="tme">'+ myTm + '</div>') + myObj.innerHTML;}

//記事下に定型文を自動挿入
//http://ameblo.jp/exlink/entry-10163916334.html
var myMe ='ここにタグを書いてください'
//http://ameblo.jp/exlink/
function myF() {
var myfix = document.getElementsByTagName('div');
for(i = 0; i < myfix.length; i++){
myObj=document.getElementsByTagName('div')[i];
if(myObj.className=='contents'){
myObj.innerHTML += ( '<p class="fix">'+ myMe + '</p>');}}}

そして、アメブロのプラグインの方には、以下のように書きました。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>

<script type="text/javascript" src="http://wt01.web.fc2.com/plugin.js"></script >

<script language="javascript"><!--
window.onload = function(){ myT(),myF();}
// --></script>

---------------------------

どなたか、原因がわかる方はいらっしゃいますか？
よろしくお願いいたします。

回答No.2

Picosoft · ベストアンサー

No.1です。

「id="main"となるエレメントがない」というのは、
HTMLの方に<div id="main">などといった要素がないということです。
とりあえずこれは置いておいて……

document.getElementByIdが1つの要素のみ取得するのに対し、
document.getElementsByClassNameは複数の要素を配列で取得します。
（"Elements"と複数形になっているのはこのためです）

なので、
var myObj = document.getElementsByClassName('skinMainArea');
ではなく
var myObj = document.getElementsByClassName('skinMainArea')[0];
とすると、ひとまずページごとの定型文は設定できそうですね

お礼

Picosoftさん

>「id="main"となるエレメントがない」というのは、
>HTMLの方に<div id="main">などといった要素がないということです。
>とりあえずこれは置いておいて……

ありがとうございます。
document.getElementById('main')という文は、
<div id="main">という要素を探しにいく（抽出する）文ということなんですね。
<div id="main">がどこにも無ければ、エラーになって当然ですよね（＾０＾；）

var myObj = document.getElementsByClassName('skinMainArea')[0];

にしたら、ページごとの定型文が表示出来ました！！
ありがとうございます（T▽T。）！！

数字を[0]にする、という所がポイントなんですね。
他の数字や文字を入れたらどうなるんだろう・・・と気になったので、こちらは自分で調べてみますね＾＾
（下の方で、iを代入している書き方があるので
iを使って色々と指定出来るのだと思いますが・・・）

「記事下に定型文を自動挿入」の方も、
if(myObj.className=='contents')

という文が気になり、class名でcontensという要素が無いのでは・・・？と思ったら、やっぱり無かったので
該当する箇所のclass名に変更したら、表示することが出来ました＾＾

ご丁寧に教えてくださり、ありがとうございました。
javascript文の意味も少しだけ分かるようになり、本当に助かりました＾＾

回答No.1

Picosoft

FireFoxにてWebコンソールを出した状態で表示したところ、
　TypeError: myObj is null　　　plugin.js:7
とコンソールにエラーが出力されました。

id="main"となるエレメントがないのでは？

お礼

早速のご回答、ありがとうございます。

>id="main"となるエレメントがないのでは？

というのは、cssの方にid名mainがないということですよね？

cssの方で確認したところ、id名にmainはありませんでした。

では、該当するid名は何だろう？とブログのソースを調べていたら、class名で .skinMainArea　が該当するみたいなので、

document.getElementsByClassName('skinMainArea');

に変更してみたのですが、ダメでした・・・。

アメブロのソースには、id名（#main）などがなく、
ほとんどclass名（.skinMainArea）なので
他のclass名も試してみたのですが、変わりませんでした。

Picosoftさんが使っているFireFoxのWebコンソールのように、javascriptのエラーが表示出来るようなものを使って、
どこがエラーになっているのか、確認してみたいと思います。