मेरे पास एक ऐप है जो स्थानीय स्टोरेज में उपयोगकर्ता इनपुट स्थानों को सहेज सकता है। जब कोई उपयोगकर्ता ऐप में सहेजे गए स्थान पृष्ठ पर जाता है, तो जावास्क्रिप्ट प्रत्येक सहेजे गए स्थान के लिए divs बनाता है और मुख्य टेक्स्ट प्रदर्शित करता है। मैं प्रत्येक स्थान पर क्लिक करने और फ़ंक्शन चलाने में सक्षम होना चाहता हूं। मैं divs को हाइपरलिंक्स प्राप्त करने पर अटका हुआ हूं। मुझे लगता है कि समस्या मेरे पाश में है। "जावास्क्रिप्ट: शून्य (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);
                                     }

                                });





    });

यहां एचटीएमएल पेज है:

<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>
2
Bill Hambone 3 अक्टूबर 2018, 18:52

1 उत्तर

सबसे बढ़िया उत्तर

आपको a एलिमेंट बनाने होंगे, और फिर उन्हें मनचाहा टेक्स्ट असाइन करना होगा, और फिर आपको a एलिमेंट्स को डिव में रखना होगा।

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>
0
Ruzihm 3 अक्टूबर 2018, 22:07