Как еще можно написать этот скрипт?

Question

[art style]

switchbutton.addEventListener("click",function(){
  if(toggle == 0) {
       document.querySelector(".text").innerHTML = "zamena";
   toggle = 1;
} else {
   document.querySelector(".text").innerHTML = "test";
   toggle = 0;
}
});

допустим есть блок с текстом: TEST
я хочу менять текст по кнопке на другой, допустим : zamena
написал вот такой скрипт. работает но что-то мне подсказывает что он кривой и это можно сделать более изящно.
как?

Answer 1

[DimaIs]

Как вариант:

() => {
    const replacedText = toggle ? text1 : text2;
    toggle = !toggle;
    document.querySelector(anySelector).innerHtml = replacedText;
}

Но стоит учитывать, что тут у нас toggle - boolean переменная

Comments

[ICE777]

? - оператор который усложняет чтение.

[DimaIs]

ICE777, все ситуативно. В данной ситуации он понятен и читаем.

[Олег Откидач]

Ну, кажется, тернарником можно ещё сократить запись:

document.querySelector(".text").innerHTML = (document.querySelector(".text").innerHTML === "zamena") ? "test" : "zamena";

[WbICHA]

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

[ICE777]

WbICHA, слишком глупый вопрос от "знающего" докажите что тернарный оператор легче воспринимается для чтение чем конструкция if...else.
Прежде чем делать такие выводы хотя-бы книги прочтите :>

[ICE777]

DimaIs, согласен один два три оператора еще хороши, но им лучше не злоупотреблять.

[WbICHA]

ICE777, слишком глупый ответ от "знающего". Тернарник не должен восприниматься легче, он должен восприниматься не сложнее обычного ифа.
Впрочем, обычный иф может и засорять код.

const a = b ? 1 : 2;

let a;
if(b) {
  a = 1;
} else {
  a = 2;
}

// ---

const s = `qwerty${a > 1 ? 'asd' : 'zxc'}`;

let s = 'qwerty';
if(a > 1) {
  s = `${s}asd`;
} else {
  s = `${s}zxc`;
}

И прошу, не стоит заливать, что вариант через иф лучше и понятнее.

[art style]

а что это за toggle = !toggle;
! - как расшифровать?

[DimaIs]

art style, почитайте про базовые операторы js

[ICE777]

WbICHA, я так понял что это дело самого разработчика какой оператор подходит. Пустой спор был :/

Answer 2

[lugindev]

Ну во-первых, каждый раз делать querySelector плохая идея.



Еще вариант:

Comments

[WbICHA]

textEl.innerHTML = textVars.filter(t => t !== textEl.innerHTML)[0]

Серьёзно? Файнд у вас забанен?

[lugindev]

WbICHA, зачем мне find, если нужен другой айтем?

[WbICHA]

Добавлю ещё, что если по какой-то причине тугл должен быть числом, то можно toggle = !toggle; заменить на toggle = toggle ^ 1;

[WbICHA]

lugindev, что? Какой другой айтем? Ты через фильтр реализовал кривой файнд.

[lugindev]

WbICHA, да, да, затупил, обновил

Answer 3

[v3shin]

Можно закатать оба варианта текста в span'ы, обернуть их в .textParent и делать так:

document.querySelector(".text").closest('.textParent').classList.toggle('.textParent__toggled');

И с помощью css отображать/скрывать span'ы.