Javascript-форум - Как заменить DOM элемент

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Как заменить DOM элемент (https://javascript.ru/forum/misc/55954-kak-zamenit-dom-ehlement.html)

Как заменить DOM элемент

Добрый день,
Вопрос. Как можно заменить один элемент на другой при клике на первый? Проблема. У меня есть кнопка с атрибутом onclick при нажатии на нее срабатывает функция js в этой функции выполняется ajax запрос на сервер, после чего страница обновляется и с помощью смарти неважно каким образом выполняется другая ветвь условия, вобщем в результате отображается другой dom элемент, такая же кнопка только с другими стилями и другой функцией в onclick. И вот все работает хорошо, если не пытаться кликать на эту кнопку очень быстро и много раз, потому что страница не успевает обновиться, что бы заменить элемент и получается я вызываю несколько раз функцию на onclikе.

А зачем кликать быстро и много раз? Если непонятно что началась загрузка - сделайте чтобы было понятно. Например поменяйте курсор на часики. Кроме того можно завести переменную типа loading=false и делать ее true перед отправкой запроса предварительно проверив не тру ли она. В колбеке на получение ответа сбрасывать на фолс.

var loading=false,
    load = function(){
  if(!loading){
     /* подготовка */
      loading=true;
  }
},
var onload=function(e){
   if(e){
     /* обработка */
     loading=false;
   }
};

onclick="load"

Цитата:

А зачем кликать быстро и много раз?

Не за чем, но это приводит к ошибке.

Цитата:

Кроме того можно завести переменную типа loading=false и делать ее true перед отправкой запроса предварительно проверив не тру ли она. В колбеке на получение ответа сбрасывать на фолс.

Спасибо, идея понятна, но все же, как я могу полностью заменить dom элемент при клике? Если мне нужно это сделать без перезагрузки страницы, что бы визуально поменялся элемент.

<input type="button" onclick="this.disabled='true';/*You function()*/" value="ClickMe">

Через replaceWith заменить элемент получается но как в этом элементе в атрибуте onclick прописать функцию с нужными параметрами.

Вот у меня есть две кнопки, выводится одна в зависимости от того что возвращает сервер. Параметры в эти две функции передаются одинаковые.

<button id="id_1" onclick="func1('{$param1}', '{$param2}')">Подписаться</button>
<button id="id_2" onclick="func2('{$param1}', '{$param2}')">Отписаться</button>

function func1(param1, param2) {
	$.ajax({
		url: "/ajax/",
		type: "POST",
		data: ({передаю данные}),
		dataType: "html",
		success: function() {
                        // Нужно что бы в этом элементе был onclick с функцией func2 и параметрами param1 и param2
			$('#id_1').replaceWith('<button id="id_2">Отписаться</button>');
		}
	});
}

Функция func2 аналогична. Вобщем нужно заменять эти две кнопки друг на друга при клике, сохраняя вызов функции. Чтобы сервер отработал.

Хочется, чтобы вы сами нашли решение :)
Кнопку то может и не зачем заменять

<input type="button" value="Добавить" id="test">
<script>
    window.onload = function () {
        document.getElementById('test').onclick = function () {
            this.value = ['Добавить','Удалить'][this.state = this.state >>> 0 ? 0 : 1];
//демонстрация в консоли
            if(this.state){
                console.log('Добавить');
            }else{
                 console.log('Удалить');
            }
        };
    };
</script>

Poznakomlus

Цитата:

Хочется, чтобы вы сами нашли решение

Я не силен в js, поэтому сложно найти правильное решение :)
Но с вашей помощью у меня получилось сделать то что мне нужно, правда каким то извращенным способом.

Цитата:

Вот у меня есть две кнопки, выводится одна в зависимости от того что возвращает сервер. Параметры в эти две функции передаются одинаковые.

<input type="button" onclick="func1('{$param1}', '{$param2}')" class="style1" value="Подписаться" id="test">
<input type="button" onclick="func2('{$param1}', '{$param2}')" class="style2" value="Отписаться" id="test">

Если сервер выдал первую кнопку "Подписаться" то при клике на нее визуально меняю кнопку на "Отписаться" и отправляю запрос на сервер для подписки. При клике на "Отписаться" выполняются обратные действия. Если обновить страницу то сервер выдаю нужную кнопку. Все работает, но можно сделать как то проще?

function func1(param1, param2) {
					var element = document.getElementById('test');
					
					element.value = ['Подписаться','Отписаться'][element.state = element.state >>> 0 ? 0 : 1];
					 if(element.state){
                                                // Меняю стиль
					 	element.removeAttribute('class');
						element.setAttribute('class', 'style2');
						addFollow(param1, param2);
					 }else{
					 	element.removeAttribute('class');
						element.setAttribute('class', 'style1');
						subFollow(param1, param2);
					 }
  			 	 };

function func2(param1, param2) {
					var element = document.getElementById('test');
					
					element.value = ['Отписаться','Подписаться'][element.state = element.state >>> 0 ? 0 : 1];
					 if(element.state){
					 	element.removeAttribute('class');
						element.setAttribute('class', 'style1');
						addFollow(param1, param2);
					 }else{
					 	element.removeAttribute('class');
						element.setAttribute('class', 'style2');
						subFollow(param1, param2);
					 }
  			 	 };

function subFollow(param1, param2) {
$.ajax({
		url: "/ajax/",
		type: "POST",
		data: ({...}),
		dataType: "html"
	});
}

function addFollow(param1, param2) {
	$.ajax({
		url: "/ajax/",
		type: "POST",
		data: ({...}),
		dataType: "html"
	});
}