添加.js文件

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (47)

我在添加LOAD()函数时遇到了问题,当我在正文末尾添加它时,它会工作,但是当我尝试从.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文件加载脚本时,它不起作用.

提问于
用户回答回答于

</body>标记,我已经将你的脚本上传到一个文件中,并通过我的域加载它,由于对堆栈溢出的限制,它将无法正确运行。localStorage但是它将显示以下异常,显示它正在加载脚本文件并调用load_()函数和错误从行抛出。checkboxes[i].checked = localStorage.getItem(checkboxes[i].id) === 'true' ? true : false;

VM 236 local.js:39 unaught DOMException:未能从“窗口”读取“localStorage”属性:文档被沙箱化,并且在加载时缺少“允许-相同来源”标记。

<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>

扫码关注云+社区

领取腾讯云代金券