Javascript 代码适用于除Wapka之外的所有情况。为什么？

好的，昨晚我花了大约三个小时编写了一个div生成器，我已经对它进行了测试。它起作用了。问题是：
我过去经常免费创建网站（因为我太年轻了，没有正式的编程生涯），然后我跑步。在这个网站上，我有一个为新程序员提供有用工具的编程中心（目前是一个十六进制和rgba计算器），我想将生成器添加到其中。遗憾的是，这段代码在Wapka中不起作用。奇怪的是，它在其他任何地方都有效。Notepadd++运行得很好，我知道的几乎每个html编辑器都运行得很好。这是代码。

<script language="javascript">

function genDiv(){

var brdr = document.getElementById('udBorder').value;
var brdrw = document.getElementById('udBorderWidth').value;
var brdrr = document.getElementById('udBorderRadius').value;
var pad = document.getElementById('udPadding').value;
var padl = document.getElementById('udPaddingL').value;
var padr = document.getElementById('udPaddingR').value;
var padt = document.getElementById('udPaddingT').value;
var padb = document.getElementById('udPaddingB').value;
var back = document.getElementById('udBackground').value;
var bc1 = document.getElementById('udFirstC').value;
var bc2 = document.getElementById('udSecondC').value;
var c = document.getElementById('udColor').value;

var brdrch = document.getElementById('borderAlt');
var padch = document.getElementById('paddingAlt');
var backch = document.getElementById('backAlt');

var result = document.getElementById('divRes');

if((brdrch.checked == true) && (padch.checked == true) && (backch.checked == true)){
result.innerHTML = "<div style=\"padding-left:" + padl + "px" + ";padding-right:" + padr + "px" + ";padding-top:" + padt + "px" + ";padding-bottom:" + padb + "px" + ";-webkit-background:linear-gradient(" + bc1 + "," + bc2 + ");-moz-background:linear-gradient(" + bc1 + "," + bc2 + ");-o-background:linear-gradient(" + bc1 + "," + bc2 + ");-ms-background:linear-gradient(" + bc1 + "," + bc2 + ");color:" + c + ";" + "\">   </div>";
}else if((brdrch.checked == true) && (padch.checked == true) && (backch.checked == false)){
result.innerHTML = "<div style=\"padding-left:" + padl + "px" + ";padding-right:" + padr + "px" + ";padding-top:" + padt + "px" + ";padding-bottom:" + padb + "px" + ";background:" + back + ";color:" + c + ";" + "\">   </div>";
}else if((brdrch.checked == true) && (padch.checked == false) && (backch.checked == false)){
result.innerHTML = "<div style=\"padding:" + pad + "px" + ";background:" + back + ";color:" + c + ";" + "\">   </div>";
}else if((brdrch.checked == true) && (padch.checked == false) && (backch.checked == true)){
result.innerHTML = "<div style=\"padding:" + pad + "px" + ";-webkit-background:linear-gradient(" + bc1 + "," + bc2 + ");-moz-background:linear-gradient(" + bc1 + "," + bc2 + ");-o-background:linear-gradient(" + bc1 + "," + bc2 + ");-ms-background:linear-gradient(" + bc1 + "," + bc2 + ");color:" + c + ";" + "\">   </div>";
}else if((brdrch.checked == false) && (padch.checked == true) && (backch.checked == true)){
result.innerHTML = "<div style=\"border:" + brdr + " " + brdrw+"px" + ";border-radius:" + brdrr + "px" + ";padding-left:" + padl + "px" + ";padding-right:" + padr + "px" + ";padding-top:" + padt + "px" + ";padding-bottom:" + padb + "px" + ";-webkit-background:linear-gradient(" + bc1 + "," + bc2 + ");-moz-background:linear-gradient(" + bc1 + "," + bc2 + ");-o-background:linear-gradient(" + bc1 + "," + bc2 + ");-ms-background:linear-gradient(" + bc1 + "," + bc2 + ");color:" + c + ";" + "\">   </div>";
}else if((brdrch.checked == false) && (padch.checked == true) && (backch.checked == false)){
result.innerHTML = "<div style=\"border:" + brdr + " " + brdrw+"px" + ";border-radius:" + brdrr + "px" + ";padding-left:" + padl + "px" + ";padding-right:" + padr + "px" + ";padding-top:" + padt + "px" + ";padding-bottom:" + padb + "px" + ";background:" + back + ";color:" + c + ";" + "\">   </div>";
}else if((brdrch.checked == false) && (padch.checked == false) && (backch.checked == true)){
result.innerHTML = "<div style=\"border:" + brdr + " " + brdrw+"px" + ";border-radius:" + brdrr + "px" + ";padding:" + pad + "px" + ";-webkit-background:linear-gradient(" + bc1 + "," + bc2 + ");-moz-background:linear-gradient(" + bc1 + "," + bc2 + ");-o-background:linear-gradient(" + bc1 + "," + bc2 + ");-ms-background:linear-gradient(" + bc1 + "," + bc2 + ");color:" + c + ";" + "\">   </div>";
}else{
result.innerHTML = "<div style=\"border:" + brdr + " " + brdrw+"px" + ";border-radius:" + brdrr + "px" + ";padding:" + pad + "px" + ";background:" + back + ";color:" + c + ";" + "\"> </div>";
}
}

