HTML // CSS // JavaScript: кнопка или ввод не отображаются в сети

Question

Моя форма использует некоторые логические условия, основанные на вводе текста пользователем.Я написал функцию JavaScript для условия и решил выполнить эту функцию, когда пользователь нажимает кнопку после ввода в текстовое поле.Когда я запускаю свой код в режиме предварительного просмотра из Brackets.io, кнопки видны.Но когда я открываю файл .html в Интернете, кнопки не отображаются.

Я пытался использовать <input> с type = "submit", чтобы сделать его кнопкой, но это тоже не отображается.

HTML:

<button id="funcCond">Proceed</button>

CSS:

button {
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -300%);
          transform: translate(-50%, -300%);
  display: block;
  width: 70vw;
  opacity: 0;
  pointer-events: none;
  transition: all 0.5s cubic-bezier(0.4, 0.25, 0.8, 0.3);
}

Answer 1

Попробуйте:

<button type="submit" id="funcCond">proceed</button>

или:

<input type="button" value="proceed"/>

.. и убедитесь, что изменили значение непрозрачности на 1

Answer 2

Попробуйте добавить (тип) атрибут к вашей HTML-кнопке <button type="button" id="funcCond">proceed</button> или вместо этого вы можете использовать элемент ввода с кнопкой типа <input type="button">