幫助將JavaScript點擊函數轉換爲onLoad

-2

我試圖轉換一個JavaScript函數，該函數跑掉了單擊事件以在頁面加載和窗口大小調整時啓動。正如你在下面看到的，我註釋了控制點擊事件的部分，並添加了最後一行「window.onload」，並手動將class =「resizerd」添加到了正在使用的元素中。幫助將JavaScript點擊函數轉換爲onLoad

該函數根本沒有運行。 Chrome的開發工具顯示「Uncaught TypeError：無法設置未定義的屬性'prevWidth'」我在某處弄亂了語法嗎？有關如何啓動這個負載的任何建議？

謝謝！

//var clicked = document.getElementById("buttonImportant") 

    var resizeeContainer = document.getElementById('video_container'); 
    var resizee = resizeeContainer.getElementsByTagName('video')[0]; 

    /*clicked.addEventListener('click',function(){ 
    if(resizeeContainer.className.lastIndexOf("resizerd")>=0){ 
    } 
    else 
    { 
     resizeeContainer.className="resizerd"; 
    }*/ 
    myResizerObject.prevWidth = resizee.offsetWidth; 
    myResizerObject.prevHeight = resizee.offsetHeight; 
    myResizerObject.Init(); 
    //},false); 


    myResizerObject.prevWidth = resizee.offsetWidth; 
    myResizerObject.prevHeight = resizee.offsetHeight; 
    myResizerObject.Init(); 

    var RESIZER = function(){ 

     this.prevWidth = resizee.offsetWidth; 
     this.prevHeight = resizee.offsetHeight; 

     this.resizee = resizeeContainer.getElementsByTagName('video')[0]; 
     this.resizeeContainer = resizee.parentNode; 
     this.resizeeStyle = this.resizee.style; 

     var ratio = this.resizee.offsetHeight/this.resizee.offsetWidth; 
     var that = this; 

     this.Init = function(){ 
      if(that.resizeeContainer.className.lastIndexOf("resizerd")>=0) 
      { 
       var resizeeContOffsetWidth = that.resizeeContainer.offsetWidth; 
       var resizeeOffsetWidth = that.resizee.offsetWidth; 
       var resizeeContOffsetHeight = that.resizeeContainer.offsetHeight; 
       var resizeeOffsetHeight = that.resizee.offsetHeight; 

       if(that.prevWidth!= resizeeContOffsetWidth) 
       { 
        that.prevWidth = resizeeContOffsetWidth; 
        var desired = resizeeContainer.offsetHeight/resizeeContainer.offsetWidth; 
        if(desired>ratio){ 
         that.resizeeStyle.width=resizeeContOffsetWidth*desired+resizeeContOffsetWidth*desired+"px"; 
         that.resizeeStyle.left = -1*(resizeeOffsetWidth-resizeeContOffsetWidth)/2+'px'; 
        } 
        else{ 
        that.resizeeStyle.cssText="width:100%;height:auto;position:fixed;"; 
        } 
       } 

       if(that.prevHeight!=resizeeContOffsetHeight) 
       { 
        that.prevHeight = resizeeContOffsetHeight; 
        var desired = resizeeContOffsetHeight/resizeeContOffsetWidth; 
        if(desired>ratio){ console.log(ratio); 
         //that.resizeeStyle.top = '0px'; 
         that.resizeeStyle.left = -1*(resizeeOffsetWidth-resizeeContOffsetWidth)/2+'px'; 
         that.resizeeStyle.width = resizeeContOffsetHeight*desired+resizeeContOffsetHeight/desired+'px'; 
        } 
        else 
        { 
         that.resizeeStyle.top = -1*(resizeeOffsetHeight-resizeeContOffsetHeight)/2+'px'; 

        } 
       } 

      } 
     }; 
    }; 

    var myResizerObject = new RESIZER(); 
    window.onresize = myResizerObject.Init; 
    window.onload = myResizerObject.Init;

來源

2011-06-26 technopeasant

@PST - 我找到了斜體和粗體的居高不下的組合。如果你能在不向我說話的情況下借給你的建議，我將不勝感激。這就是說 - 當點擊功能未被評論時，該函數可以正常運行，因此證明它可以工作。我的理解是，點擊功能用於指定要使用的元素，並通過手動將類「resizerd」添加到該元素，我可以避免點擊，然後運行函數onLoad – technopeasant

Hi technopeasant。您是否試圖在Firebug或Chrome/Safari開發人員工具中查看控制檯？如果他們在控制檯中寫出一些東西，它會幫助我們，幫助你很多:) 另一個快速注意，是我建議你使用jQuery - 如果可能的話，作爲你做的很多事情，他們很容易:) –

@Jesper布拉德簡森又名。 Deldy - 只是更新了該信息的帖子。顯示錯誤：「Uncaught TypeError：無法設置屬性'prevWidth'未定義」 – technopeasant

您是否試圖通過<body>標記執行該功能？

喜歡：

<body onload="myfunction();">

來源

2011-06-26 07:21:58 petsoukos

沒有運氣，它會導致一些錯誤，並且不能按我喜歡的方式工作。 – technopeasant

嘗試調用的整個調整大小在onload = javascript函數「MyFunction的（）;」頁面正文的事件。我這樣做是爲了在頁面加載時調整頁面的大小，並且工作得很好。

來源

2011-06-26 07:22:06

你有這樣一行：

myResizerObject.prevWidth = resizee.offsetWidth;

這可能是給錯誤。你沒有聲明myResizerObject，所以它不能擁有一個屬性prevWidth。

某處有你做

var myResizerObject = new RESIZER();

我懷疑你想要在一個更合理的順序:)

來源

2011-06-26 08:31:00 Nanne

好抓。不知道我在想什麼..無論如何，移動到頂部，現在我得到了一個不同的錯誤：未捕獲TypeError：undefined不是函數 – technopeasant

我建議你採取@pst的建議：刪除所有不需要的信息，做一個最小失敗的測試用例併發佈一個關於這個問題的問題。如果問題在每個有效答案後發生變化，則很難提供幫助，因爲問題多於一個。 – Nanne

我聽說過。絕對想讓它儘可能簡單。事情是，這個代碼是剝離，因爲我可以做到..並相信我，我有。一個jsFiddle會有幫助嗎？而且，就目前而言，這是最小的失敗..只是一個錯誤。 – technopeasant

這樣的代碼應該只是罰款的那些行：

var myResizerObject = new RESIZER(); 

function UpdateResizerObject() { 
    var resizeeContainer = document.getElementById('video_container'); 
    var resizee = resizeeContainer.getElementsByTagName('video')[0]; 
    myResizerObject.prevWidth = resizee.offsetWidth; 
    myResizerObject.prevHeight = resizee.offsetHeight; 
    myResizerObject.Init(); 
} 

window.onload = function() { 
    UpdateResizerObject(); 
}; 

window.onresize = function() { 
    UpdateResizerObject(); 
};

擁有它後你雖然定義了RESIZER類。

你的錯誤是在創建它之前調用對象實例變量。

編輯：一些基本的調試..添加警報功能是這樣的：

this.Init = function(){ 
    alert("Init called.. container: " + that.resizeeContainer); 
    if (that.resizeeContainer) 
     alert("class: " + hat.resizeeContainer.className); 
    if(that.resizeeContainer.className.lastIndexOf("resizerd")>=0) 
    { 
     ... 
    } 
}

，看看你會得到什麼。

來源

2011-06-26 08:35:46

@Shadow - 感謝您的回答，我感謝您的時間。用你的建議代替舊的代碼帶來了一系列的錯誤。理論上，它對我來說絕對有意義。 – technopeasant

@techno也許你需要保留'resizeeContainer'和'resizee'全局，只需在函數外面聲明它們的聲明即可。 –

@Shadow Wizard - 良好的通話！擺脫了錯誤，但沒有按要求啓動加載功能:( – technopeasant

幫助將JavaScript點擊函數轉換爲onLoad

回答

相關問題