Note that there are some explanatory texts on larger screens.

plurals
  1. POAbout the evil of eval: How to clean up
    text
    copied!<p>I'm building a site that will (eventually) be the front-end for a game. I want to be able to dynamically build a list of "powers" that the user is able to purchase. In order to build these lists, I'm using a PHP-based SQL query, then passing it to Javascript for dynamic choices (some powers have prerequisite powers).</p> <ol> <li>I know there's a simpler way to do what I'm doing, but I'm not super concerned with that right now (I will be later, but I'm trying to get this functional and <em>then</em> clean) (again, I know this is non-optimal). </li> <li>I'm using eval to parse which divs to show, and I want to know how not to.</li> <li>I'm having issues getting my div names built right in the first place.</li> </ol> <p>Here's my code: Javascript (separate file)</p> <pre><code>function upgradeList(passed) { var PowerArray = []; var DetailPowerID = []; var EscapedPowerID = []; PowerArray.push([]); PowerArray = eval(passed); var OutputThing=""; for (i=0;i&lt;PowerArray.length;i++) { DetailPowerID[i] = 'detail' + PowerArray[i][0]; EscapedPowerID[i] = "'" + DetailPowerID[i] + "'"; } for (i=0;i&lt;PowerArray.length;i++) { OutputThing = OutputThing + "&lt;br&gt;&lt;a href='#' onClick='showUpgradeDetails(" + DetailPowerID[i] + ")'&gt;" + PowerArray[i][2] + "&lt;/a&gt;&lt;div class='hidden' id='" + DetailPowerID[i] + "'&gt;" + PowerArray[i][3] + "&lt;/div&gt;"; } document.getElementById("secondUpgrade").innerHTML=OutputThing; document.getElementById("secondUpgrade").style.display='block'; } } </code></pre> <p>PHP writing HTML and JS: {$AbleToUpgrade and $UpgradeList are both 2d arrays built from SQL queries)</p> <pre><code>echo "&lt;script name='UpgradeList'&gt;"; settype($UpgradesListSize[$i],"int"); for ($i=0;$i&lt;count($AbleToUpgrade);$i++) { echo "var UpgradeList" . $AbleToUpgrade[$i][0] . " = new Array();"; for ($j=0;$j&lt;=$UpgradesListSize[$i];$j++) { echo "UpgradeList" . $AbleToUpgrade[$i][0] . ".push(Array('" . $UpgradeList[$i][$j][0] . "', '" . $UpgradeList[$i][$j][1] . "', '" . $UpgradeList[$i][$j][2] . "', '" . $UpgradeList[$i][$j][3] . "', '" . $UpgradeList[$i][$j][4] . "'));"; } } echo "&lt;/script&gt;"; </code></pre> <p>... and, later...</p> <pre><code>echo "&lt;div id='SpendUpgrade'&gt; Select power to upgrade: &lt;ul&gt;"; for ($i=0;$i&lt;count($AbleToUpgrade);$i++) { echo "&lt;li&gt;&lt;a href='#' name='UpgradeList" . $AbleToUpgrade[$i][0] . "' onClick='upgradeList(this.name)'&gt;" . $AbleToUpgrade[$i][1] . " - " . $AbleToUpgrade[$i][2] . "&lt;/a&gt;&lt;/li&gt;"; } echo "&lt;/select&gt; &lt;div id='secondUpgrade' class='hidden'&gt; &lt;/div&gt; &lt;div id='thirdUpgrade' class='hidden'&gt; &lt;/div&gt; &lt;/div&gt;"; </code></pre> <p>When I load the page, I wind up with generated text like this:</p> <pre><code>&lt;a href="#" onclick="showUpgradeDetails(detail21)"&gt;Real Armor&lt;/a&gt; </code></pre> <p>and the corresponding div:</p> <pre><code>&lt;div class="hidden" id="detail21" style="display: none;"&gt;Your armor only works in the Waking&lt;/div&gt; </code></pre> <p>In order to get the div to show <code>(display:block;)</code>, I need to call the function like so:</p> <pre><code>showUpgradeDetails("detail21") </code></pre> <p>but I can't make JS / PHP write the quotes correctly. Help (with any or all of this?) please!</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload