添加.js文件

魏斯博士

我在添加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>标签之前添加脚本文件，如下所示，我已将脚本上传到文件中并通过我的域加载了该文件，由于stackoverflow的限制，该脚本无法正常运行，localStorage但会显示以下异常，它正在加载脚本文件并调用load_()函数，并且从该行引发错误checkboxes[i].checked = localStorage.getItem(checkboxes[i].id) === 'true' ? true : false;

VM236 local.js：39未捕获的DOMException：无法从“窗口”读取“ localStorage”属性：该文档已被沙箱化，并且缺少“允许相同来源”标志。在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>