Note that there are some explanatory texts on larger screens.

plurals
  1. POSwitching backgrounds, while switching text
    primarykey
    data
    text
    <p>I was able to make the text loop infinitely and the body color change once:</p> <pre><code>&lt;?php?&gt; &lt;style type="text/css"&gt; &lt;!-- header{background-color:orange;} #color1{background-color:red;} #color2{background-color:green;} #color3{background-color:blue;} --&gt; &lt;/style&gt; &lt;script type="text/javascript"&gt; &lt;!-- var flip = (function() { var flip = ['_addText1','_addText2','_addText3']; var count = -1; return function() { return flip[++count % flip.length]; } }()); --&gt; &lt;/script&gt; &lt;body id="color1"&gt; &lt;header onclick="document.getElementById('click').innerHTML = flip(); document.getElementById('color1').setAttribute('id', 'color2');"&gt; &lt;h1&gt;StaticText&lt;a id="click"&gt;_ThisWillChange&lt;/a&gt;&lt;/h1&gt; &lt;p&gt;Click anywhere in the header to change the text above.&lt;br /&gt; This will also change the body color.&lt;/p&gt; &lt;/header&gt; &lt;/body&gt; &lt;?php?&gt; </code></pre> <p>The first problem is; if I add more color changes to the 'onclick' attribute it stops working all together. Basically I want the color to loop with the text:</p> <pre><code>document.getElementById('color2').setAttribute('id', 'color3'); document.getElementById('color3').setAttribute('id', 'color1'); </code></pre> <p>The second problem is that I'm not really 'fluent' in javascript. I'm actually lucky I figured out this much to be honest.</p> <p>I'm sure there's a way to put it all into the javascript (to keep my HTML clean), but I don't know how.</p> <p>Any help would be most appreciated! Thanks in advance...</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.
    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