Добавление кнопки в конец викторины JavaScript, используя ту же кнопку стиля, что и в HTML-файлах.

Question

Я хочу вставить кнопку, которая появится после завершения теста javascript.Я хочу, чтобы кнопка имела тот же стиль, что и кнопки, используемые в моих HTML-файлах - стилизованные из листа CSS.Я не очень разбираюсь в JS.

Конец теста Код JS:

function endQuiz() {
    $('#explanation').empty();
    $('#question-image').remove();
    $('#choice-block').empty();
    $('#pager').empty();
    $('#submitbutton').remove();
    $('#question').text("You got " + score + " out of " + quiz.length + " correct. Make sure you have a grip!");
    $(document.createElement('h2')).css({
        'text-align': 'center',
        'font-size': '4em'
    }).text(Math.round(score / quiz.length * 100) + 
'%').insertAfter('#question');
//button would go here

}

Может ли кнопка иметь класс href в файле js?

I 'попробовал и потерпел неудачу!заранее спасибо.

Answer 1

Просто напишите последнюю кнопку внутри вашего html с тем же стилем / классом, что и другие кнопки, присвоив ей идентификатор для ссылки через jQuery.

Затем в window.onload () или при загрузке вашей страницы вызовите функцию jQuery .hide () для элемента.$ ('# your-button-id'). hide ()

Когда тест закончен, покажите его с помощью: $ ('# your-button-id'). show ()

Вот документы о скрытии / показе в jQuery: https://www.w3schools.com/jquery/jquery_hide_show.asp

Answer 2

Чтобы кнопка имела те же стили, что и кнопки в вашем html, вам просто нужно использовать те же CSS-предложения.Например, если у вас есть этот класс css:

.my-button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

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

 var div = document.createElement('div');
 div.setAttribute('class', 'my-button');

Answer 3

Вы можете добавить кнопку в ваш HTML с соответствующим стилем и затем установить ее видимость скрытой.Затем в своем коде JavaScript вы можете изменить атрибут для отображения кнопки.

Эта ссылка может быть полезна: https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp