如何更改输入字段中焦点上其他元素的不透明度

<form>
  <input type="text" id="inputField">
  <div class="otherElement">Other Element 1</div>
  <div class="otherElement">Other Element 2</div>
</form>

.otherElement {
  opacity: 1;
}

var inputField = document.getElementById("inputField");
var otherElements = document.getElementsByClassName("otherElement");

inputField.addEventListener("focus", function() {
  for (var i = 0; i < otherElements.length; i++) {
    otherElements[i].style.opacity = "0.5";
  }
});

inputField.addEventListener("blur", function() {
  for (var i = 0; i < otherElements.length; i++) {
    otherElements[i].style.opacity = "1";
  }
});