Question

我有一个包含范围滑块的网页，该滑块在滑动时每个滑块位置都有一些值，该值将更改，并且该值正在存储在本地存储中，现在我希望此值在本地存储中以html表单字段值的形式获取表单代码：

<body onload = "sample();initGoals();issample();initStyles();assample();isValue();">
<form >
   <div class="form-group">
     <label for="username">Username</label>
     <input type="text" name="username" class="form-control" required>
   </div>
   <div class="form-group">
      <input type="hidden" name="room" id="name" value=" ">
   </div>
   <div class="form-group" >
      <input type="hidden" name="goal" id="goal" value=" ">
   </div>
   <div class="form-group" >
     <input type="hidden" name="style" id="style" value=" ">
   </div>
   <div class="form-group" >
     <input type="number" name="furniture" id="furniture" value=" ">
   </div>
   <div class="form-group">
     <label for="email">Email</label>
     <input type="text" name="email" class="form-control" required>
   </div>
   <div class="form-group">
      <label for="password2">Password</label>
      <input type="password" name="password" class="form-control" required>
   </div>
  <input type="submit" value="Register" style="background-color:#000080;" class="btn btn 
   secondary btn-block">

我的JS代码：

window.addEventListener('load', function() {

    var imagePath = "../static/images/";
    var localStorageSliderNumber;
    var localStorageImagePath; 
    if (window.localStorage.getItem('sliderValue') != null) {
        localStorageSliderNumber = window.localStorage.getItem('sliderValue');
    } else {
        window.localStorage.setItem('sliderValue', '1');
        localStorageSliderNumber = 1;
      }
    if (window.localStorage.getItem('imagePath') != null) {
        imagePath = imagePath + window.localStorage.getItem('imagePath') + ".jpg";
    }

    var rangeslider = document.getElementById("sliderRange");
    var output = document.getElementById("sliderOutput");
    var images = document.getElementById("sliderImages");
    rangeslider.addEventListener('input', function() {
      for (var i = 0; i < output.children.length; i++) {
        output.children[i].style.display = 'none';
        images.children[i].style.display = 'none';
      }
      i = Number(this.value) - 1;
      output.children[i].style.display = 'block';
      images.children[i].style.display = 'block';

      window.localStorage.setItem('imagepath', rangeslider.getAttribute('value'));
      window.localStorage.setItem('sliderValue', (i+1));
      function isValue(){  
        var storedValue = JSON.parse(localStorage.getItem("sliderValue"))
        $("#furniture").val(storedValue);
      }
    });


  });

通过此js代码，我将SliderValue获取到本地存储，但未以html格式加载我的代码是否有任何错误：无法读取null的属性'addEventListener'

anotherpage.html

 <div class="image mt-3 mb-3" id="sliderImages">
          <img src="../static/images/1.jpg" width="400" height="180">
          <img src="../static/images/2.jpg" width="400" height="180">
          <img src="../static/images/3.jpg" width="400" height="180">
        </div><br>
        <div class="rangeslider">
          <input type="range" min="1" max="3" value="1" class="myslider" id="sliderRange">
          <div class="container">
          <div id="sliderOutput">
            <div class="col-4">

              <h6 class="display-6 mt-3"><b><center>Starting From Scratch</center></b></h6>
              <p class="demo"><center>I'm designing the room </p>
            </div>
            <div class="col-4">
              <h6 class="display-6 mt-3"><b>Somewhere in Between</b></h6>
              <p class="demo">I'm designing around a few pieces I already own</p>
            </div>
            <div class="col-4">
              <h6 class="display-6 mt-3"><b>Mostly Furnished</b></h6>
              <p class="demo">I want to put the finishing touches on my room</p>
            </div>
          </div>
        </p>

Answer 1

JavaScript

window.onload = function()
{
     var imagePath = "../static/images/";
    var localStorageSliderNumber;
    var localStorageImagePath; 
    if (window.localStorage.getItem('sliderValue') != null) {
        localStorageSliderNumber = window.localStorage.getItem('sliderValue');
    } else {
        window.localStorage.setItem('sliderValue', '1');
        localStorageSliderNumber = 1;
      }
    if (window.localStorage.getItem('imagePath') != null) {
        imagePath = imagePath + window.localStorage.getItem('imagePath') + ".jpg";
    }

    var rangeslider = document.getElementById("sliderRange");
    var output = document.getElementById("sliderOutput");
    var images = document.getElementById("sliderImages");
    rangeslider.addEventListener('input', function() {
      for (var i = 0; i < output.children.length; i++) {
        output.children[i].style.display = 'none';
        images.children[i].style.display = 'none';
      }
      i = Number(this.value) - 1;
      output.children[i].style.display = 'block';
      images.children[i].style.display = 'block';

      window.localStorage.setItem('imagepath', rangeslider.getAttribute('value'));
      window.localStorage.setItem('sliderValue', (i+1));
      function isValue(){  
        var storedValue = JSON.parse(localStorage.getItem("sliderValue"))
        $("#furniture").val(storedValue);
      }
    });

}

将本地存储值作为值获取到表单输入字段？

1 个答案:

JavaScript