Wapka

Wapka

关注
发信
关注(28)粉丝(399)

javascript - 代码适用于Wapka以外的所有内容。为什么？

好的，昨晚我花了大约三个小时来对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>


很抱歉，我的代码太长了，我找不到任何错误。在这一点上，我责怪瓦普卡。提前致谢。

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

最佳答案

看来，Wapka的某些地方在您的JavaScript文本中有escaped个字符，这说明了为什么它不起作用。

例如，您的行：

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


已翻译为：

if((brdrch.checked == true) &amp;&amp; (padch.checked == true) &amp;&amp; (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>";
        }
    }
}


看妈妈-不行

08-06 03:04
Powered by LMLPHP ©2024 Wapka 0.033128