我试图导入一个简单的按钮点击打开一个框从一个.html文件到另一个函数，由于某种原因，它不工作.当所有的css js和html都在自己的文件中时，它工作得很好，但当它们分开时，我不能让按钮打开时点击.
html文件
<style> #btn_region {
position: absolute; /* create a positioning context for the list items */
width: 23%;
left: 51vw;
top: 130vw;
font-size: 14px;
height: 9vw;
z-index: 1000;
}
#box_region {
position: absolute;
width: 90%;
height: 27%;
background-color: #f1f1f1;
left: 0px;
top: 138vw;
}
.regions {
width:80%;
height:60.15%;
}}
</style>
<button id='btn_region'>Region</button>
<div id='box_region' style='display:none;'>
<div id='div_region'>
<a id='neus' href='$(url)'>
<h1><span class='color-change' >Northeast</span></h1>
<img class='regions'
src='#' width='300'
height='225'>
</a>
</div>
<div id='div_region'>
<a id='usa' href='$(url)'>
<h1><span class='color-change' >USA</span></h1>
<img class='regions'
src='#' width='300'
height='225'>
</a>
</div>
</div>脚本. js文件
const regions = document.querySelector('.regions')
fetch('regions.html')
.then(res=>res.text())
.then(data=>{
regions.innerHTML=data
const parser = new DOMParser()
const doc = parser.parseFromString(data, 'text/html')
eval(doc.querySelector('script').textContent)
})
let mainDirectory = '#'
let neus_href = document.getElementById('neus');
neus_href.href = mainDirectory+'neus.html';
let usa_href = document.getElementById('usa');
usa_href.href = mainDirectory+'usa.html';
const btn_region = document.getElementById('btn_region');
const box_region = document.getElementById('box_region');
btn_region.addEventListener('click', function() {
if (box_region.style.display === 'block') {
box_region.style.display = 'none';
} else {
box_region.style.display = 'block';
}
});
document.addEventListener('click', function(event) {
if (event.target !== btn_region && event.target !== box_region) {
box_region.style.display = 'none';
}
});我正在导入到的文件
<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">
</head>
<body>
<div class="regions">
</div>
<script src="script.js"></script>
</body>
</html>
1条答案
按热度按时间qeeaahzv1#
发现了一个语法错误在“regions.html”。我认为有一个额外的花括号在您的最后一个样式规则。
另外，我收到一个控制台错误：neus_href为空
我有一种感觉，这是因为您试图选择#neus作为生成的DOM元素，其中：
假设neus_href =文档.getElementById（“neus”）;
我想如果所有的HTML代码都在一个页面上的话，这会很好，但是当HTML被分割成单独的文件时，你可能应该从你的fetch数据中获取它，看起来你存储在'doc'变量中。
让neus_href =doc.查询选择器（“#neus”）;
希望这个有用。