javascript - 动态创建 DIV 后超链接不起作用-6ren

javascript - 动态创建 DIV 后超链接不起作用

转载作者：行者123 更新时间：2023-11-28 02:28:11

我有一个应用程序可以在 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>

最佳答案

您必须创建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>

关于javascript - 动态创建 DIV 后超链接不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52631110/

文章推荐： javascript - 检查选择框中是否有重复条目

文章推荐： c++ 一个类可以包含一个与它是 friend 的类成员吗？

文章推荐： c++ - 使用列表而不是值范围的 uniform_int_distribution

文章推荐： javascript - KML DOM 行走很慢!如何避免 child 走路？

实例分析Try {} Catch{} 作用
今天有小伙伴给我留言问到，try{...}catch(){...}是什么意思？它用来干什么？简单的说他们是用来捕获异常的下面我们通过一个例子来详细讲解下
html - 列表社交媒体链接的 ARIA 作用
我正在努力提高网站的可访问性，但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接，因
java.util.Timer SystemTime 作用？
说现在是 6 点，我有一个 Timer 并在 10 点安排了一个 TimerTask。之后，System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas
php - 什么是 Doctrine hydration 作用？
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
python入门:argparse浅析 nargs='+'作用
我就废话不多说了，大家还是直接看代码吧~ ? 1
Maven是什么?Maven的概念+作用+仓库的介绍+常用命令的详解
Maven系列1 1.什么是Maven？ Maven是一个项目管理工具，它包含了一个对象模型。一组标准集合，一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。核心功能 Mav

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 动态创建 DIV 后超链接不起作用