Блог

Главная - Вопросы по программированию - Функция переключения для разных кнопок

Функция переключения для разных кнопок

#javascript

#javascript

Вопрос:

Я хотел бы создать две разные кнопки в ванильном JavaScript, которые при нажатии одна за другой отображают другое текстовое сообщение.

Есть какие-либо рекомендации по реорганизации приведенного ниже кода? Спасибо.

Я мог бы найти функцию переключения для одной кнопки, но не для разных кнопок.

index.html

 <button onclick="revealMessageUk()"><li><img class="flag-pictures" src="images/uk.svg" id="1"/></li></button>

<button onclick="revealMessageSpain()"><li><img class="flag-pictures" src="images/spain.svg" id="3"/></li></button>


<p id="hiddenMessageUk" style="display:none">Hello!</p>

<p id="hiddenMessageSpain" style="display:none">¡Hola!</p>

index.js

 function revealMessageUk() {
  document.getElementById('hiddenMessageUk').style.display = 'block';
}

function revealMessageSpain() {
  document.getElementById('hiddenMessageSpain').style.display = 'block';
}

Я хотел бы не только отображать, как в дальнейшем, но и иметь своего рода функцию переключения (скрыть / показать или добавить / удалить функцию) для двух иностранных языков ниже.

Комментарии:

1. что останавливает вас от .style.display='none'; другого <p> ?

2. Я был на этом форуме совсем недавно. Я надеюсь, что очень скоро смогу помочь другим, как и вы все.

Ответ №1:

попробуйте

 function revealMessage(msg) {
  hiddenMessage.style.display='block';
  hiddenMessage.innerText=msg;
} 
 <button onclick="revealMessage('Hello!')"><li><img class="flag-pictures" src="images/uk.svg" id="1" alt='UK'/></li></button>

<button onclick="revealMessage('¡Hola!')"><li><img class="flag-pictures" src="images/spain.svg" id="3" alt='ES'/></li></button>

<p id="hiddenMessage" style="display:none"></p>

Комментарии:

1. Большое спасибо Камилю и другим, конечно. Проблема решена. Ваш код творит чудеса. Я не знаю, что вы, люди, придумываете такие четкие идеи.

2. опыт @timotom 🙂

Ответ №2:

Вот способ переключения, но также сохраняйте его гибким, когда будут добавлены новые локали. Вы сохраняете своего рода «состояние» selectedLocaleId и изменяете его при нажатии на одну из кнопок с соответствующим идентификатором локали.

 let selectedLocaleId;

function selectLocale(newSelectedLocaleId) {
  // If there is a selected locale id,  un-select it
  if (selectedLocaleId) {
    document.getElementById(selectedLocaleId).style.display = 'none';
  }
  // set the new selected locale id
  selectedLocaleId = newSelectedLocaleId;
  document.getElementById(selectedLocaleId).style.display = 'block';
} 
 <button onclick="selectLocale('hiddenMessageUk')"><li><img class="flag-pictures" src="images/uk.svg" id="1"/></li></button>

<button onclick="selectLocale('hiddenMessageSpain')"><li><img class="flag-pictures" src="images/spain.svg" id="3"/></li></button>


<p id="hiddenMessageUk" style="display:none">Hello!</p>

<p id="hiddenMessageSpain" style="display:none">¡Hola!</p>

Надеюсь, это поможет 🙂

Ваше здоровье

Метки: