Html 未考虑第二个输入框值

我所做的：

01）我为HTML/CSS代码制作了一个具有实时预览的编辑器

02）专家可以显示实际代码并从中进行编辑

03）业余爱好者只需使用输入框更改值即可

你可以看看我在这里做了什么：

我的问题：

我在输入框中键入一些内容，然后单击预览。它起作用了。如果我第二次键入某个内容，那么它不会--->它只考虑第一次键入的值

我的问题截图：

代码片段（它会阻止iframe，因此请查看下面的JSFIDLE链接）：

$（函数（）{
函数GetHtml（）{
var html=$（'.html'）.val（）；
返回html；
}
函数GetCss（）{
var Css=$（'.Css'）.val（）；
返回Css；
}
函数renderPreview（）{
var targetp=$（'#previewTarget'）[0].contentWindow.document；
targetp.open（）；
targetp.close（）；
var html=GetHtml（）；
var css=GetCss（）；
$（'body'，targetp）.append（html）；
$（'head'，targetp）.append（''+css+''）；
}
$（'.innerbox'）。打开（“keyup”，renderPreview）；
renderPreview（）；
});
$（文档）.ready（函数（）{
$（“#更新”）。单击（函数（e）{
log（$（'#thebox1'）.val（））；
if（$（'#thebox1'）.val（）.length>0）{
var c=$（'#thebox1'）.val（）；
$（'.popup1'）.removeClass（）.addClass（c）.text（c）；
}
});
document.getElementById（“copyButton1”）.addEventListener（“单击”，函数（）{
copyToClipboard（document.getElementById（“copyTarget1”）；
});
document.getElementById（“copyButton2”）.addEventListener（“单击”，函数）（）{
copyToClipboard（document.getElementById（“copyTarget2”）；
});
var MyDiv1=document.getElementById（'copyTarget2'）；
var MyDiv2=document.getElementById（'copyTarget1'）；
$（“#更新”）。单击（函数（e）{
textareahtml.value=$.trim（MyDiv1.innerText）
textareacss.value=$.trim（MyDiv2.innerText）
函数GetHtml（）{
var html=$（'.html'）.val（）；
返回html；
}
函数GetCss（）{
var Css=$（'.Css'）.val（）；
返回Css；
}
函数renderPreview（）{
var targetp=$（'#previewTarget'）[0].contentWindow.document；
targetp.open（）；
targetp.close（）；
var html=GetHtml（）；
var css=GetCss（）；
$（'body'，targetp）.append（html）；
$（'head'，targetp）.append（''+css+''）；
}
$（'.innerbox'）。打开（“keyup”，renderPreview）；
renderPreview（）；
});
});
/*拉丁语扩展*/
@字体{
字体系列：“Lato”；
字体风格：普通；
字体大小：300；
src:local（'Lato-Light'）、local（'Lato-Light'）、url(http://fonts.gstatic.com/s/lato/v11/dPJ5r9gl3kK6ijoeP1IRsvY6323mHUZFJMgTvxaG2iE.woff2)格式（'woff2'）；
unicode范围：U+0100-024F、U+1E00-1EFF、U+20A0-20AB、U+20AD-20CF、U+2C60-2C7F、U+A720-A7FF；
}
/*拉丁语*/
@字体{
字体系列：“Lato”；
字体风格：普通；
字体大小：300；
src:local（'Lato-Light'）、local（'Lato-Light'）、url(http://fonts.gstatic.com/s/lato/v11/EsvMC5un3kjyUhB9ZEPPwg.woff2)格式（'woff2'）；
unicode范围：U+0000-00FF、U+0131、U+0152-0153、U+02C6、U+02DA、U+02DC、U+2000-206F、U+2074、U+20AC、U+2212、U+2215、U+E0FF、U+EFFD、U+F000；
}
身体{
背景：hsl（184,65%，49%）；
保证金：0；
字体系列：“Lato”；
文本对齐：居中；
颜色：#000；
字体：15px/1.4em；
}
前{
背景色：#333；
填充：6px；
字体大小：12px；
颜色：#2fbe35；
线高：1.3em；
}
代码{
字体系列：“Courier New”，Courier，mono；
颜色：#2fbe35；
}
大宗报价{
边界：无；
颜色：#fff；
保证金权利：5%；
左缘：5%；
}
.内容
{
宽度：100%；
保证金：0；
}
.专栏1{
宽度：50%；
高度：自动；
浮动：左；
}
阿波罗先生{
字体系列：Lato；
背景色：#333；
填充：6px；
字体大小：12px；
线高：1.3em；
}
.专栏2{
宽度：50%；
高度：自动；
浮动：左；
}
文本区{
显示：块；
字体系列：Lato；
背景色：#333；
颜色：#2fbe35；
宽度：100%；
最小高度：400px；
边界：无；
调整大小：无；
文本对齐：居中；
}
按钮、#发送、#发送2{
边界：无；
字体系列：Lato；
字体大小：1vw；
颜色：继承；
背景：rgba（38160,53,0.72）；
光标：指针；
填充：25px 80px；
显示：内联块；
文本转换：大写；
字母间距：1px；
字号：700；
大纲：无；
位置：相对位置；
-webkit转换：所有0.3；
-moz转换：全部为0.3s；
过渡：均为0.3秒；
颜色：#333；
边框：3px实心#333；
}
按钮：悬停，#发送：悬停，#发送2：悬停{
颜色：#333；
背景：#fff；
}
iframe{
背景：#333；
边框：2倍实心#333；
}
h1{
颜色：#fff；
文本阴影：-1px 0黑色，0 1px黑色，1px 0黑色，0-1px黑色；
}
.innerbox{
背景：#333；
}
/*部分*/
.科{
左缘：5%；
保证金权利：5%；
明确：两者皆有；
}
/*列设置*/
上校{
显示：块；
浮动：左；
利润率：1%01%2%；
}
.col:第一个子项{左边距：0；}
/*分组*/
.小组：之前，
.group:在{content:：；display:table；}之后
.group:在{clear:both；}之后
.group{zoom:1；/*用于IE 6/7*/}
/*四人格*/
.span_4_of_4{
宽度：100%；
}
.span_3_/u 4{
宽度：74.5%；
}
.span_2_/u 4{
宽度：49%；
}
.span_1_/u 4{
宽度：23.5%；
}
/*将全宽调整到480像素以下*/
@仅介质屏幕和（最大宽度：480px）{
.col{margin:1%01%0%；}
.span_1_of_4、.span_2_of_4、.span_3_of_4、.span_4_of_4{宽度：100%；}
}
输入[type=“text”]{
宽度：90%；
最大宽度：320px；
背景：#fff；
颜色：#333；
边界：无；
字体系列：Lato；
字体大小：0.9vw；
填充：25px 0 25px 0；
显示：内联块；
文本转换：大写；
字母间距：1px；
字号：700；
大纲：无；
位置：相对位置；
-webkit转换：所有0.3；
-moz trans
$('.popup1').removeClass().addClass('popup1 '+c).text(c);