weird 'orange' behavior

from silly stack O question

by trentHarlem

HTML

<h1>hello world</h1>
    <p>this is a p tag</p>
    <div></div>
    <button> click me!</button>

    <script src="app.js"></script>

CSS

h1 {
      /* color: orange; */
      
      color: rgb(255, 165, 0);
    }

    div {
      height: 100px;
      width: 100px;
      background-color: red;
      margin-bottom: 40px;
      display: none;
    }

JavaScript

const h1 = document.querySelector('h1');
const div = document.querySelector('div');
const btn = document.querySelector('button');
let divCss = getComputedStyle(div).display
const h1Css = getComputedStyle(h1).color
console.log(divCss,'expected none')

/* function displayBlock(){
 //if(h1.style.color === 'orange') {
    div.style.display = 'block';
    console.log(divCss,'expected block')
console.log(h1Css)
// } 
} */

// this works but...
//btn.addEventListener('click',displayBlock)

btn.addEventListener('click',() => {
  if (h1Css === 'rgb(255, 165, 0)') {
    div.style.display = 'block';  
  }
  
//console.log((h1.style.color === 0 ||'orange'))
//console.log((h1.style.color === 'orange'))
//console.log((h1.style.color === 'rgb(255, 165, 0)'))
 console.log(divCss,'expected block')
console.log(h1Css) 
});


/*

btn.addEventListener('click', () => {
  if (h1Css === 'rgb(255, 165, 0)') {
    div.style.display = 'block';  
  } 
*/

/*
btn.addEventListener('click', () => {
  console.log('click')
  if (h1.style.color === 'orange') {
    div.style.display = 'block';  
  } else {
  div.style.display = 'block';  
  } 
  
  let color = ['orange']
console.log(color,'color')
  
  */