Запуск HTML-кода при нажатии кнопки

Question

У меня есть фрагмент HTML-кода для конкретного элемента для продажи на веб-сайте. Этот код содержит всю информацию, необходимую для элемента, включая заголовок, цену, размеры, вес и т. Д. Он также имеет кнопку «Добавить в корзину».

Что я хочу сделать, так это отвернуться от Wix и написать код всего сайта, используя HTML5, CSS3 и Bootstrap 4.1.1. Я хочу использовать тот же фрагмент кода HTML, который я включил в Wix, но без кнопки. Я создам свою собственную кнопку Bootstrap.

У меня вопрос, как мне сделать так, чтобы код запускался при нажатии кнопки начальной загрузки?

Спасибо.

Answer 1

Требуются дополнительные сведения о том, что именно вы пытаетесь сделать, но Javascript / jQuery - отличный способ динамически создавать ссылки при нажатии кнопки.

Предполагается, что у вас есть входные данные от пользователя для получения определенных атрибутов продукта (цвет / размер / и т. Д.). Вы должны сделать так, чтобы при нажатии кнопки код jQuery проверял каждый ввод и соединял для вас URL.

Answer 2

То, что вы хотите, это JavaScript. Не пренебрегать, но HTML технически не код; это считается "разметка". Чтобы получить динамическую информацию, вы должны использовать JavaScript. Это может потребовать большего запутанности, чем вы думаете.

var containerElement = document.querySelector('.container');
var buttonElement = document.querySelector('.button');
var populateContainer = function() {
  // do some stuff here
}
buttonElement.onclick = populateContainer;

Вам также может понадобиться знание базового языка, такого как PHP, чтобы помочь вам построить свой магазин. Для новичка я бы порекомендовал заглянуть в WordPress, чтобы вы могли установить плагин, который обрабатывает эти вещи для вас, например, WooCommerce.