如何将 HTML 和 JavaScript 合二为一

Question

我如何将以下 html 和 js 与脚本结合起来，它最终会是什么样子？ 谢谢

<label class="form-control">
  <input id="checkbox"     type="checkbox" name="purchased" />
  Purchased
</label> 


const cb = document.getElementById('checkbox');


//run every time the checkbox is set
cb.addEventListener('input', (e) => {
  console.log('changed');
  localStorage.setItem('purchased', e.target.checked);
});


//run once on page load, check if it is set in LS if yes then check it
const localPurchasedValue = localStorage.getItem('purchased');
if (localPurchasedValue === 'true') {
  cb.checked = true;
}

Answer 1

只需将 javascript 放在script标签中

<label class="form-control">
  <input id="checkbox" type="checkbox" name="purchased" />
  Purchased
</label> 


<script type="text/javascript">
const cb = document.getElementById('checkbox');


//run every time the checkbox is set
cb.addEventListener('input', (e) => {
  console.log('changed');
  localStorage.setItem('purchased', e.target.checked);
});


//run once on page load, check if it is set in LS if yes then check it
const localPurchasedValue = localStorage.getItem('purchased');
if (localPurchasedValue === 'true') {
  cb.checked = true;
}
</script>