添加.js文件
添加.js文件
提问于 2018-06-10 00:26:30
我在添加load()函数时遇到了问题，当我在body末尾添加它时，它可以工作，但当我试图从.js文件中加载它时，它不能。
我的.js文件：
function toggleAttributes(checkbox, radios, attribute, attributeValue) {
for (var i = 0; i < radios.length; i += 1) {
// If checkbox is checked, set the attribute and the attribute value. If not, remove the attribute
checkbox.checked === true ? radios[i].setAttribute(attribute, attributeValue) : radios[i].removeAttribute(attribute);
}
}
function toggleRadios(el, id) {
var radiosSelector = `#${id} input[type='radio']`,
container = document.getElementById(id),
radios = document.querySelectorAll(radiosSelector);
container.classList.toggle("hide");
toggleAttributes(el, radios, "required", "");
}
var i;
var checkboxes = document.querySelectorAll('input[type=checkbox]');
var radio = document.querySelectorAll('input[type=radio]');
var alertTxt = [];
function save() {
var saved = '';
var radios = document.querySelectorAll('input[type="radio"]');
for (i = 0; i < checkboxes.length; i++) {
localStorage.setItem(checkboxes[i].id, checkboxes[i].checked);
}
for (i = 0; i < radios.length; i++) {
if (radios[i].checked === true) {
saved += radios[i].id + ' (checked radiobutton)\n';
}
localStorage.setItem(radios[i].id, radios[i].checked);
}
alert(saved);
}
function load_() {
for (i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = localStorage.getItem(checkboxes[i].id) === 'true' ? true : false;
if (checkboxes[i].checked) {
var container = '#' + checkboxes[i].dataset.target;
document.querySelector(container).classList.toggle("hide");
var radios = document.querySelectorAll('#' + checkboxes[i].dataset.target + ' input[type="radio"]');
for (j = 0; j < radios.length; j++) {
radios[j].checked = localStorage.getItem(radios[j].id) === 'true' ? true : false;
}
}
}
}
(function() {
load_();
})();我像这样添加我的.js文件：
<script src = "JS/zamowienie.js"></script>在我的身体之前
那么，这有什么问题呢？为什么当我在.html文件中添加我的脚本，但是当我从.js文件中加载它时，它不工作…
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-10 00:38:42
您需要在</body>标签之前添加脚本文件，如下所示，我已经将您的脚本上传到文件中并通过我的域加载它，由于localStorage的堆栈溢出限制，它将无法正常运行，但它将显示以下异常，表明它正在加载脚本文件并调用load_()函数，并且从checkboxes[i].checked = localStorage.getItem(checkboxes[i].id) === 'true' ? true : false;行抛出错误
VM236 local.js:39未捕获DOMException:未能从“”Window“”中读取“”localStorage“”属性:文档已被沙箱保护，并且缺少“”allow-same-DOMException“”标志。“”在load_ (https://omaraslam.com/local.js:39:33)在https://omaraslam.com/local.js:56:5在https://omaraslam.com/local.js:58:3
<html>
<head>
<style>
.hide {
display: none;
}
</style>
</head>
<body>
<p>
Wybierz dania:
</p>
<div class="custom-control custom-checkbox custom-control-inline">
<input type="checkbox" class="custom-control-input" id="checkGlowne" data-target="pierwsze" onclick="toggleRadios(this, 'pierwsze')">
<label class="custom-control-label" for="checkGlowne">Glowne</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
<input type="checkbox" class="custom-control-input" id="checkZupy" data-target="zupy" onclick="toggleRadios(this, 'zupy')">
<label class="custom-control-label" for="checkZupy">Zupy</label>
</div>
<p>
Pierwsze dania:
</p>
<div id="pierwsze" class="hide">
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" class="custom-control-input" id="piers">
<label class="custom-control-label" for="piers">Pierś z kaczki</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" class="custom-control-input" id="stek">
<label class="custom-control-label" for="stek">Stek z antrykotu</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" class="custom-control-input" id="sandacz">
<label class="custom-control-label" for="sandacz">Sandacz</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" class="custom-control-input" id="karas">
<label class="custom-control-label" for="karas">Karaś</label>
</div>
</div>
<div id="zupy" class="hide">
<p>
Zupy:
</p>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" class="custom-control-input" id="rosol">
<label class="custom-control-label" for="rosol">Rosół z kaczki</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" class="custom-control-input" id="zurek">
<label class="custom-control-label" for="zurek">Żurek</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" class="custom-control-input" id="kokosowa">
<label class="custom-control-label" for="kokosowa">Zupa kokosowa</label>
</div>
</div>
<input type="button" value="save" onclick="save()">
<script src="https://omaraslam.com/local.js"></script>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50776308
复制相关文章
相似问题