</script>
<div style="border:solid 1px #000;padding:5px;text-align:center;background:#FFF;color:#000;">

<h1>&lt;div&gt; Generator</h1>
<hr/>

<div id="border">
<b>Border:</b> <input type="text" id="udBorder" value="solid" placeholder="Enter Border Type"/>
<br/>
Width: <input type="text" id="udBorderWidth"  value="1" placeholder="Enter Border Width"/>
<br/>
Radius: <input type="text" id="udBorderRadius" value="5" placeholder="Enter Border Radius"/><br/>
</div>

<input type="checkbox" id="borderAlt" onclick="borderAdj();"/> No border

<script language="javascript">

function borderAdj(){
var ch = document.getElementById('borderAlt');
var b = document.getElementById('border');

if(ch.checked == true){
b.style.opacity = '.5';
}else{
b.style.opacity = '1';
}
}

</script>

<hr/>

<div id="padding">
<span id="padding1">
<b>Padding:</b> <input type="text" id="udPadding" value="2" placeholder="Enter Padding Amount"/>
</span>
<span style="display:none;" id="padding4">

Padding-left: <input type="text" id="udPaddingL" value="2" placeholder="Enter Padding Amount"/><br/>
Padding-right: <input type="text" id="udPaddingR" value="2" placeholder="Enter Padding Amount"/><br/>
Padding-top: <input type="text" id="udPaddingT" value="2" placeholder="Enter Padding Amount"/><br/>
Padding-bottom: <input type="text" id="udPaddingB" value="2" placeholder="Enter Padding Amount"/><br/>

</span>
<br/>
<input type="checkbox" id="paddingAlt" onclick="padAdj();"/> Padding by side
</div>
<script language="javascript">

function padAdj(){
var ch = document.getElementById('paddingAlt');
var oneP = document.getElementById('padding1');
var fourP = document.getElementById('padding4');

if(ch.checked == true){
oneP.style.display='none';
fourP.style.display='';
}else{
oneP.style.display='';
fourP.style.display='none';
}
}

</script>

<hr/>

<div id="background">

<span id="normBack">
<b>Background:</b> <input type="text" id="udBackground" value="#FFFFFF" placeholder="Enter Background"/>
</span>

<span id="linBack" style="display:none;">

First Color: <input type="text" id="udFirstC" value="#FFFFFF" placeholder="First Color"/><br/>
Second color: <input type="text" id="udSecondC" value="#000000" placeholder="Second Color"/>

</span>

<br/>

<input type="checkbox" id="backAlt" onclick="backAdj();"/> Linear background

</div>
<script language="javascript">

function backAdj(){
var ch = document.getElementById('backAlt');
var n = document.getElementById('normBack');
var l = document.getElementById('linBack');

if(ch.checked == true){
n.style.display='none';
l.style.display='';
}else{
n.style.display='';
l.style.display='none';
}
}

</script>

<hr/>

<div id="color">

<b>Color:</b> <input type="text" id="udColor" value="#000000" placeholder="Enter Color"/>

</div>

<hr/>

<input type="button" onclick="genDiv();" value="Generate!"/>

</div>

<br/><br/>

Result Code:<br/>

<textarea id="divRes" cols="20" rows="5" contenteditable="true"></textarea>

函数genDiv（）{
var brdr=document.getElementById（'udBorder'）。值；
var brdrw=document.getElementById（'udBorderWidth'）。值；
var brdrr=document.getElementById（'udBorderRadius'）。值；
var pad=document.getElementById（'udPadding'）。值；
var padl=document.getElementById（'udPaddingL'）.value；
var padr=document.getElementById（'udPaddingR'）.value；
var padt=document.getElementById（'udPaddingT'）.value；
var padb=document.getElementById（'udPaddingB'）.value；
var back=document.getElementById（'udBackground'）.value；
var bc1=document.getElementById（'udFirstC'）。值；
var bc2=document.getElementById（'udSecondC'）。值；
var c=document.getElementById（'udColor'）。值；
var brdrch=document.getElementById（'borderAlt'）；
var padch=document.getElementById（'paddingAlt'）；
var backch=document.getElementById（'backAlt'）；
var result=document.getElementById（'divRes'）；
如果（（brdrch.checked==true）和&（padch.checked==true）和&（backch.checked==true））{
result.innerHTML=“”；
}else如果（（brdrch.checked==true）和&（padch.checked==true）和&（backch.checked==false））{
result.innerHTML=“”；
}else如果（（brdrch.checked==true）和&（padch.checked==false）和&（backch.checked==false））{
result.innerHTML=“”；
}else如果（（brdrch.checked==true）和&（padch.checked==false）和&（backch.checked==true））{
result.innerHTML=“”；
}else如果（（brdrch.checked==false）&&&（padch.checked==true）&&（backch.checked==true））{
result.innerHTML=“”；
}else如果（（brdrch.checked==false）&&（padch.checked==true）&&（backch.checked==false））{
result.innerHTML=“”；
}else如果（（brdrch.checked==false）&&&（padch.checked==false）&&（backch.checked==true））{
result.innerHTML=“”；
}否则{
result.innerHTML=“”；
}
}
div发生器

边界：


宽度：


半径：

无边界
函数borderAdj（）{
var ch=document.getElementById（'borderAlt'）；
var b=document.getElementById（'border'）；
如果（ch.checked==true）{
b、 style.opacity='.5'；
}否则{
b、 style.opacity='1'；
}
}

衬垫：
左侧填充：

右边填充：

填充顶部：

填充底部：



并排填充
函数paddj（）{
var ch=document.getElementById（'paddingAlt'）；
var oneP=document.getElementById（'padding1'）；
var fourP=document.getElementById（'padding4'）；
如果（ch.checked==true）{
oneP.style.display='none'；
fourP.style.display=''；
}否则{
oneP.style.display=''；
fourP.style.display='none'；
}
}

背景：
第一种颜色：

第二种颜色：


线性背景
函数backAdj（）{
var ch=document.getElementById（'backAlt'）；
var n=document.getElementById（'normBack'）；
var l=document.getElementById（'linBack'）；
如果（ch.checked==true）{
n、 style.display='none'；
l、 style.display=''；
}否则{
n、 style.display=''；
l、 style.display='none'；
}
}

颜色：




结果代码：

很抱歉代码太长了，我就是找不到有什么问题。在这一点上，我责怪Wapka。提前谢谢

这是一个JSFIDLE

---

似乎在某个地方，Wapka在javascript文本中有

转义的

字符，这解释了为什么它不起作用

例如，您的产品线：

