Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to create a 'for loop' for a variable to run 'if' statements on specific divs
    primarykey
    data
    text
    <p>I need to create a piece of script that looks through a variety of products on a page, works out the percentage off using the 'was' and 'now' prices and then display an image for that product that represents the percentage off.</p> <p>So far I can loop through all the products and run the percentage script to display an image but the same image is shown on all products instead of different images for different percentages. Does anyone know how I can make the percentage script run for each product and not duplicate?</p> <p>Here's some dummy HTML:</p> <pre><code>&lt;div id="prods"&gt; &lt;div id="discountWasPrice" style="display:none;"&gt;50&lt;/div&gt; &lt;div id="discountSellPrice" style="display:none;"&gt;25&lt;/div&gt; &lt;div id="discount50"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div id="prods"&gt; &lt;div id="discountWasPrice" style="display:none;"&gt;75&lt;/div&gt; &lt;div id="discountSellPrice" style="display:none;"&gt;25&lt;/div&gt; &lt;div id="discount50"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div id="prods"&gt; &lt;div id="discountWasPrice" style="display:none;"&gt;10&lt;/div&gt; &lt;div id="discountSellPrice" style="display:none;"&gt;8&lt;/div&gt; &lt;div id="discount50"&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>And here's the javascript so far:</p> <pre><code>&lt;script type="text/javascript"&gt; var discount = $("div#discount50"); var prods = $("div#prods"); var discountLen = $("div#prods").length; for(var i = 0; i &lt; discountLen; i++){ var x = $('#discountWasPrice').text(); var f = $('#discountSellPrice').text(); var g = 1-(f/x); percent= (g * 100).toFixed(2); if ((percent &gt; 4.00) &amp;&amp; (percent &lt; 10.00)) { discount[i].innerHTML+="&lt;a href=\"\"&gt;&lt;img src=\"5percent.png\"&gt;&lt;/a&gt;";} if ((percent &gt; 9.00) &amp;&amp; (percent &lt; 15.00)) { discount[i].innerHTML+="&lt;a href=\"\"&gt;&lt;img src=\"10percent.png\"&gt;&lt;/a&gt;";} if ((percent &gt; 14.00) &amp;&amp; (percent &lt; 20.00)) { discount[i].innerHTML+="&lt;a href=\"\"&gt;&lt;img src=\"15percent.png\"&gt;&lt;/a&gt;";} if ((percent &gt; 19.00) &amp;&amp; (percent &lt; 25.00)) { discount[i].innerHTML+="&lt;a href=\"\"&gt;&lt;img src=\"20percent.png\"&gt;&lt;/a&gt;";} if ((percent &gt; 24.00) &amp;&amp; (percent &lt; 30.00)) { discount[i].innerHTML+="&lt;a href=\"\"&gt;&lt;img src=\"25percent.png\"&gt;&lt;/a&gt;";} if ((percent &gt; 29.00) &amp;&amp; (percent &lt; 35.00)) { discount[i].innerHTML+="&lt;a href=\"\"&gt;&lt;img src=\"30percent.png\"&gt;&lt;/a&gt;";} if ((percent &gt; 34.00) &amp;&amp; (percent &lt; 40.00)) { discount[i].innerHTML+="&lt;a href=\"\"&gt;&lt;img src=\"35percent.png\"&gt;&lt;/a&gt;";} if ((percent &gt; 39.00) &amp;&amp; (percent &lt; 45.00)) { discount[i].innerHTML+="&lt;a href=\"\"&gt;&lt;img src=\"40percent.png\"&gt;&lt;/a&gt;";} if ((percent &gt; 44.00) &amp;&amp; (percent &lt; 50.00)) { discount[i].innerHTML+="&lt;a href=\"\"&gt;&lt;img src=\"45percent.png\"&gt;&lt;/a&gt;";} if ((percent &gt; 49.00) &amp;&amp; (percent &lt; 60.00)) { discount[i].innerHTML+="&lt;a href=\"\"&gt;&lt;img src=\"50percent.png\"&gt;&lt;/a&gt;";} if ((percent &gt; 59.00) &amp;&amp; (percent &lt; 70.00)) { discount[i].innerHTML+="&lt;a href=\"\"&gt;&lt;img src=\"60percent.png\"&gt;&lt;/a&gt;";} if ((percent &gt; 69.00) &amp;&amp; (percent &lt; 75.00)) { discount[i].innerHTML+="&lt;a href=\"\"&gt;&lt;img src=\"70percent.png\"&gt;&lt;/a&gt;";} if (percent &gt; 74.00) { discount[i].innerHTML+="&lt;a href=\"\"&gt;&lt;img src=\"70percentplus.png\"&gt;&lt;/a&gt;";} } &lt;/script&gt; </code></pre> <p>Any help is much appreciated,</p> <p>Thanks</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

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