Как я могу исправить код, чтобы закрасить кнопку и заменить синюю кнопку при нажатии?

Question

Я пытаюсь создать событие javascript, в котором при нажатии button2 оно меняет поле на синий цвет. И по щелчку button3 окно исчезает.

У меня есть два других действия, которые заставляют button1 расти и button4 сбрасывает его, но я не могу заставить другие два работать. Что мне нужно исправить в коде?

document.getElementById("button1").addEventListener("click",function(){
  document.getElementById("box").style.height = "250px";
})

document.getElementById("button2").addEventListener("click",function(){
  document.getElementById("box").style.backgroundcolor = "blue";
});

document.getElementById("button3").addEventListener("click",function(){
  document.getElementById("box").fadeOut();
});

document.getElementById("button4").addEventListener("click",function(){
   document.getElementById("box").style.height = "100px";
});

Answer 1

Что касается кнопки 2, атрибуты стиля чувствительны к регистру, вы ищете backgroundColor:

document.getElementById("box").style.backgroundColor = "blue";

Что касается кнопки 3, нет встроенной функции javascript fadeOut(), я предполагаю, что вы пытаетесь использовать функцию jQuery с тем же именем. Для этого вам нужно убедиться, что вы включаете jQuery, и выберите элемент с помощью селектора jQuery:

$('#box').fadeOut();

См. Фрагмент ниже:

document.getElementById("button1").addEventListener("click",function(){
  document.getElementById("box").style.height = "250px";
})

document.getElementById("button2").addEventListener("click",function(){
  document.getElementById("box").style.backgroundColor = "blue";
});

document.getElementById("button3").addEventListener("click",function(){
  $('#box').fadeOut();
});

document.getElementById("button4").addEventListener("click",function(){
   document.getElementById("box").style.height = "100px";
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="button1">Button 1</button>
<button id="button2">Button 2</button>
<button id="button3">Button 3</button>
<button id="button4">Button 4</button>

<div id="box" style="height: 50px; width: 300px; background-color: #ff0000; margin-top: 10px;">
 &nbsp;
</div>