title: How to change background color of select depending which HTML option user chose?
body: <p>I want to change bg color of select when user choose option red then background of select all red. When user select pink then select background color is pink. Trying to solve this problem for about 3 hours.</p>
  
  <p>I tried already addEventListener, also onchange in select but not working.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const select = document.querySelector('#select');
  
  select.addEventListener('change', (event) =&gt; {
    console.log(event.target.value)
  
    if (event.target.value = 'red') {
      select.style.background = 'red';
    }
    else if (event.target.value = 'pink') {
      select.style.background = 'pink'
    }
    else {
      select.style.background = 'yellow'
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select id="select"&gt;
    &lt;option value="red"&gt;red&lt;/option&gt;
    &lt;option value="pink"&gt;pink&lt;/option&gt;
    &lt;option value="yellow"&gt;yellow&lt;/option&gt;
  &lt;/select&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>In console I can see that event.target.value = red, pink, yellow. Color of select is changing only once for red, and if u select another option - nothing happen. No errors in editor or console. Hope someone can help me, thanks a lot.</p>