Javascript 文本在输出中垂直上下跳跃。使用「；document.getElementById（"；firstDiv"；）.innerHTML=document.getElementById（"；location"；）.value&引用；

我真的不知道如何描述我的问题，但基本上：

为了好玩，我在JSFIDLE中编写了一个项目，不知何故，我的代码输出只是上下跳跃

如果您想亲自查看，请单击下面的链接，然后单击“提交投诉”按钮

问题是：在输出文本中，一些变量和文本高于所有周围文本。我不知道为什么

谢谢你的帮助

以下是一个工作片段：

$（“#文本转换器”）。单击（函数（）{
变量el=$（“#报警卡”），
newone=el.clone（真）；
el.before（新一）；
$（“+el.attr（“class”）+“：last”）.remove（）；
});
$（“输入：复选框”）。在（'click'，function（）上{
//在处理程序中，“this”是指单击的框
var$box=$（此项）；
如果（$box.is（“：checked”））{
//使用.attr（）方法检索框的名称
//因为它被假定和期望是不可变的
var group=“输入：复选框[name=”+$box.attr（“name”）+“]”；
//另一方面，组/框的选中状态将更改
//使用.prop（）方法检索当前值
$（组）.prop（“选中”，false）；
$box.prop（“选中”，为真）；
}否则{
$box.prop（“选中”，假）；
}
});
.fieldset{
可见性：隐藏；
}
.打字机{
垂直对齐：基线；
显示器：flex；
颜色：黑色；
字体系列：monospace；
溢出：隐藏；
/*确保在播放动画之前不会显示内容*/
右边框：.15em实心橙色；
/*打字机光标*/
空白：nowrap；
/*将内容保持在一行上*/
保证金：0自动；
/*在键入时提供滚动效果*/
字母间距：.15em；
/*根据需要进行调整*/
动画：输入3.5s步数（30，结束），闪烁插入符号。5s步数结束无限；
}
/*打字效果*/
@关键帧键入{
从{
宽度：0
}
到{
宽度：100%
}
}
/*打字机光标效应*/
@关键帧闪烁插入符号{
从…起
到{
边框颜色：透明
}
50% {
边框颜色：橙色
}
}

电话报警卡
电话报警卡
服从

内部位置


住址


疑犯姓名


提交人姓名或首字母缩写




男性
女性








消防员报警卡


有理由怀疑

阁楼

)

11号榆树市

.——

E.B

)；名字是

艾莉丝·拉森

)

女性

document.getElementById（“textChanger”）.onclick=function（）{
document.getElementById（“字段集”）.style.visibility=“可见”；
if（document.getElementById（“location”）.value！=“”）{
document.getElementById（“firstDiv”）.innerHTML=document.getElementById（“location”）.value；
}否则{
document.getElementById（“firstDiv”）.innerHTML=“阁楼”；
}
if（document.getElementById（“address”）.value！=“”）{
document.getElementById（“secondDiv”）.innerHTML=document.getElementById（“address”）.value；
}否则{
document.getElementById（“secondDiv”）.innerHTML=“11号Elm，城市”；
}
if（document.getElementById（“nameofsub”）.value！=“”）{
document.getElementById（“thirdDiv”）.innerHTML=document.getElementById（“nameofsub”）.value；
}否则{
document.getElementById（“thirdDiv”）.innerHTML=“Blake夫人”；
}
if（document.getElementById（“nameofsus”）.value！=“”）{
document.getElementById（“fourthDiv”）.innerHTML=document.getElementById（“nameofsus”）.value；
}否则{
document.getElementById（“fourthDiv”）.innerHTML=“E.B.”；
}
if（document.getElementById（“male”）.checked==true）{
document.getElementById（“fifthDiv”）.innerHTML=“Male”；
}else if（document.getElementById（“女性”）.checked==true）{
document.getElementById（“fifthDiv”）.innerHTML=“Female”；
}
}


问题在于，您的div中没有任何
围绕文本（
#firstDiv
，
#SecondDiv
，等等）

这里有一个最小、完整且可验证的代码片段，您可以在其中看到有无
之间的差异：


。打字机{
垂直对齐：基线；
显示器：flex；
颜色：黑色；
字体系列：monospace；
溢出：隐藏；
/*确保在播放动画之前不会显示内容*/
右边框：.15em实心橙色；
/*打字机光标*/
空白：nowrap；
/*将内容保持在一行上*/
保证金：0自动；
/*在键入时提供滚动效果*/
字母间距：.15em；
/*根据需要进行调整*/
动画：输入3.5s步数（30，结束），闪烁插入符号。5s步数结束无限；
}

开始|

测试1

|结束



开始|

测试2
|结束

如果有v3，为什么要使用jQuery 1.11？非常感谢！是th吗