Databases
StackOverflow2013
Postsdbo
POjavascript change colors conditionally
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjavascript change colors conditionally
    primarykey
    data
    text
    <p>Lets say you have three elements, all white or no color applied at all. if any element clicked/selected it turns red, If any two elements clicked/selected they're red &amp; green. If all three elements clicked/selected they're red, green, blue. Now when any element is clicked a second time it will turn back to white, but no matter what they still need to follow theses rules.</p> <blockquote> <p>1 element = red</p> <p>2 element = red, green</p> <p>3 element = red, green, blue</p> </blockquote> <p>With help I have so far came up with this code but cannot figure out how to make the event react based on the conditions needed. For example if all three are clicked and we click to remove the green color, then the blue will need to be green. <a href="http://jsfiddle.net/ceb73/" rel="nofollow">jsFiddle with classes example</a> </p> <p>css</p> <pre><code>.container { background-color: #ffffff; border: 1px solid blue; border-radius: 10px; width: 100px; height: 50px; } .red { background-color: #ff0000; } .green { background-color: #00ff00; } .blue { background-color: #0000ff; } </code></pre> <p>elements</p> <pre><code>&lt;div class='container' id='1' style='margin: 150px 0 0 75px; float: left;'&gt;&lt;/div&gt; &lt;div class='container' id='2' style='margin: 150px 0 0 175px; float: left;'&gt;&lt;/div&gt; &lt;div class='container' id='3' style='margin: 150px 0 0 220px; float: left;'&gt;&lt;/div&gt; </code></pre> <p>Javascript</p> <pre><code>window.onload=function () { // set color classes into an array var classes = ["red", "green", "blue"]; var nextClass = 0; var element = document.querySelectorAll( ".container" ); // loop through container class elements one at a time onclick run changeClass for ( var i = 0; i &lt; element.length; i++ ) { element[i].addEventListener( "click", changeClass ); } function changeClass ( eventListener ) { var element = eventListener.currentTarget; var currentClass = hasClass( element, classes ); if ( currentClass ) { element.classList.remove( currentClass ) } else { element.classList.add( classes[nextClass] ); nextClass = (nextClass + 1 ) % classes.length; } }//end function function hasClass( element, classes ) { // loop through classes array for ( var i = 0; i &lt; classes.length; i++ ) { // onclick if all classes applied return currentClass if ( element.classList.contains( classes[i] ) ) { return classes[i]; } } }// end function }//end onload </code></pre> <p>Is there a way to load these classes based on the conditions needed?</p> <p>Could also load the colors inline using <code>element.style.backgroundColor</code>, but still doesn't help me. The last person that helped me was very talented and I'm hoping for the same help :)... Have learned a lot so far but still stuck, close but just can't get it right.</p> <p>Here is the code I came up with: See it in action <a href="http://jsfiddle.net/gSn9Q/" rel="nofollow">My updated code jsFiddle</a></p> <pre><code> window.onload=function () { var classes = ["red", "green", "blue"]; var nextClass = 0; var element = document.querySelectorAll( ".container" ); for ( var i = 0; i &lt; element.length; i++ ) { element[i].addEventListener( "click", changeClass ); } function changeClass ( eventListener ) { var elementG = document.querySelector( '.green' ); var elementB = document.querySelector( '.blue' ); var elementR = document.querySelector( '.red' ); var element = eventListener.currentTarget; var currentClass = hasClass( element, classes ); var red = removeRed( element, classes ); var green = removeGreen( element, classes ); if ( currentClass ) { element.classList.remove( currentClass ) nextClass--; if (nextClass &lt; 0) { nextClass += classes.length; } } else { element.classList.add( classes[nextClass] ); nextClass = (nextClass + 1 ) % classes.length; } if ( red &amp;&amp; elementB != null ) { elementB.classList.add( 'red' ); elementB.classList.remove( 'blue' ); } else if ( red &amp;&amp; elementB == null &amp;&amp; elementG != null) { elementG.classList.add( 'red' ); elementG.classList.remove( 'green' ) } if ( green &amp;&amp; elementB != null ) { elementB.classList.add( 'green' ); elementB.classList.remove( 'blue' ); } }//end function function hasClass( element, classes ) { // loop through classes array for ( var i = 0; i &lt; classes.length; i++ ) { // if all three classes if ( element.classList.contains( classes[i] ) ) { return classes[i]; } } }// end function function removeRed( element, classes ) { if ( element.classList.contains( classes[0] ) ) { return classes[0]; } }// end function function removeGreen( element, classes ) { if ( element.classList.contains( classes[1] ) ) { return classes[1] } } }//end onload </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. UShandmdmr
    1. UShandmdmr
    plurals
    1. PL
      singulars
      1. LTLinked
    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. COI recommend you learn jquery. http://www.codeschool.com/courses/try-jquery
      singulars
      1. POjavascript change colors conditionally
      1. USkilkadg
    2. COI know how to use jQuery, this has to be done with JavaScript only. Yes, it would be a lot easier if I could use jQuery.
      singulars
      1. POjavascript change colors conditionally
      1. UShandmdmr
 

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