Question

我有一个可以将用户输入位置保存在localStorage中的应用程序。当用户转到应用程序中的“保存的位置”页面时，JavaScript将为每个保存的位置创建div并显示关键文本。我希望能够单击每个位置并运行一个功能。我坚持让div具有超链接。我认为问题出在我的循环中。目前，“ JavaScript：Void（0）”只是一个占位符。这是我到目前为止的内容：

myApp.onPageInit('saved_locations', function (page) {

             var fragment = document.createDocumentFragment();
             var parent = document.getElementById("saved");


             // iterate localStorage
             for (var i = 0; i < localStorage.length; i++) {

             // set iteration key name
             var key = localStorage.key(i);

             // use key name to retrieve the corresponding value
             var value = localStorage.getItem(key);

             // console.log the iteration key and value
             console.log('Key: ' + key + ', Value: ' + value);

             //var idNum = i.toString();

             let node = document.createElement("div");
             let a = document.createElement("a");
             a.textContent = key;
             a.href = "JavaScript:Void(0)";

             node.appendChild(a);


             fragment.appendChild(node);

             };

             parent.appendChild(fragment);

             var myForm = document.getElementById("enter_location");

             myForm.addEventListener('submit', function saveSearchLocation() {

                                     var lat = document.getElementById('Latitude').value;
                                     var lon = document.getElementById('Longitude').value;
                                     var locationStr = document.getElementById('Location').value;

                                     //Save location parameters to local storage
                                     savedLocationParams = [lat, lon, locationStr];
                                     window.localStorage.setItem(locationStr, JSON.stringify(savedLocationParams));

                                     document.getElementById("saved").onsubmit = function(){
                                     window.location.reload(true);
                                     }

                                });





    });

这是HTML页面：

<body>
<div class="pages">
   <div data-page="saved_locations" id="saved" class="page navbar-through no- 
toolbar" align="center">
    <h2><br><u>Enter A Location<br><br></u>
        <form id="enter_location">
            Latitude: <input type="text" id="Latitude" value=""><br>
                Longitude: <input type="text" id="Longitude" value=""><br>
                    Location: <input type="text" id="Location" value=""><br>
                    <input type="submit" value="Submit">
        </form>
    <h2><u>Saved Locations</u></h2>
            </div>
</div>

Answer 1

您必须创建a元素，然后将所需的文本分配给它们，然后必须将a元素放入div中。

let a = document.createElement("a");
a.textContent = "this is the link text";
a.href = "JavaScript:Void(0)";
node.appendChild(a);

如果要链接值文本，则可以执行此操作，而不是创建文本节点：

a.textContent = key;

我稍微修改了您的代码以显示示例。只需单击“单击此处”即可查看该功能的效果：

//myApp.onPageInit('saved_locations', function (page) {
var clickMeToDoLoad = function() {
  var fragment = document.createDocumentFragment();
  var parent = document.getElementById("saved");


  var fakeLocalStorage = {
    "key0": "value0",
    "key1": "value1",
    "key2": "value2"
  };

  // iterate localStorage
  //for (var i = 0; i < localStorage.length; i++) {
  for (var i = 0; i < 3; i++) {
    // set iteration key name
    //var key = localStorage.key(i);

    // use key name to retrieve the corresponding value
    //var value = localStorage[key);

    // set iteration key name
    let key = Object.keys(fakeLocalStorage)[i];

    // use key name to retrieve the corresponding value
    let value = fakeLocalStorage[key];

    // console.log the iteration key and value
    console.log('Key: ' + key + ', Value: ' + value);

    let idNum = i.toString();

    let node = document.createElement("div");
    let a = document.createElement("a");
    a.textContent = key;
    a.href = "JavaScript:Void(0)";
    node.appendChild(a);
    fragment.appendChild(node);

  }

  parent.appendChild(fragment);
}

<div class="pages">
  <div data-page="saved_locations" id="saved" class="page navbar-through no- 
   toolbar" align="center">
    <h2><br/><u>Enter A Location<br /><br /></u></h2>
    <form>
      Latitude: <input type="text" name="Latitude" value=""><br> Longitude: <input type="text" name="Longitude" value=""><br> Location: <input type="text" name="Location" value=""><br>
      <input type="submit" value="Submit" onclick="return false;">
    </form>
    <h2><br /><u>Saved Locations</u></h2>
    <button onclick="clickMeToDoLoad();">Click to demo function</button>
  </div>
</div>

快速创建DIV后超链接不起作用

1 个答案: