Как сделать, чтобы у img при нажатии менялся src?

Question

[David Kacheishvili]

Идея такова, что нужно чтобы на странице был элемент img, чтобы он отображал два флага, и при каждом нажатии разный. Много способов перепробывал, и может вообще нельзя сделать чтобы элемент img имел по дефолту значение src="usa.png", и если пользователь нажимает на этот элемент еще раз, то у img src будет равно "rus.png". JavaScript только изучаю, некоторое не понимаю, но по итогу решение вышло только такое:
<div class="language usa"></div>

.usa {
  background-image: url(../imgs/icons/usa.png);
  width: 150px;
  height: 130px;
}

.rus {
  background-image: url(../imgs/icons/rus.png);
  width: 150px;
  height: 130px;
}

let language = document.querySelector(".language");

language.addEventListener("click", function () {
  let usaEvent = language.classList.toggle("usa");
  let rusEvent = language.classList.toggle("rus");
})

И еще дополнительно вопрос, могу ли я не затрагивать допустим в моем случае css, а создать стили в js для .usa и .rus?

Comments

[Александр Васильев]

Это переключатель языков? При клике на флаг будет переход на страницу другого языка?

[David Kacheishvili]

Александр Васильев, Да

[Александр Васильев]

David Kacheishvili, в таком случае на той странице будет свой флаг
Upd. Необходимость в подмене пропадает.

[Вадим]

1)Говорите про img - в коде div.
2)

и может вообще нельзя сделать чтобы элемент img имел по дефолту значение src="usa.png"

- что мешает? <img src="usa.png" />
3).rus и .usa в css у Вас по факту модификатор блока language. Зачем там указывать одинаковые размеры width/height? Вынесите эти размеры в .languge.
4) Приведённый код работает. Что Вас в нём не устраивает?
5)

могу ли я не затрагивать допустим в моем случае css, а создать стили в js для .usa и .rus?

Можете. Либо напрямую элементу задавать стили через свойство style, либо создавать тэг style, описывать в нём стили и добавлять в head.
6) Свои велосипеды это хорошо для обучения, но если делаете для реального сайта, то лучше поискать готовое решение переключения языка.

[David Kacheishvili]

Александр Васильев, Да, верно в таком случае будет. Но страница у меня не большая и текста немного, возможно ли в таком случае сделать так, что при нажатии на флаг будет происходить событие, где все тексты html данной страницы будут на новом языке, и таким образом страницу не нужно будет создавать новую страницу с новым языком. а сделать это примерно так:

document.querySelector('class').textContent = 'Hello!';

[David Kacheishvili]

Вадим, Да, спасибо за ответ. Особенно ваши последние слова полезны)

[Александр Васильев]

David Kacheishvili, т.е. простые варианты исключены?

[David Kacheishvili]

Александр Васильев, Нет конечно)

[Александр Васильев]

David Kacheishvili, img должен содержать src-атрибут с путем к картинке 1, еще какой-нибудь data-src атрибут с путем к картинке 2 и атрибут ключа. Слушатель события проверяет состояние ключа, меняет содержимое атрибутов «-src” местами и переключает «ключ»

[Stalker_RED]

Александр Васильев, никакой ключ не нужен, можно просто менять атрибуты местами.
[a, b] = [b, a];

[Александр Васильев]

Stalker_RED, да с ключом перегнул

Answer 1

[Noder SS]

Да, это .addAttribute("src", "название файла")

Answer 2

[Stalker_RED]

Немного доработал пример @noder_ss