Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Conor Vanoystaeyen
Conor Vanoystaeyen
16,687 Points

night button

I'm trying to make a button that makes everyting black except my picture or mp4 that I take from my nasaAPI bet I can't find out how to do it.

html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>nasa</title>
        <link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet">
        <link rel="stylesheet" href="css/screen.css">
    </head>
    <body>
        <div class="fullBackground">
            <main id="span">
                <svg id="nasaLogo" width="180px" height="151px" viewBox="0 0 180 151" version="1.1" xmlns="http://www.w3.org/2000/svg"  preserveAspectRatio="xMinYMin meet">
                    <g>
                        <path id="ronde" d="M82.615,151.268 C124.376,151.268 158.232,117.412 158.232,75.651 C158.232,33.89 124.376,0.034 82.615,0.034 C40.853,0.034 6.998,33.89 6.998,75.651 C6.998,117.412 40.853,151.268 82.615,151.268" fill="#3e66ca"></path>
                        <path class="wit" d="M81.834,103.687 C80.272,103.34 75.844,99.348 75.844,99.348 L74.456,100.649 C74.456,100.649 77.667,104.382 79.577,106.986 L81.834,103.687" fill="#FFFFFF"></path>
                        <path class="wit" d="M61.175,119.051 C61.667,119.051 62.065,118.654 62.065,118.162 C62.065,117.67 61.667,117.272 61.175,117.272 C60.683,117.272 60.285,117.67 60.285,118.162 C60.285,118.654 60.683,119.051 61.175,119.051" fill="#FFFFFF"></path>
                        <path class="wit" d="M62,126.02 C62.372,126.02 62.674,125.718 62.674,125.345 C62.674,124.972 62.372,124.67 62,124.67 C61.626,124.67 61.324,124.972 61.324,125.345 C61.324,125.718 61.626,126.02 62,126.02" fill="#FFFFFF"></path>
                        <path class="wit" d="M93.313,119.405 C93.652,119.405 93.926,119.131 93.926,118.791 C93.926,118.452 93.652,118.178 93.313,118.178 C92.974,118.178 92.699,118.452 92.699,118.791 C92.699,119.131 92.974,119.405 93.313,119.405" fill="#FFFFFF"></path>
                        <path class="wit" d="M114.514,106.461 C114.751,106.461 114.944,106.269 114.944,106.031 C114.944,105.794 114.751,105.601 114.514,105.601 C114.276,105.601 114.084,105.794 114.084,106.031 C114.084,106.269 114.276,106.461 114.514,106.461" fill="#FFFFFF"></path>
                        <path class="wit" d="M115.121,114.881 C115.359,114.881 115.551,114.689 115.551,114.451 C115.551,114.214 115.359,114.021 115.121,114.021 C114.884,114.021 114.692,114.214 114.692,114.451 C114.692,114.689 114.884,114.881 115.121,114.881" fill="#FFFFFF"></path>
                        <path class="wit" d="M119.093,130.813 C119.585,130.813 119.983,130.415 119.983,129.923 C119.983,129.432 119.585,129.033 119.093,129.033 C118.602,129.033 118.202,129.432 118.202,129.923 C118.202,130.415 118.602,130.813 119.093,130.813" fill="#FFFFFF"></path>
                        <path class="wit" d="M119.961,102.916 C120.469,102.916 120.881,102.503 120.881,101.995 C120.881,101.487 120.469,101.074 119.961,101.074 C119.453,101.074 119.04,101.487 119.04,101.995 C119.04,102.503 119.453,102.916 119.961,102.916" fill="#FFFFFF"></path>
                        <path class="wit" d="M120.221,108.076 C120.475,108.076 120.681,107.869 120.681,107.615 C120.681,107.361 120.475,107.155 120.221,107.155 C119.966,107.155 119.761,107.361 119.761,107.615 C119.761,107.869 119.966,108.076 120.221,108.076" fill="#FFFFFF"></path>
                        <path class="wit" d="M128.836,98.267 C129.09,98.267 129.296,98.061 129.296,97.807 C129.296,97.553 129.09,97.347 128.836,97.347 C128.582,97.347 128.376,97.553 128.376,97.807 C128.376,98.061 128.582,98.267 128.836,98.267" fill="#FFFFFF"></path>
                        <path class="wit" d="M137.256,107.917 C137.578,107.917 137.839,107.655 137.839,107.333 C137.839,107.011 137.578,106.75 137.256,106.75 C136.934,106.75 136.673,107.011 136.673,107.333 C136.673,107.655 136.934,107.917 137.256,107.917" fill="#FFFFFF"></path>
                        <path class="wit" d="M141.04,106.125 C141.463,106.125 141.807,105.782 141.807,105.358 C141.807,104.935 141.463,104.591 141.04,104.591 C140.616,104.591 140.272,104.935 140.272,105.358 C140.272,105.782 140.616,106.125 141.04,106.125" fill="#FFFFFF"></path>
                        <path class="wit" d="M130.225,114.211 C130.632,114.211 130.962,113.881 130.962,113.474 C130.962,113.068 130.632,112.738 130.225,112.738 C129.818,112.738 129.489,113.068 129.489,113.474 C129.489,113.881 129.818,114.211 130.225,114.211" fill="#FFFFFF"></path>
                        <path class="wit" d="M137.972,117.736 C138.192,117.736 138.371,117.558 138.371,117.338 C138.371,117.117 138.192,116.938 137.972,116.938 C137.752,116.938 137.573,117.117 137.573,117.338 C137.573,117.558 137.752,117.736 137.972,117.736" fill="#FFFFFF"></path>
                        <path class="wit" d="M88.756,19.045 C89.264,19.045 89.676,18.632 89.676,18.124 C89.676,17.615 89.264,17.203 88.756,17.203 C88.247,17.203 87.835,17.615 87.835,18.124 C87.835,18.632 88.247,19.045 88.756,19.045" fill="#FFFFFF"></path>
                        <path class="wit" d="M85.111,9.423 C85.399,9.423 85.632,9.189 85.632,8.901 C85.632,8.613 85.399,8.379 85.111,8.379 C84.822,8.379 84.588,8.613 84.588,8.901 C84.588,9.189 84.822,9.423 85.111,9.423" fill="#FFFFFF"></path>
                        <path class="wit" d="M84.22,21.317 C84.39,21.317 84.527,21.18 84.527,21.01 C84.527,20.841 84.39,20.703 84.22,20.703 C84.051,20.703 83.914,20.841 83.914,21.01 C83.914,21.18 84.051,21.317 84.22,21.317" fill="#FFFFFF"></path>
                        <path class="wit" d="M69.833,22.726 C70.206,22.726 70.508,22.424 70.508,22.051 C70.508,21.678 70.206,21.376 69.833,21.376 C69.46,21.376 69.158,21.678 69.158,22.051 C69.158,22.424 69.46,22.726 69.833,22.726" fill="#FFFFFF"></path>
                        <path class="wit" d="M68.596,21.165 C68.765,21.165 68.903,21.027 68.903,20.858 C68.903,20.689 68.765,20.551 68.596,20.551 C68.427,20.551 68.289,20.689 68.289,20.858 C68.289,21.027 68.427,21.165 68.596,21.165" fill="#FFFFFF"></path>
                        <path class="wit" d="M98.456,34.957 C98.812,34.957 99.1,34.668 99.1,34.312 C99.1,33.956 98.812,33.668 98.456,33.668 C98.1,33.668 97.812,33.956 97.812,34.312 C97.812,34.668 98.1,34.957 98.456,34.957" fill="#FFFFFF"></path>
                        <path class="letter" d="M106.312,72.656 C106.312,72.656 117.686,76.15 113.863,85.937 C113.863,85.937 108.916,95.919 94.246,91.058 L91.252,93.749 L91.143,84.266 L95.418,87.499 C95.418,87.499 105.227,90.169 105.4,84.548 C105.4,84.548 104.901,82.466 97.371,80.164 C97.371,80.164 88.604,77.474 90.601,69.748 C90.601,69.748 91.989,57.727 109.393,62.588 L112.431,60.938 L112.388,70.139 L108.633,66.45 C108.633,66.45 100.778,63.912 99.606,67.73 C98.329,71.893 103.447,71.615 106.312,72.656" fill="#FFFFFF"></path>
                        <path class="letter" d="M123.368,62.002 L136.474,62.002 L147.065,87.5 L150.536,90.885 L132.655,90.885 L135.52,88.021 L134.044,84.201 L124.409,84.201 L123.281,88.194 L125.278,90.885 L116.771,90.885 L119.679,87.977 L126.71,65.583 L123.368,62.002" fill="#FFFFFF"></path>
                        <path class="letter" d="M132.742,80.209 L128.663,70.313 L125.538,80.209 L132.742,80.209" fill="#3e66ca"></path>
                        <path class="wit" d="M80.217,17.038 C80.725,17.038 81.138,16.625 81.138,16.117 C81.138,15.609 80.725,15.196 80.217,15.196 C79.709,15.196 79.296,15.609 79.296,16.117 C79.296,16.625 79.709,17.038 80.217,17.038" fill="#FFFFFF"></path>
                        <path class="wit" d="M56.672,37.485 C57.028,37.485 57.317,37.196 57.317,36.84 C57.317,36.484 57.028,36.196 56.672,36.196 C56.316,36.196 56.028,36.484 56.028,36.84 C56.028,37.196 56.316,37.485 56.672,37.485" fill="#FFFFFF"></path>
                        <path class="wit" d="M58.625,40.74 C58.981,40.74 59.27,40.451 59.27,40.096 C59.27,39.739 58.981,39.451 58.625,39.451 C58.269,39.451 57.981,39.739 57.981,40.096 C57.981,40.451 58.269,40.74 58.625,40.74" fill="#FFFFFF"></path>
                        <path class="wit" d="M64.267,48.106 C64.437,48.106 64.574,47.969 64.574,47.799 C64.574,47.63 64.437,47.492 64.267,47.492 C64.098,47.492 63.961,47.63 63.961,47.799 C63.961,47.969 64.098,48.106 64.267,48.106" fill="#FFFFFF"></path>
                        <path class="wit" d="M71.429,23.259 C71.598,23.259 71.736,23.122 71.736,22.953 C71.736,22.783 71.598,22.646 71.429,22.646 C71.259,22.646 71.122,22.783 71.122,22.953 C71.122,23.122 71.259,23.259 71.429,23.259" fill="#FFFFFF"></path>
                        <path class="wit" d="M70.561,26.947 C70.849,26.947 71.082,26.713 71.082,26.425 C71.082,26.137 70.849,25.903 70.561,25.903 C70.273,25.903 70.038,26.137 70.038,26.425 C70.038,26.713 70.273,26.947 70.561,26.947" fill="#FFFFFF"></path>
                        <path class="wit" d="M81.411,23.257 C81.699,23.257 81.932,23.024 81.932,22.736 C81.932,22.448 81.699,22.214 81.411,22.214 C81.123,22.214 80.889,22.448 80.889,22.736 C80.889,23.024 81.123,23.257 81.411,23.257" fill="#FFFFFF"></path>
                        <path class="wit" d="M88.029,27.163 C88.318,27.163 88.551,26.93 88.551,26.642 C88.551,26.354 88.318,26.12 88.029,26.12 C87.741,26.12 87.507,26.354 87.507,26.642 C87.507,26.93 87.741,27.163 88.029,27.163" fill="#FFFFFF"></path>
                        <path class="wit" d="M130.345,102.678 C130.751,102.678 131.081,102.347 131.081,101.941 C131.081,101.535 130.751,101.205 130.345,101.205 C129.938,101.205 129.608,101.535 129.608,101.941 C129.608,102.347 129.938,102.678 130.345,102.678" fill="#FFFFFF"></path>
                        <path class="wit" d="M106.583,132.733 C106.989,132.733 107.319,132.403 107.319,131.996 C107.319,131.589 106.989,131.26 106.583,131.26 C106.176,131.26 105.846,131.589 105.846,131.996 C105.846,132.403 106.176,132.733 106.583,132.733" fill="#FFFFFF"></path>
                        <path class="wit" d="M79.241,124.703 C79.647,124.703 79.977,124.373 79.977,123.967 C79.977,123.56 79.647,123.231 79.241,123.231 C78.834,123.231 78.504,123.56 78.504,123.967 C78.504,124.373 78.834,124.703 79.241,124.703" fill="#FFFFFF"></path>
                        <path class="wit" d="M53.526,124.92 C53.932,124.92 54.262,124.591 54.262,124.184 C54.262,123.777 53.932,123.447 53.526,123.447 C53.119,123.447 52.789,123.777 52.789,124.184 C52.789,124.591 53.119,124.92 53.526,124.92" fill="#FFFFFF"></path>
                        <path class="wit" d="M56.456,108.075 C56.726,108.075 56.947,107.854 56.947,107.583 C56.947,107.312 56.726,107.092 56.456,107.092 C56.184,107.092 55.964,107.312 55.964,107.583 C55.964,107.854 56.184,108.075 56.456,108.075" fill="#FFFFFF"></path>
                        <path class="wit" d="M47.667,114.151 C47.938,114.151 48.158,113.931 48.158,113.659 C48.158,113.388 47.938,113.168 47.667,113.168 C47.396,113.168 47.176,113.388 47.176,113.659 C47.176,113.931 47.396,114.151 47.667,114.151" fill="#FFFFFF"></path>
                        <path class="wit" d="M58.3,94.078 C58.571,94.078 58.791,93.858 58.791,93.587 C58.791,93.316 58.571,93.095 58.3,93.095 C58.029,93.095 57.809,93.316 57.809,93.587 C57.809,93.858 58.029,94.078 58.3,94.078" fill="#FFFFFF"></path>
                        <path class="wit" d="M27.92,108.292 C28.191,108.292 28.411,108.071 28.411,107.8 C28.411,107.529 28.191,107.309 27.92,107.309 C27.648,107.309 27.428,107.529 27.428,107.8 C27.428,108.071 27.648,108.292 27.92,108.292" fill="#FFFFFF"></path>
                        <path class="wit" d="M36.058,109.051 C36.328,109.051 36.549,108.831 36.549,108.56 C36.549,108.289 36.328,108.069 36.058,108.069 C35.786,108.069 35.566,108.289 35.566,108.56 C35.566,108.831 35.786,109.051 36.058,109.051" fill="#FFFFFF"></path>
                        <path class="wit" d="M34.538,113.03 C35.031,113.03 35.428,112.632 35.428,112.141 C35.428,111.649 35.031,111.25 34.538,111.25 C34.046,111.25 33.648,111.649 33.648,112.141 C33.648,112.632 34.046,113.03 34.538,113.03" fill="#FFFFFF"></path>
                        <path class="wit" d="M37.36,116.394 C37.851,116.394 38.249,115.996 38.249,115.504 C38.249,115.013 37.851,114.614 37.36,114.614 C36.868,114.614 36.469,115.013 36.469,115.504 C36.469,115.996 36.868,116.394 37.36,116.394" fill="#FFFFFF"></path>
                        <path class="rood" d="M150.427,32.923 C164.034,21.705 175.24,12.048 179.181,4.734 C179.181,4.734 170.544,33.64 130.182,63.846 C130.182,63.846 68.553,105.902 51.714,117.706 C51.714,117.706 36.176,128.686 22.982,145.699 L22.679,142.922 C22.679,142.922 32.558,128.383 55.056,112.498 C74.846,98.524 82.225,93.835 82.225,93.835 C82.225,93.835 129.232,64.414 138.948,51.607 C138.948,51.607 105.227,70.964 47.07,82.204 C47.07,82.204 20.161,88.976 2.585,99.955 L0.154,99.955 C0.154,99.955 15.496,86.914 51.084,76.8 C51.084,76.8 111.302,58.921 150.427,32.923" fill="#D9222A"></path>
                        <path class="letter" d="M20.422,62.11 L32.574,62.11 L42.99,79.643 L42.99,64.28 L41.081,62.11 L48.719,62.11 L46.809,65.061 L46.809,87.889 L49.587,90.928 L37.435,90.928 L27.041,72.939 L27.041,87.998 L29.276,90.971 L20.075,90.971 L22.679,87.803 L22.679,65.582 L20.422,62.11" fill="#FFFFFF"></path>
                        <path class="letter" d="M60.915,62.066 L74.347,62.066 L83.96,87.564 L87.432,90.949 L70.203,90.949 L73.067,88.085 L71.591,84.266 L61.956,84.266 L61.37,88.259 L63.367,90.949 L54.318,90.949 L57.551,88.041 L64.257,65.647 L60.915,62.066" fill="#FFFFFF"></path>
                        <path class="wit" d="M70.289,80.273 L66.209,70.377 L63.085,80.273 L70.289,80.273" fill="#3e66ca"></path>
                        <path class="rood" d="M65.732,72.049 L66.763,71.669 L69.041,77.258 L63.616,78.614 L65.732,72.049" fill="#D9222A"></path>
                        <path class="letter" d="M96.981,62.718 C96.981,62.718 101.32,59.246 110.434,62.718 L112.431,60.938 L112.431,70.139 C112.431,70.139 108.264,65.756 105.227,65.322 C102.188,64.888 99.151,65.756 99.584,70.096 L90.904,74.002 C90.904,74.002 87.866,65.756 96.981,62.718 Z" fill="#FFFFFF"></path>
                        <path class="wit" d="M97.768,117.377 C102.234,120.017 106.539,121.671 110.315,122.181 C113.909,122.666 117.015,122.114 119.309,120.388 C119.607,120.163 119.894,119.919 120.169,119.657 C130.966,109.359 118.092,75.356 98.004,54.294 L97.989,54.277 C97.983,54.271 96.127,52.123 94.864,50.859 L95.539,50.184 C96.737,51.382 98.515,53.432 98.694,53.638 C98.694,53.639 98.695,53.639 98.696,53.64 C98.695,53.639 98.694,53.639 98.694,53.638 L98.696,53.64 C119.087,75.022 131.976,109.712 120.825,120.347 C120.53,120.629 120.214,120.896 119.879,121.148 C117.375,123.034 114.029,123.643 110.189,123.125 C106.284,122.597 101.856,120.901 97.283,118.198 L97.768,117.377 L97.768,117.377 Z M98.703,53.648 C98.706,53.652 98.709,53.654 98.709,53.655 L98.703,53.648 L98.703,53.648 Z" fill="#FFFFFF"></path>
                        <path class="wit" d="M97.012,53.285 C96.843,53.084 96.695,52.91 96.564,52.755 L96.566,52.755 C96.398,52.558 96.246,52.381 96.113,52.226 C86.424,40.988 78.017,34.163 70.924,30.597 C62.662,26.443 56.223,26.738 51.647,29.625 C47.689,32.123 46.188,39.353 48.852,50.439 C51.102,59.802 56.329,71.847 65.554,86.051 L65.539,86.028 C65.563,86.062 74.007,97.722 74.932,98.416 L74.283,99.28 C73.212,98.477 64.686,86.698 64.662,86.664 L64.647,86.641 C55.347,72.319 50.072,60.157 47.797,50.69 C45.012,39.101 46.727,31.451 51.071,28.71 C55.955,25.628 62.76,25.279 71.407,29.626 C78.618,33.251 87.14,40.162 96.931,51.519 C97.102,51.717 97.254,51.894 97.388,52.051 L97.39,52.051 C97.56,52.25 97.713,52.431 97.843,52.585 L97.012,53.285" fill="#FFFFFF"></path>
                        <path class="wit" d="M80.054,107.543 C82.164,109.352 84.483,110.109 85.234,109.234 C85.983,108.359 84.881,106.182 82.771,104.374 C80.66,102.565 78.341,101.808 77.591,102.683 C76.841,103.557 77.944,105.734 80.054,107.543" fill="#FFFFFF"></path>
                    </g>
                </svg>

            </main>
            <div id="spaceBackground">
                <div id="apiData">
                    <input type="button" id="LDbutton" value="Light off">
                    <input type="button" id="viewData" value="View data">
                </div>
            </div>
            <footer>
                <ul>
                    <li class="logo"><img class="nmctLogo" src="img/nmct-exp-cl.png" alt="nmct logo"></li>
                    <li class="copy">&copy;conor.V</li>
                </ul>
                <ul>
                    <li class="about"><a href="index.html">Home</a></li>
                    <li class="about"><a href="about.html">Contact</a></li>
                </ul>
            </footer>
        </div>
        <script
                src="http://code.jquery.com/jquery-3.2.1.min.js"
                integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
                crossorigin="anonymous"></script>
        <script src="js/app.js"></script>
    </body>
