我不能在pug模板的index.js中使用button。我在我的pug模板中得到了以下代码:
doctype html
html
head
meta(charset='UTF-8')
meta(http-equiv='X-UA-Compatible' content='IE=edge')
meta(name='viewport' content='width=device-width, initial-scale=1.0')
title= subject[0].name
link(rel='preconnect' href='https://fonts.googleapis.com')
link(rel='preconnect' href='https://fonts.gstatic.com' crossorigin='')
link(href='https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;600;700&display=swap' rel='stylesheet')
link(rel='stylesheet' , href='https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.0/css/fontawesome.min.css')
style
include ../public/style.css
body
section.courses-background
nav.nav
a(href='/')
img(src='../pictures/logo.jpg' alt='logo')
#navLinks.nav-links
svg.icon(xmlns='http://www.w3.org/2000/svg' viewbox='0 0 512 512' onclick='hideMenu()')
path(d='M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z')
ul
li
a(href='/') HOME
li
a ABOUT US
li
a(href='/loginSignup') LOGIN/SIGNUP
li
a(href='/subjects') Subjects
li
a CONTACT
//-i.fa.fa-bars(onclick='showMenu()')
svg.icon(xmlns='http://www.w3.org/2000/svg' viewbox='0 0 448 512' onclick='showMenu()')
path(d='M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z')
.text-box
h1= subject[0].name
p= subject[0].summary
// subjects
section.course
p= subject[0].description
.subject
button.sbt-enroll(subject-data-slug=`${subject[0].slug}` ) enroll
script(src='/js/bundle.js')
最后,我定义了一个按钮,在点击时应该调用index.js文件中的applySubject函数:
let subjectBtn = document.querySelector(".sbt-enroll");
if (subjectBtn) {
//console.log("in applying function");
subjectBtn.addEventListener("click", (e) => {
e.preventDefault();
const { subject } = e.target.dataset; // e.target is button which was clicked
applySubject(subject);
});
}
当我点击按钮时,什么也没有发生。
我从pug使用的其他按钮工作正常,我可以在index.js文件中使用它们。我也使用bundle,如果它改变了什么。
1条答案
按热度按时间x6yk4ghg1#
我认为数据集属性的工作方式不同(mdn dataset)
属性应该以
data
开头:哈巴狗:
js: