帮助将JavaScript单击功能转换为onLoad

我正在尝试转换一个JavaScript函数，该函数运行了一个点击事件，以便在页面加载和窗口调整时启动。正如您在下面看到的，我注释掉了控制单击事件的部分，并添加了最后一行“window.onload”，并手动将class=“resizerd”添加到它正在使用的元素中

该函数根本没有运行。Chrome的开发工具显示“UncaughtTypeError:无法设置未定义的属性'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;

---

您是否尝试通过

标记执行该函数

比如：

---

尝试在页面主体的OnLoad=“myfunction（）；”事件中调用整个resize javascript函数。我这样做是为了在每次加载页面时调整页面大小，它工作得很好。

您有这样一行：

 myResizerObject.prevWidth = resizee.offsetWidth;

这可能就是错误所在。您没有做任何事情来声明

myResizerObject

，因此它不能有属性

prevWidth

你在下面的某个地方

var myResizerObject = new RESIZER();

---

我怀疑您希望这些行的顺序更合理：）

这样的代码应该可以正常工作：

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();
};

不过，在定义

大小调整器
类之后，就可以使用它了

您的错误是在创建对象实例变量之前调用它

编辑：一些基本的调试。。向功能中添加警报，如下所示：

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

看看你得到了什么。
@PST-我发现你的斜体字和粗体字组合让人屈尊。如果你能在不贬低我的情况下提出建议，我将不胜感激。也就是说，当click函数未被注释时，函数会正确运行，从而证明它是有效的。我的理解是，click函数用于指定要使用的元素，通过手动将类“resizerd”添加到该元素中，我可以避免单击，然后在加载时运行该函数。您是否尝试过在Firebug或Chrome/Safari开发工具中查看控制台？如果他们在控制台中写一些东西，这将对我们有帮助，对您有很大帮助：）另一个提示是，我建议您使用jQuery-如果可能的话，就像您所做的很多事情一样，它们会让您变得非常容易：）@Jesper Blad Jenson aka。Deldy-刚刚用这些信息更新了帖子。显示错误：“Uncaught TypeError:无法将属性“prevWidth”设置为未定义的“重复的/重叠的”。@Dori-相同的代码不同的问题。在线程结束时，我决定用本机脚本实现这个函数。这是第一步。运气不好，它会导致一些错误，并且不能像我希望的那样工作。接得好。不知道我在想什么。。不管怎样，把这一行移到顶部，现在我得到了一个不同的错误：UncaughtTypeError:undefined不是一个函数。我建议你接受@pst的建议：删除所有不需要的信息，制作一个最小失败的测试用例，并就此发布一个问题。如果问题在每一个有效的答案后都发生了变化，这是很难帮助的，因为问题不止一个。我听说了。我当然想让它尽可能的简单。问题是这段代码是我能做到的。。相信我，我有。JSFIDLE会有帮助吗？而且，就目前情况而言，这是最低限度的失败。。只有一个错误。好吧，你可以在你自己的纸条上，直到错误消失：）。如果您对第一个错误这样做，您自己就会发现它，因为它是第一行中的一行：）。现在我甚至不知道问题出在哪一行……也许我没有很好地沟通。在未注释click函数的情况下，有0个错误，整个函数的工作方式符合要求。我对此发表了评论，开始研究如何在加载时启动它。。这就是我在帖子中提到的错误第一次出现的地方，当函数停止工作时。@Shadow-谢谢你的回答，我感谢你的时间。用你的建议替换旧代码会带来很多错误。从理论上讲，这对我来说是很有意义的。@techno也许你需要保持
resizecontainer
和
resizee
全局，只需将它们的声明放在函数之外。@Shadow Wizard-好主意！删除错误，但不按要求在加载时启动函数：（@Shadow Wizard-在带有省略号的行上给我一个错误（…）那些
…
意味着你应该保留原始代码，我只是不想复制整个代码，而是指导要做什么更改。
this.Init = function(){
   alert("Init called.. container: " + that.resizeeContainer);
   if (that.resizeeContainer)
      alert("class: " + hat.resizeeContainer.className);
   if( that.resizeeContainer.className.lastIndexOf("resizerd")>=0 )
   {
      ...
   }
}