title: Code works in everything except for Wapka. Why?
body: <p>Okay, so I spent about three hours on coding a div generator last night, and I have tested it. It works. The problem is this:<br/>
  I use <a href="http://wapka.mobi/" rel="nofollow">Wapka.mobi</a> to create websites for free (since I am too young to have an official programming career), and I run <a href="http://m-thatplace.wapka.mobi" rel="nofollow">this website</a>. On the site, I have a programming hub with useful tools for newer programmers ( a hexadecimal and rgba calculator at the moment), and I'd like to add the generator to it. Sadly, this code doesn't work in Wapka. The strange part is that it works everywhere else. Notepadd++ runs it fine, and so does just about every html editor I know. Here's the code.<br/></p>
  
  <pre><code>&lt;script language="javascript"&gt;
  
  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) &amp;&amp; (padch.checked == true) &amp;&amp; (backch.checked == true)){
  result.innerHTML = "&lt;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 + ";" + "\"&gt;   &lt;/div&gt;";
  }else if((brdrch.checked == true) &amp;&amp; (padch.checked == true) &amp;&amp; (backch.checked == false)){
  result.innerHTML = "&lt;div style=\"padding-left:" + padl + "px" + ";padding-right:" + padr + "px" + ";padding-top:" + padt + "px" + ";padding-bottom:" + padb + "px" + ";background:" + back + ";color:" + c + ";" + "\"&gt;   &lt;/div&gt;";
  }else if((brdrch.checked == true) &amp;&amp; (padch.checked == false) &amp;&amp; (backch.checked == false)){
  result.innerHTML = "&lt;div style=\"padding:" + pad + "px" + ";background:" + back + ";color:" + c + ";" + "\"&gt;   &lt;/div&gt;";
  }else if((brdrch.checked == true) &amp;&amp; (padch.checked == false) &amp;&amp; (backch.checked == true)){
  result.innerHTML = "&lt;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 + ";" + "\"&gt;   &lt;/div&gt;";
  }else if((brdrch.checked == false) &amp;&amp; (padch.checked == true) &amp;&amp; (backch.checked == true)){
  result.innerHTML = "&lt;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 + ";" + "\"&gt;   &lt;/div&gt;";
  }else if((brdrch.checked == false) &amp;&amp; (padch.checked == true) &amp;&amp; (backch.checked == false)){
  result.innerHTML = "&lt;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 + ";" + "\"&gt;   &lt;/div&gt;";
  }else if((brdrch.checked == false) &amp;&amp; (padch.checked == false) &amp;&amp; (backch.checked == true)){
  result.innerHTML = "&lt;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 + ";" + "\"&gt;   &lt;/div&gt;";
  }else{
  result.innerHTML = "&lt;div style=\"border:" + brdr + " " + brdrw+"px" + ";border-radius:" + brdrr + "px" + ";padding:" + pad + "px" + ";background:" + back + ";color:" + c + ";" + "\"&gt; &lt;/div&gt;";
  }
  }
  
  &lt;/script&gt;
  &lt;div style="border:solid 1px #000;padding:5px;text-align:center;background:#FFF;color:#000;"&gt;
  
  &lt;h1&gt;&amp;lt;div&amp;gt; Generator&lt;/h1&gt;
  &lt;hr/&gt;
  
  &lt;div id="border"&gt;
  &lt;b&gt;Border:&lt;/b&gt; &lt;input type="text" id="udBorder" value="solid" placeholder="Enter Border Type"/&gt;
  &lt;br/&gt;
  Width: &lt;input type="text" id="udBorderWidth"  value="1" placeholder="Enter Border Width"/&gt;
  &lt;br/&gt;
  Radius: &lt;input type="text" id="udBorderRadius" value="5" placeholder="Enter Border Radius"/&gt;&lt;br/&gt;
  &lt;/div&gt;
  
  &lt;input type="checkbox" id="borderAlt" onclick="borderAdj();"/&gt; No border
  
  &lt;script language="javascript"&gt;
  
  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';
  }
  }
  
  &lt;/script&gt;
  
  &lt;hr/&gt;
  
  &lt;div id="padding"&gt;
  &lt;span id="padding1"&gt;
  &lt;b&gt;Padding:&lt;/b&gt; &lt;input type="text" id="udPadding" value="2" placeholder="Enter Padding Amount"/&gt;
  &lt;/span&gt;
  &lt;span style="display:none;" id="padding4"&gt;
  
  Padding-left: &lt;input type="text" id="udPaddingL" value="2" placeholder="Enter Padding Amount"/&gt;&lt;br/&gt;
  Padding-right: &lt;input type="text" id="udPaddingR" value="2" placeholder="Enter Padding Amount"/&gt;&lt;br/&gt;
  Padding-top: &lt;input type="text" id="udPaddingT" value="2" placeholder="Enter Padding Amount"/&gt;&lt;br/&gt;
  Padding-bottom: &lt;input type="text" id="udPaddingB" value="2" placeholder="Enter Padding Amount"/&gt;&lt;br/&gt;
  
  &lt;/span&gt;
  &lt;br/&gt;
  &lt;input type="checkbox" id="paddingAlt" onclick="padAdj();"/&gt; Padding by side
  &lt;/div&gt;
  &lt;script language="javascript"&gt;
  
  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';
  }
  }
  
  &lt;/script&gt;
  
  &lt;hr/&gt;
  
  &lt;div id="background"&gt;
  
  &lt;span id="normBack"&gt;
  &lt;b&gt;Background:&lt;/b&gt; &lt;input type="text" id="udBackground" value="#FFFFFF" placeholder="Enter Background"/&gt;
  &lt;/span&gt;
  
  &lt;span id="linBack" style="display:none;"&gt;
  
  First Color: &lt;input type="text" id="udFirstC" value="#FFFFFF" placeholder="First Color"/&gt;&lt;br/&gt;
  Second color: &lt;input type="text" id="udSecondC" value="#000000" placeholder="Second Color"/&gt;
  
  &lt;/span&gt;
  
  &lt;br/&gt;
  
  &lt;input type="checkbox" id="backAlt" onclick="backAdj();"/&gt; Linear background
  
  &lt;/div&gt;
  &lt;script language="javascript"&gt;
  
  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';
  }
  }
  
  &lt;/script&gt;
  
  &lt;hr/&gt;
  
  &lt;div id="color"&gt;
  
  &lt;b&gt;Color:&lt;/b&gt; &lt;input type="text" id="udColor" value="#000000" placeholder="Enter Color"/&gt;
  
  &lt;/div&gt;
  
  &lt;hr/&gt;
  
  &lt;input type="button" onclick="genDiv();" value="Generate!"/&gt;
  
  &lt;/div&gt;
  
  &lt;br/&gt;&lt;br/&gt;
  
  Result Code:&lt;br/&gt;
  
  &lt;textarea id="divRes" cols="20" rows="5" contenteditable="true"&gt;&lt;/textarea&gt;
  </code></pre>
  
  <p>I apologize for the code being so long, I just can't find anything wrong with it. At this point, I blame Wapka. Thanks in advance.</p>
  
  <p>Here's a jsfiddle
  <a href="https://jsfiddle.net/4nkmxep9/" rel="nofollow">https://jsfiddle.net/4nkmxep9/</a></p>