Databases
StackOverflow2013
Postsdbo
POJavascript to check ul ID and change a variable accordingly
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJavascript to check ul ID and change a variable accordingly
    primarykey
    data
    text
    <p>I am creating a simple function that allows hovers based on sprites. I don't want to repeat this code based on every possible car type (compact, convertible, suv, etc). Instead I want an if statement that checks if the ul has a certain ID and if so changes the variable to one of said car types. This variable will be placed in an img url. Here is the javascript code I Have so far.</p> <pre><code>var img; if (document.getElementById("car")) { var img = "compact"; } function rad_glowOn() { document.getElementById("radiator").style.backgroundImage = "url(/af-demo/images/TW/"+img+"-carparts-glow.png)"; document.getElementById("healthAlert").style.display = "block"; } </code></pre> <p>Here is the HTML that it is referencing. The UL's ID will be changing based on the car. Haven't setup that yet.</p> <pre><code>&lt;ul id="car"&gt; &lt;li id="carLinks"&gt; &lt;div id="healthAlert"&gt; &lt;p class="healthPopup-Header"&gt;Radiator&lt;/p&gt; &lt;p&gt;Radiator Leaking. Lorem Ipsum&lt;/p&gt; &lt;/div&gt; &lt;a href="#" id="radLink" onmouseover="javascript:rad_glowOn();" onmouseout="javascript:rad_glowOff();"&gt; &lt;/a&gt; &lt;a href="#" id="engLink" onmouseover="javascript:eng_glowOn();" onmouseout="javascript:eng_glowOff();"&gt; &lt;/a&gt; &lt;a href="#" id="batLink" onmouseover="javascript:bat_glowOn();" onmouseout="javascript:bat_glowOff();"&gt; &lt;/a&gt; &lt;a href="#" id="frontWheel" onmouseover="javascript:mec_glowOn();" onmouseout="javascript:mec_glowOff();"&gt; &lt;/a&gt; &lt;a href="#" id="backWheel" onmouseover="javascript:mec_glowOn();" onmouseout="javascript:mec_glowOff();"&gt; &lt;/a&gt; &lt;a href="#" id="passSeat" onmouseover="javascript:mec_glowOn();" onmouseout="javascript:mec_glowOff();"&gt; &lt;/a&gt; &lt;a href="#" id="driverSeat" onmouseover="javascript:mec_glowOn();" onmouseout="javascript:mec_glowOff();"&gt; &lt;/a&gt; &lt;/li&gt; &lt;li id="radiator"&gt; &lt;/li&gt; &lt;li id="engine"&gt; &lt;/li&gt; &lt;li id="battery"&gt; &lt;/li&gt; &lt;li id="mechanical"&gt; &lt;/li&gt; &lt;/ul&gt; </code></pre> <p>The car types are not actual ID's or classes. I have a list of images and the variable is the first section of the image which is reflected in:</p> <pre><code>style.backgroundImage = "url(/af-demo/images/TW/"+img+"-carparts-glow.png)"; </code></pre> <p>Right now I have to specify that image tag directly aka:</p> <pre><code>.style.backgroundImage = "url('/af-demo/images/TW/compact-carparts.png')" </code></pre> <p>My goal is to have a simple if statement that checks the ul's ID and assigns a value to the img variable that will be reflected to the above.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USuser2112618
    1. USuser2112618
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COPlease edit this into a better formed question. Also, `compact`, `convertible`, and `suv` are examples of classes, not IDs, as they are not necessarily unique, judging by the context of what you are doing.
      singulars
      1. POJavascript to check ul ID and change a variable accordingly
      1. UScrush
    2. COI have edited my post a bit more. Hopefully this adds clarity.
      singulars
      1. POJavascript to check ul ID and change a variable accordingly
      1. USuser2112618
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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