How to add two function on one onlick? - dom

Question

This already work fine for the first element
onclick="document.getElementById('event').setAttribute('value', 'MD')
But I want to add the second element to be affected on the onclick.
<div class="item" id="select_MD" onclick="document.getElementById('event').setAttribute('value', 'MD'), document.getElementById('letter-bg',).css('background', 'url(/images/giftcard-events/HBD.jpg)')">
<div class="box border">
<img src="{{ url('/images/giftcard-events/MD.jpg') }}">
</div>
</div>
First Element
<div class="form-group">
<input type="hidden" class="form-control" id="event" name="event" value="">
</div>
Second element
<div id="letter-bg"></div

Answer 1

You can do it in by create the function that do both like this
onclick="function Click() {
document.getElementById('event').setAttribute('value', 'MD');
document.getElementById('letter-bg',).css('background', 'url(/images/giftcard-events/HBD.jpg)');
}
Click();"
Or you can create the function on a script tag then call it in the onlick