Chrome и Edge не распознают изменение цвета текста моих кнопок и текста в javascript

Question

Для начала я все еще новичок в плане веб-разработки. Полный исходный код можно найти здесь: https://codepen.io/tommie-olislagers/full/NMrVKd

Код, который я специально хочу работать в Edge и Chrome, например:

var textcolor = document.getElementById('textcolor');
    textcolor.style.background = 'black';
    var textcolor2 = document.getElementById('textcolor');
    textcolor.style.color = 'white';

<textarea id="textcolor"></textarea>

Где textcolor = текстовая область, названная идентификатором. Чтобы уточнить это работает, но только в Firefox , а не в Edge или Chrome .

Edit: Вот два скриншота, сравнивающих Chrome и Firefox. Хром: https://gyazo.com/72e144a466dcd740b7fb403285b18194 Fire Fox: https://gyazo.com/e6f17558fbbac7082e1521bce9c70202

Answer 1

В консоли написано, что у вас ошибка:

Uncaught TypeError: Невозможно установить свойство 'background' для undefined - pen.js: 57

Это потому, что в строке 57 у вас есть

var buttoncolor = document.getElementById('btntest3');

Вы заметите, что вы установили имя переменной buttoncolor, но затем случайно использовали ваш id из btntest3 в качестве цели во второй строке.

Чтобы исправить это, используйте правильную переменную. Изменения:

btntest3.style.background = 'black';

до

buttoncolor.style.background = 'black';

Хотя я бы изменил его на var button_bg_color.

Вы сделали это и для следующего сета, так что это та же процедура.

 var buttoncolor = document.getElementById('btntest3');
  btntest3.style.color = 'limegreen';

до

var buttoncolor = document.getElementById('btntest3');
  buttoncolor.style.color = 'limegreen';

Answer 2

Это происходит потому, что Chrome и IE останавливает выполнение кода при обнаружении ошибки .. в вашем коде

 var buttoncolor = document.getElementById('btntest3');

не существует .. следовательно,

  btntest3.style.background = '' ;

выдаст ошибку и ваш код перестанет выполняться ...

• Чтобы решить эту проблему, вы можете удалить эти строки ...
• Добавьте элемент btntest3.
• Или заключить эти строки в блок try {} ...

Answer 3

 var buttoncolor = document.getElementById('btntest3');
 btntest3.style.background = 'black';
 var buttoncolor = document.getElementById('btntest3');
 btntest3.style.color = 'limegreen';

становится

 var btntest3 = document.getElementById('btntest3');
 btntest3.style.background = '';
 btntest3.style.color = '';

Answer 4

После того, как я проверил ваш код, вам нужно немного почистить код,

но что вызвало вашу проблему

 var buttoncolor = document.getElementById('btntest3');
 btntest3.style.background = 'black';
 var buttoncolor = document.getElementById('btntest3');
  btntest3.style.color = 'limegreen';

удалите это из своего кода, где бы он ни существовал, и ваш код будет работать,

Всегда проверяйте журнал консоли на наличие ошибок.