javascript - Code works in everything except for Wapka. Why? -
okay, spent 3 hours on coding div generator last night, , have tested it. works. problem this:
use wapka.mobi create websites free (since young have official programming career), , run this website. on site, have programming hub useful tools newer programmers ( hexadecimal , rgba calculator @ moment), , i'd add generator it. sadly, code doesn't work in wapka. strange part works everywhere else. notepadd++ runs fine, , every html editor know. here's code.
<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 = 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:" + + ";color:" + c + ";" + "\"> </div>"; }else if((brdrch.checked == true) && (padch.checked == false) && (backch.checked == false)){ result.innerhtml = "<div style=\"padding:" + pad + "px" + ";background:" + + ";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:" + + ";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:" + + ";color:" + c + ";" + "\"> </div>"; } } </script> <div style="border:solid 1px #000;padding:5px;text-align:center;background:#fff;color:#000;"> <h1><div> 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 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> i apologize code being long, can't find wrong it. @ point, blame wapka. in advance.
here's jsfiddle https://jsfiddle.net/4nkmxep9/
it appears somewhere along line, wapka has escaped characters within javascript text, explains why not working.
for example, line:
if((brdrch.checked == true) && (padch.checked == true) && (backch.checked == true)){ has been translated to:
if((brdrch.checked == true) && (padch.checked == true) && (backch.checked == true)){ so line being terminated @ first ; , resulting in invalid javascript.
i'm afraid i'm unfamiliar wapka, maybe there mechanism can use import javascript doesnt escape characters if html markup.
have tried specifying <script type="text/javascript"> in script tags? (not sure if help?)
update
alternatively, bit of hack, nest logical , statements instead, e.g.
if(brdrch.checked) { if(padch.checked) { if(backch.checked) { //do thang } } } update #2
logical re-factoring
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:" + + ";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:" + + ";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:" + + ";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:" + + ";color:" + c + ";" + "\"> </div>"; } } } look mom - no 'ands
Comments
Post a Comment