</html>

javascript
 $(function () {
     const $apiData = $('#apiData');
     $.ajax({
         type: 'GET',
         url:'https://api.nasa.gov/planetary/apod?api_key=pKfn1EbYsrax62MncGL5ehbquCkgUHpy1jvS3EUK',
         success: function(data) {
             console.log('success', data);
             $("#viewData" ).one("click",function() {
                 $apiData.append('<p>Title: ' + data.title + '</p>');
                 $apiData.append('<p>Date: ' + data.date + '</p>');
                 if (data.hdurl) {
                     $apiData.append('<img id="nasaFoto" src=' + data.hdurl + ' />');
                 } else {
                     $apiData.append('<iframe id="nasaVideo" src=' + data.url + ' />');
                 }
                 $apiData.append('<div class="scrollbox"><p id="explanation">Explanation: ' + data.explanation + '</p></div>');
             });
         }
     });
 });

/*$$$$$$$$$$$$$$$$$$$$$$$$$$
      light off/on
$$$$$$$$$$$$$$$$$$$$$$$$$$*/

 $( "#LDbutton" ).click(function (){
     console.log('1');
     if ($("#LDbutton").val('Light off')){
         $("#LDbutton").prop('Light on');
         $( "#apiData:not(:data.url)" ).css( "background-color", "black" );
         $( "#apiData:not(:data.hdurl)" ).css( "background-color", "black" );
     } else {
         $("#LDbutton").prop('Light on');
             /*reverse*/
     }
 });

2 Answers

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

You probably intended to test the button value instead of setting it in the "if" statement. And I'm also guessing you meant "val" instead of "prop" to actually set it later.

Then, the selector for the CSS didn't make sense, but I suspect you want to select everything that is is not inside the "apiData" div, so I wrote a selector for that. Finally I added the code to clear the background when you toggle back:

$("#LDbutton").click(function() {
  console.log("1");
  if ($("#LDbutton").val() == "Light off") {
    $("#LDbutton").val("Light on");
    $( ":not(#apiData *)" ).css( "background-color", "black" );
  } else {
    $("#LDbutton").val("Light off");
    /*reverse*/
    $( ":not(#apiData *)" ).css( "background-color", "" );
  }
});
Conor Vanoystaeyen
Conor Vanoystaeyen
16,687 Points
Conor Vanoystaeyen
Conor Vanoystaeyen
16,687 Points

it looks awesom only tingh that not turns black is the image backgrounds. thx steven :)