快速創建DIV后超鏈接不起作用

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 個解決方案

解決方案1
0 已采納 2018-10-03 16:30:52

快速創建DIV后超鏈接不起作用

問題描述

1 個解決方案

解決方案1 0 已采納 2018-10-03 16:30:52

解決方案1
0 已采納 2018-10-03 16:30:52