Изменение html элемента с помощью JS

[Vlasenko Fedor]

document.addEventListener("DOMContentLoaded", function () {
        var len = document.images.length;
        while (len) document.images[--len].onerror = function (e) {
            e.target.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
        }
    });

вариант

[Malleys]

исходя из ваших убеждений разработчики языка написали много ненужных вещей clone, onerror

Это где вы такое вычитали? Решается поиском в Google: onerror, clone.
Это действительно полезные вещи, я ничего не имею против! Просто вы всё тянете в 2005 год... а веб-программирование в 2005 году было по другому.

Как я понимаю, вы не поняли, почему я написал так...

node.addEventListener("error", ()=> replaceBrokenImage(node));

Это было сделано для того, чтобы не был перезаписан обработчик, который возможно, объявлен через атрибут onerror.

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

Я так не думаю, а то какой смысл-то писать то, что заведомо ложно и не работает! Я конечно же проверил, там даже есть кнопка Посмотреть!

Т. е. то, что я показываю оно реально работает! Это не какие-то воображаемые псевдокоды... Оно работает во всех современных браузерах на компьютере и на мобильных телефонах... Также возможно покрытие Electron, node-webkit, cordova...

Да, оно не работает в супер старинных браузерах, и это никого не волнует, поскольку кто будет работать в браузере, в котором большая часть сайтов не работает... У людей есть выбор и если по их субъективному мнению им такое как раз, то кто сможет их заставить установить новый браузер, который сам обновляется!

вариант

А по-человечески нельзя сгенерировать эту картинку? Вы понимаете, почему это 💩📜?

[Malleys]

Poznakomlus, содержательные имена переменных упрощают понимание и изменение кода. Например, вы можете сказать, что делает следующий метод?

function getThem() {
	const list1 = new Array();

	for(const x of this.theList)
		if(x[0] === 4)
			list1.push(x);

	return list1;
}

Вы можете сказать, что делает этот код? Почему это трудно, хотя в нём нет сложных выражении, отступы расставлены грамотно и задействовано мало констант?

Всё дело в неочевидности, в том, что контекст не следует явно из самого кода!

Такой код подразумевает, что вы знаете...

• Какие данные находятся в theList?
• Почему важен элемент theList с нулевым индексом?
• Какое значение имеет число 4?
• Как используется возвращаемый список?

Ответы не следуют из кода, который приведён выше, хотя могли бы!

Предположим, что вы работаете над игрой Сапёр. Игровое поле представлено при помощи массива ячеек theList. Переименуем его в gameBoard. Каждая ячейка игрового поля представлена при помощи массива, в нулевом элементе которого код состояния, а код 4 означает, что флажок установлен.

Даже простое грамотное присваивание имён всем этим концепциям сильно улучшает вышеприведённый код...

function getFlaggedCells() {
	const flaggedCells = new Array();

	for(const cell of this.gameBoard)
		if(cell[this.STATUS_VALUE] === this.FLAGGED)
			flaggedCells.push(cell);

	return flaggedCells;
}

Код стал существенно понятным, хотя тут такое же кол-во операторов и констант, с таким же уровнем вложенности.

Можно ещё улучшить читаемость кода, и написать простой класс Cell для представления ячеек вместо использования массива. В класс включён геттер isFlagged, который скрывает магические числа. Не изменилось ничего, кроме имён, но теперь легко понять, что тут происходит...

function getFlaggedCells() {
	const flaggedCells = new Array();

	for(const cell of this.gameBoard)
		if(cell.isFlagged)
			flaggedCells.push(cell);

	return flaggedCells;
}