if((brdrch.checked == true) && (padch.checked == true) && (backch.checked == true)){

已翻译为：

if((brdrch.checked == true) && (padch.checked == true) && (backch.checked == true)){

因此，该行在第一个

处终止，导致javascript无效

恐怕我不熟悉Wapka，但也许有另一种机制可以用来导入javascript，它不会像转义html标记一样转义字符

您是否尝试过在脚本标记中指定
？（不确定这是否有帮助？）


更新
或者，作为一种技巧，您可以嵌套逻辑AND语句，例如

if(brdrch.checked) {
    if(padch.checked) {
        if(backch.checked) {

            //do your thang
        }
    }
}


更新#2
逻辑重分解

if(brdrch.checked) {
    if(padch.checked) {
        if (backch.checked) {
            result.innerHTML = "<div style=\"padding-left:" + padl + "px" + ";padding-right:" + padr + "px" + ";padding-top:" + padt + "px" + ";padding-bottom:" + padb + "px" + ";-webkit-background:linear-gradient(" + bc1 + "," + bc2 + ");-moz-background:linear-gradient(" + bc1 + "," + bc2 + ");-o-background:linear-gradient(" + bc1 + "," + bc2 + ");-ms-background:linear-gradient(" + bc1 + "," + bc2 + ");color:" + c + ";" + "\">   </div>";
        } else {
            result.innerHTML = "<div style=\"padding-left:" + padl + "px" + ";padding-right:" + padr + "px" + ";padding-top:" + padt + "px" + ";padding-bottom:" + padb + "px" + ";background:" + back + ";color:" + c + ";" + "\">   </div>";
        }
    } else {
        if (backch.checked) {
            result.innerHTML = "<div style=\"padding:" + pad + "px" + ";-webkit-background:linear-gradient(" + bc1 + "," + bc2 + ");-moz-background:linear-gradient(" + bc1 + "," + bc2 + ");-o-background:linear-gradient(" + bc1 + "," + bc2 + ");-ms-background:linear-gradient(" + bc1 + "," + bc2 + ");color:" + c + ";" + "\">   </div>";
        } else {
            result.innerHTML = "<div style=\"padding:" + pad + "px" + ";background:" + back + ";color:" + c + ";" + "\">   </div>";
        }
    }
} else {
    if(padch.checked) {
        if (backch.checked) {
            result.innerHTML = "<div style=\"border:" + brdr + " " + brdrw+"px" + ";border-radius:" + brdrr + "px" + ";padding-left:" + padl + "px" + ";padding-right:" + padr + "px" + ";padding-top:" + padt + "px" + ";padding-bottom:" + padb + "px" + ";-webkit-background:linear-gradient(" + bc1 + "," + bc2 + ");-moz-background:linear-gradient(" + bc1 + "," + bc2 + ");-o-background:linear-gradient(" + bc1 + "," + bc2 + ");-ms-background:linear-gradient(" + bc1 + "," + bc2 + ");color:" + c + ";" + "\">   </div>";
        } else {
            result.innerHTML = "<div style=\"border:" + brdr + " " + brdrw+"px" + ";border-radius:" + brdrr + "px" + ";padding-left:" + padl + "px" + ";padding-right:" + padr + "px" + ";padding-top:" + padt + "px" + ";padding-bottom:" + padb + "px" + ";background:" + back + ";color:" + c + ";" + "\">   </div>";
        }
    } else {
        if (backch.checked) {
            result.innerHTML = "<div style=\"border:" + brdr + " " + brdrw+"px" + ";border-radius:" + brdrr + "px" + ";padding:" + pad + "px" + ";-webkit-background:linear-gradient(" + bc1 + "," + bc2 + ");-moz-background:linear-gradient(" + bc1 + "," + bc2 + ");-o-background:linear-gradient(" + bc1 + "," + bc2 + ");-ms-background:linear-gradient(" + bc1 + "," + bc2 + ");color:" + c + ";" + "\">   </div>";
        } else {
            result.innerHTML = "<div style=\"border:" + brdr + " " + brdrw+"px" + ";border-radius:" + brdrr + "px" + ";padding:" + pad + "px" + ";background:" + back + ";color:" + c + ";" + "\"> </div>";
        }
    }
}

if（brdrch.选中）{
如果（padch.选中）{
如果（反勾选）{
result.innerHTML=“”；
}否则{
result.innerHTML=“”；
}
}否则{
如果（反勾选）{
result.innerHTML=“”；
}否则{
result.innerHTML=“”；
}
}
}否则{
如果（padch.选中）{
如果（反勾选）{
result.innerHTML=“”；
}否则{
result.innerHTML=“”；
}
}否则{
如果（反勾选）{
result.innerHTML=“”；
}否则{
result.innerHTML=“”；
}
}
}

看，妈妈，不，你好。我在这里添加了一个JSFIDLE：Wapka上是否有当前承载此功能的链接？这将帮助我理解这里的问题，我没有把它放在主站点上，因为它缺乏功能。好吧，要么是我有语法错误，要么是它不工作。这使得代码在记事本++中变得毫无用处，但我的网站上仍然有原始代码。我重新考虑了逻辑，省略了所有符号。（参见更新#2）这里有一个JSFIDLE:。希望它能起作用：谢谢，这次修复成功了！它工作得很好（我忘了在css中添加一个通用的背景规范，但我可以修复它），我希望有一天他们能修复它。