单击输入字段时更改div背景颜色

Question

I would like to change the color of the div that my input field is in when a user clicks on the input field to enter content and/or when they click in the div area. If the user decides to not enter any content or erase the content they entered in the input field it would go back to the default color.

The link below showcases what I would like to achieve. I currently have an active state set on the div to showcase what color I would like the div to change to. I realize that I will need to incorporate javascript to possibly achieve want I want to happen. Is anyone willing to give some assistance? Thanks.

Code: https://jsfiddle.net/L1ptj0ey/3/

HTML

 .other-area { width: 100%; height: 3.5rem; margin-top: 1.2rem; margin-bottom: 1.6rem; background-color: #cccbc9; border-radius: 4px; font-family: "Source Sans Pro", sans-serif; font-size: 1.4rem; font-weight: 600; padding-left: .9rem; } .other-area:active { background-color: #cd1e41; color: #FFF; } .other-input { border-top-right-radius: .4rem; border-bottom-right-radius: .4rem; height: 3.3rem; width: 19.3rem; margin-top: .1rem; margin-left: .9rem; padding-left: .5rem; color: #cccbc9; font-size: 1.4rem; font-weight: 600; font-family: "Source Sans Pro", sans-serif; } 

 <div class="other-area"> <span>Other Amount</span> <input type="number" name="otherAmount" value="$" class="other-input" /> </div> 

Answer 1

You can use focus and blur events of .other-input to change the styles of .other-area .

 window.onload = function() { var div = document.getElementsByClassName('other-area')[0]; var input = document.getElementsByClassName('other-input')[0]; input.addEventListener('focus', function() { div.style.background = '#cd1e41'; div.style.color = '#FFF'; }); input.addEventListener('blur', function() { div.style.background = '#cccbc9'; div.style.color = '#000'; }); } 

 .other-area { width: 100%; height: 3.5rem; margin-top: 1.2rem; margin-bottom: 1.6rem; background-color: #cccbc9; border-radius: 4px; font-family: "Source Sans Pro", sans-serif; font-size: 1.4rem; font-weight: 600; padding-left: .9rem; } .other-input { border-top-right-radius: .4rem; border-bottom-right-radius: .4rem; height: 3.3rem; width: 19.3rem; margin-top: .1rem; margin-left: .9rem; padding-left: .5rem; color: #cccbc9; font-size: 1.4rem; font-weight: 600; font-family: "Source Sans Pro", sans-serif; } 

 <div class="other-area"> <span>Other Amount</span> <input type="number" name="otherAmount" value="$" class="other-input" /> </div>