Во-первых Вы создаете функцию, но не где её не вызываете, поэтому она не выполняется, исправим это:
test();
Dо-вторых, пользовательские атрибуты следует писать через data-name
:
<button class="rNumbers" id="n36" data-color="red">кнопка</button>
Подробнее про пользовательские атрибуты: https://developer.mozilla.org/ru/docs/Learn/HTML/Howto/Use_data_attributes
В-третьих, чтобы вернуть элементы с data-color='red', нужно заключить это выражение в кавычки:
let test1 = document.querySelectorAll("[data-color='red']");
Ну и самое главное - querySelectorAll
возвращает NodeList, поэтому, чтобы применить стили к каждому элементу из этого NodeList, можно воспользоваться методом forEach:
test1.forEach(el => {
el.style.opacity = 0;
});
Подробнее про querySelectorAll: https://developer.mozilla.org/ru/docs/Web/API/Document/querySelectorAll
Подробнее про forEach: https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
Полный код:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button class="rNumbers" id="n36" data-color="red">кнопка</button>
<button class="rNumbers" id="n37" data-color="red">кнопка</button>
<button class="rNumbers" id="n37" data-color="green">кнопка</button>
<script>
let test1 = document.querySelectorAll("[data-color='red']");
function test() {
test1.forEach(el => {
el.style.opacity = 0;
});
};
test();
</script>
</body>
</html>