Я сейчас работаю над NestJS-проектом, но я только начинающий. Мое Web-приложение должно отображать leaflet-карту с кликабельными плитками. Для каждой плитки я хочу отобразить кнопку, которая при нажатии запускает функцию. К сожалению, теги, похоже, не работают. Как мне заставить функцию работать с onclick? Есть ли другой вариант написать это? Заранее большое спасибо!
мой код:
const onEachSurface = (surface, layer) => {
const textOnPopup =
surface.properties.kachel + //here I display the number of the selected tile
' ' +
`<button onclick = "addToCart()" class = "bg-white
hover:bg-gray-100 text-gray-800 font-semibold
py-2 px-4 border-gray-400 rounded shadow"
>Add to cart</button>
<script type = "text/javascript">
function addToCart() {
console.info('hello my old friend');
}
</script>`;
layer.bindPopup(textOnPopup);};
на front-end это выглядит так: click here to see screenshot
здесь вы можете увидеть сообщение об ошибке от NextJs. Текущая функциональность заключается в том, что можно нажать на плитку, и появится всплывающее окно с номером плитки. Кнопка должна выполнять простую функцию, но NextJs не знает этой функции. В коде номер рядом с кнопкой представлен как "surface.properties.kachel" (JSON-файл загружается в фоновом режиме)
🤔 А знаете ли вы, что...
JavaScript активно развивается, и новые версии языка регулярно включают новые функции и улучшения.
Я изменил свой код на этот:
const onEachSurface = (surface, layer) => {
const div = document.createElement('div');
const text = surface.properties.kachel;
const space = ' ';
const buttonAddToCart = document.createElement('button');
buttonAddToCart.innerHTML = 'add to cart';
buttonAddToCart.data = surface.properties.kachel;
buttonAddToCart.className =
'bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border-gray-400 rounded shadow';
buttonAddToCart.onclick = function () {
addToCart();
};
div.append(text);
div.append(space);
div.append(buttonAddToCart);
layer.bindPopup(div);};
Теперь все работает! Спасибо еще раз Терри :)