javascript - 代码适用于除 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。提前致谢。

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

Answer 1

似乎在这条线上的某个地方，Wapka 有 escaped 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 标记一样转义字符。

您是否尝试过指定 <script type="text/javascript">在你的脚本标签中？ (不确定这是否有帮助？)

---

更新

或者，作为一种 hack，您可以改为嵌套逻辑 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>";
        }
    }
}

妈妈你看 - 没有“和”