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

brandonlind2
brandonlind2
7,823 Points
Posted by brandonlind2
brandonlind2
7,823 Points

why is this code breaking parts of my program?

I have three pieces of code that seem to be causing problems in put them in comment in the js code that's after the html, included just in case it was needed

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <meta charset="utf-8">
        <style>
            body{
                test-align: center;
                background-color: blue;
            }
            div{
                width: 50px;
                height: 50px;
            }
            button,div {
                display: block;
                margin: auto;
            }

        </style>
    </head>
    <body>
        <h1>this is a test</h1>
        <p> lorem ipsum askjbfalkbf ajklsf lejrgbr</p>
        <button class="on">on</button>
        <button class="off">off</button>
        <div></div>
        <div class="cover"></div>
    </body>
    <script src="scripts.js"></script>
</html>

!function(){
let doc=document;
let body=doc.querySelector('body');
let onButton=doc.querySelector('button');
let offButton=doc.querySelectorAll('button')[1];
let div=doc.querySelector('div');
let div2=doc.querySelectorAll('div')[1];  
let input=doc.querySelector('input');
let h1=doc.querySelector('h1');
let p=doc.querySelector('p');
/**
why does this cause the p.style.color=rgbStr(); below to break?
let bodyBackGround=body.style.backgroundColor;
**/
let divBackGround=div.style.backgroundColor;
let div2BackGround=div2.style.backgroundColor;


body.style.backgroundColor='blue';

onButton.addEventListener('click',function(){
    function randNum(topNum,botNum){
    let randomNum=Math.floor(Math.random() * (topNum-botNum))+botNum;
    return randomNum;
    }
    function rgbStr(){
    let red=randNum(255,0).toString();
    let green=randNum(255,0).toString();
    let blue=randNum(255,0).toString();
    let rgb= 'rgb('+red+','+green+','+blue+')';
    return rgb;
    }
    div.style.width='50px';
    div.style.height='50px';
    div2.style.width='50px';
    div2.style.height='50px';
    div.style.backgroundColor=rgbStr();
    /**Why isn't div2BackGround breaking this code?
    As soon as I put div2.style.backgroundColor into
    that variable it breaks**/
    div2BackGround=rgbStr();
    body.style.backgroundColor=rgbStr();
    h1.style.color=rgbStr();
        /***while(h1.style.color=bodyBackGround){
            h1.style.color=rgbStr();
        } why isnt this causing the
        next line of code dealing with the
        p element not to work, I'm assuming
        it has to to with the variable
        bodyBackGround**/
    p.style.color=rgbStr();
            while(p.style.color=bodyBackGround){
            p.style.color=rgbStr();
        }
})

offButton.addEventListener('click', function(){
    div.style.backgroundColor=bodyBackGround;
    div2.style.backgroundColor=bodyBackGround;
})
}()

thanks

2 Answers

Steven Parker
Steven Parker
231,008 Points
Steven Parker
Steven Parker
231,008 Points

:point_right: Your while statements contain assignments instead of comparisons.

A single equal sign ("=") is an assignment. For an equality comparison would use two ("==") (or three if you want a type-sensitive test).

brandonlind2
brandonlind2
7,823 Points
brandonlind2
brandonlind2
7,823 Points

ahhh thanks man!!