質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.23%

TypeError: obj is nullについて

解決済

回答 2

投稿 ・編集

  • 評価
  • クリップ 0
  • VIEW 7,217

mx3

score 185

マウスホイールで横スクロールできるサイトを作るために、下記のjavascriptを設置したのですが動作せずに困っています。

[Horizontal Tiny Scrolling]
(http://www.centralscrutinizer.it/en/download/horizontinyscrolling.html)

Firebugのコンソールで確認したところ、下記の様な表示が出ていました。

イメージ説明![イメージ説明
試しに、上記URLのデモと同様の最小限のものを作ってみたところ、それは動きました。
ですが、使いたいサイトに導入すると上記のエラーが出て動きません。

何が原因になっているのか切り分けるために、試しに他のjsを全部外してHTMLとCSSだけにしてみたのですが、それでもエラーが出ます。

このようなエラーになる原因としてはどういうものが考えられるでしょうか?

普段、jQueryのプラグインは使っているのですが、javascriptそのものについては基本的なことしか分かっていない初心者です。

よろしくお願いします。
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+2

なぜなのかはよく分からないですが、htmlに要素が足りていないようですね。

var left = document.getElementById('left');
addEvent(left,'mouseover', function() {this.dx=setInterval('scrollTips.arrowScroll(0)',100);return false;});

という部分で、「left」というidを持つ要素が見つからなくてエラーになっています。

<span id="left" style="position:fixed; left: 100px; top: 400px;">ひだり</span>
<span id="right" style="position:fixed; left: 150px; top: 400px;">みぎ</span>

こんな感じのをhtmlのどこかにぺたりと貼ったら動くかも…?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2014/12/19 11:31

    回答ありがとうございます!
    提案いただいたhtmlを貼り付けたところ、エラーがなくなりました!
    でも残念ながら動作はせず、これが原因で動かなかったわけではなかったようです。
    でも、色々と調べてHTMLを調整したところ無事に動くようになりました!
    原因は横並びにしたboxの親要素にwidthを設定していないことでした。

    キャンセル

checkベストアンサー

+1

実際のコードを見ていないので推測とライブラリのコードからの予想になります。

objがnull(ない)というエラーが出ているわけですがライブラリに以下のコードがあり
function addEvent( obj, type, fn ) {
    if (obj.addEventListener)
        obj.addEventListener( type, fn, false );
    else if (obj.attachEvent) {
        obj["e"+type+fn] = fn;
        obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
        obj.attachEvent( "on"+type, obj[type+fn] );
    }
}

function removeEvent( obj, type, fn ) {
    if (obj.removeEventListener)
        obj.removeEventListener( type, fn, false );
    else if (obj.detachEvent) {
        obj.detachEvent( "on"+type, obj[type+fn] );
        obj[type+fn] = null;
        obj["e"+type+fn] = null;
    }
第一引数がない、もしくは不正な値が渡されているためにエラーが出ていると考えられます。
addEventはHtinyScrolling.initとscrollTips.initに使用されており、それはwindowのloadと同時に呼ばれるという風になっているようですね。
//少し記述を変えています。内容に変化なし
    HtinyScrolling.init=function() {
        var lnks = document.getElementsByTagName('a');   
        for(var i = 0, lnk; lnk = lnks[i]; i++) {   
            if ((lnk.href && lnk.href.indexOf('#') != -1) &&  ( (lnk.pathname == location.pathname) ||
            ('/'+lnk.pathname == location.pathname) ) && (lnk.search == location.search)) {  
            addEvent(lnk,'click',HtinyScrolling.initScroll,false);
            lnk.onclick=function(){return false;} // Safari
            }   
        }    
    
//少し記述を変えています。内容に変化なし
    scrollTips.init=function() {    
        if (window.addEventListener) {
        window.addEventListener("DOMMouseScroll", this.mouseScroll, false);
        } else document.attachEvent("onmousewheel", this.mouseScroll); 
        var left = document.getElementById('left');
        addEvent(left,'mouseover', function() {this.dx=setInterval('scrollTips.arrowScroll(0)',100);return false;});
        addEvent(left,'mouseout', function() { clearInterval(this.dx); return false;});
        var right = document.getElementById('right');
        addEvent(right,'mouseover', function() {this.dx=setInterval('scrollTips.arrowScroll(1)',100);return false;});
        addEvent(right,'mouseout', function() { clearInterval(this.dx); return false;});
    
scrollTips.initは左右への移動を可能にするボタン(アイコンというべきか?)に対してイベントをセットする処理ですね。
HtinyScrolling.initは恐らくはindexに戻るボタン(<a>タグ)を使用した部分に対してイベントをセットする処理でしょう。
document.getElementsByTagName('a')辺りの処理で取得ができていないのがエラーの原因と予測します。
jsのコードに変更は加えていない、元のSampleでのHTMLで同一jsファイルで動作するならHTML側に記述が足りない、記述ミスがあるのではないでしょうか。
HTML側に問題があると考えられるので確認をお願いします。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2014/12/19 11:33

    回答ありがとうございます!
    エラーについては別の方の回答でなくすことができました。ただ、それが動作しない原因ではなかったようで、再度HTMLを見なおしたところ、横並びにしたboxの親にwidthを設定していないことが原因でした。無事に動くようになり、きっかけをくださったお二人に感謝です!

    キャンセル

  • 2014/12/19 11:37

    具体的にエラーを解決するに至ったのはnyago_dさんの回答だったのですが、こうやってエラーの元を調べたらいいという方法が分かったので、こちらをベストアンサーにさせて頂きました。
    お二人ともありがとうございました!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.23%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

関連ワード: typeerror: doc.location is null typeerror doc.location is null doc.location is null