函数不能正确执行，除非它被调用两次 [英] Function doesn't correctly perform unless it is called twice

问题描述

一些背景：我正在使用JavaScript来垂直居中高度不同的子div，具体取决于其父div中的条件。居中功能如下：

pre $ function autoCenter（）
{var firstline = document.getElementById（ntext ）;
var secondline = document.getElementById（dtext）;
var l1h = parseInt（getComputedStyle（firstline）[height]）;
var l2h = parseInt（getComputedStyle（secondline）[height]）;
var d1h = parseInt（getComputedStyle（document.getElementById（design））[height]）;
var d2h = parseInt（getComputedStyle（document.getElementById（design2））[height]）;
var totalh = l1h + l2h + d1h + d2h;
document.getElementById（desdiv）。style.top =（212-totalh）/ 2 +px;
firstline.style.top =（212-totalh）/ 2 + d1h +px;
secondline.style.top =（212-totalh）/ 2 + l1h + d1h +px;
document.getElementById（desdiv2）。style.top =（212-totalh）/ 2 + l1h + l2h + d1h +px;}


ntext，dtext，desdiv和desdiv2是div。前两个变化基于它们中文本的大小，第二个变化基于它们中图像的大小（ids design& design 2）

当唯一改变的是文本div时，这个函数可以很好地工作。当我更改图像div时遇到问题。看起来，涉及getComputedStyle的函数的第一部分在该函数被第二次调用之前没有获得图像的新高度值。在所谓的第二次所有中心都应该如此。但理想情况下，所有事情都应该在第一个电话上工我在这里做错了什么，我怎样才能让第一次打电话的中心？

编辑：我不确定这是否相关，但autoCenter（）总是从另一个函数中调用。

解决方案

这很可能是因为当您调用中心函数时，图像未完全加载。 b
$ b

为图像添加事件侦听器，以便在加载图像时触发中心函数。

至于分号。总是把他们放进去。查找分号插入。

Some background: I am using JavaScript to vertically center child divs that vary in height depending on conditions in their parent div. The centering function is as follows:

function autoCenter()
{var firstline = document.getElementById("ntext");
var secondline = document.getElementById("dtext");
var l1h = parseInt(getComputedStyle(firstline)["height"]);
var l2h = parseInt(getComputedStyle(secondline)["height"]);
var d1h = parseInt(getComputedStyle(document.getElementById("design"))["height"]);
var d2h = parseInt(getComputedStyle(document.getElementById("design2"))["height"]);
var totalh = l1h + l2h + d1h+ d2h;
document.getElementById("desdiv").style.top = (212-totalh)/2 + "px";
firstline.style.top = (212-totalh)/2  + d1h +"px";
secondline.style.top = (212-totalh)/2 + l1h + d1h + "px";
document.getElementById("desdiv2").style.top = (212-totalh)/2 + l1h + l2h + d1h+ "px";}

ntext, dtext, desdiv, and desdiv2 are the divs. The first 2 change based on the size of the text in them and the second 2 change based on the size of the image in them (ids design & design 2)

This function works perfectly when the only things changing are the text divs. I run into problems when I change the image divs. It appears that the first part of the function that involves getComputedStyle doesn't get the new height value for the image until the function is called a second time. After it's called the second time everything centers like it should. But ideally everything should work on the first call. What am I doing wrong here and how can I get the divs to center on the first call?

Edit: I'm not sure if this is relevant but autoCenter() is always called from within another function.

解决方案

It's most likely because your images aren't loaded fully at the time you call the center function.

Add an event listener to the images so that the center function fires when the images are loaded.

As for semicolons. Put them in, always. Look up semicolon insertion.

这篇关于函数不能正确执行，除非它被调用两次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！