Как создать кнопку Dynami c, используя JavaScript? - PullRequest
Новая
       5

Как создать кнопку Dynami c, используя JavaScript?

0 голосов
/ 25 апреля 2020

Я хочу создать динамическую кнопку c, используя функцию onclick, я создал эту простую кнопку. И я хочу изменить «идентификатор» кнопки, когда она нажата один раз. Когда он нажимается во второй раз, я хочу получить первый идентификатор обратно. Так что я смогу применить два CSS для разных стилей.

Я однажды изменил «id», но как я могу вернуть первый «id» обратно при повторном нажатии кнопки? 

function change_style() {
  var x = document.getElementById("id-1");
  x.id = "id-2";
}
#id-1 {
  width: 80px;
  height: 50px;
  background-color: red;
  color: #fff;
}

#id-2 {
  width: 80px;
  height: 50px;
  background-color: pink;
  color: #000;
}
<button type="submit" onclick="change_style()"
  id="id-1">Button</button>

Ответы [ 5 ]

0 голосов
/ 25 апреля 2020

Приведенные выше ответы объяснили все, но у меня есть небольшой многословный способ решения вашей проблемы.

Как мы можем достичь? Вы можете добавить класс к кнопке, так как вы хотите изменить идентификатор кнопки, и невозможно вернуть кнопку назад после изменения идентификатора, поэтому вместо использования document.getElementById ("id") мы будем использовать документ. querySelector (". class")

Таким же образом, если мы изменим идентификатор кнопки, мы получим кнопку назад и сделаем с ней все, что захотим.

Теперь Возвращаясь к вашему вопросу: 

 <button type="submit" class='Btn_1' onclick="change_style()" id="id-1">Button</button>


function change_style(){
  let btn = document.querySelector('.Btn_1')
    console.log(btn.id)
  if(btn.id === "id-1"){
    btn.id = "id-2"
  }else if(btn.id === "id-2"){
    btn.id = "id-1"
  }

}

Как я уже говорил, это многословный способ, вместо того, чтобы переключать его, мы используем его, чтобы вы поняли, что происходит и как Идентификатор изменяется.

В приведенном выше коде мы используем оператор if и проверяем, существует ли этот идентификатор, если true, затем измените на id2, в противном случае верните первый.

Надеюсь, вы нашли это полезным.

0 голосов
/ 25 апреля 2020

Так что вы можете использовать getAttribute 

function change_style() {
  const x = document.querySelector('button')
  let  val = x.getAttribute('id')
  x.id = val === 'id-1' ? 'id-2' : 'id-1'
}
#id-1{
width: 80px; height: 50px; background-color: red; color: #fff;
}
#id-2{
width: 80px; height: 50px; background-color: pink; color: #000;
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">	
</head>
<body>

<button type="submit" onclick="change_style()" id="id-1">Button</button>
  
</body>
</html>
0 голосов
/ 25 апреля 2020

Атрибут id должен использоваться для идентификации элемента. Атрибут class также может служить этой цели, но идентификаторы уникальны.

Однако с классами вы можете создавать состояния в CSS. Например, обычная кнопка имеет красный цвет, а кнопка с определенным классом имеет другой цвет, в зависимости от стилей CSS.

В JavaScript вы можете указать, какой из этих стилей должен быть применяется к элементу путем добавления или удаления класса из элемента, который вы хотите sh изменить. 

const button = document.getElementById('dynamic-button');

function changeButtonStyle() {
  button.classList.toggle('styled');
}

button.addEventListener('click', changeButtonStyle);
/* Default styling without a class */
#dynamic-button {
  width: 80px;
  height: 50px;
  background-color: red;
  color: #fff;
}

/* Styles with the class added. */
#dynamic-button.styled {
  width: 80px;
  height: 50px;
  background-color: pink;
  color: #000;
}
<button id="dynamic-button">Button</button>
0 голосов
/ 25 апреля 2020

Передайте кнопку функции как «this»: 

onclick="change_style(this)"

Затем измените идентификатор с 1 на 2 или с 2 на 1. 

function change_style(button) {

  // extract number from button
  const idNum = Number(buttonid.split('-')[1]);
  
  // determine new ID number
  const newNum = (idNum === 1) ? 2 : 1;
  
  // set button's new ID
  button.id = 'id-' + newNum;
}
#id-1 {
  width: 80px;
  height: 50px;
  background-color: red;
  color: #fff;
}

#id-2 {
  width: 80px;
  height: 50px;
  background-color: pink;
  color: #000;
}
<button type="submit" onclick="change_style(this)" id="id-1">Button</button>

Хотя, если вы только меняете стиль кнопки, это лучше обрабатывать с помощью class, чем id.

0 голосов
/ 25 апреля 2020

Используйте class вместо id и переключайте класс при button щелчке. 

function change_style() {
    		var x =	document.getElementById("id-1");
    		x.classList.toggle('btn2')
    		}			
    	
.btn1{
    width: 80px; height: 50px; background-color: red; color: #fff;
    }
   .btn2{
    width: 80px; height: 50px; background-color: pink; color: #000;
    }
 		

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">	
    </head>
    <body>

    <button type="submit" onclick="change_style()" id="id-1" class="btn1">Button</button>
      
    </body>
    </html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...