代码适用于除Wapka之外的所有内容。为什么？

Question

好的，所以昨晚我花了大约三个小时编写一个div生成器，我已经测试过了。有用。问题是：
我使用Wapka.mobi免费创建网站（因为我太小，没有正式的编程生涯），我运行this website。在网站上，我有一个编程中心，为新程序员提供了有用的工具（目前是十六进制和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>

我为代码这么长时间而道歉，我无法发现它有什么问题。在这一点上，我责怪Wapka。提前谢谢。

这是一个小伙伴 https://jsfiddle.net/4nkmxep9/

Answer 1

看起来在某个地方，Wapka在您的javascript文本中包含escaped个字符，这就解释了为什么它不起作用。

例如，您的行：

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

已被翻译为：

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

因此该行在第一个;处终止，导致javascript无效。

我担心我对Wapka不熟悉，但也许还有另一种机制可以用来导入javascript，这些机制并没有逃脱角色，就好像它们都是html标记一样。

您是否尝试在脚本代码中指定<script type="text/javascript">？ （不确定这是否有帮助？）

更新

或者，作为一个黑客，你可以嵌套你的逻辑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>";
        }
    }
}

看妈妈 - 没有＆＃39; ands