Question

我正在编写一个测试页面，其中包含一个存储链接字符串的JSON对象，并允许用户向JSON对象添加新字符串。

使用全局JSON对象jsonLinks

创建页面

var jsonLinks = {
    links: []
};

并且有一个用户可以输入URL的textfield（txtLinkAddress），以及一个调用performAdd（）的按钮，该按钮负责将此textfield的值添加到存储在jsonLinks变量中的JSON对象中。

JSON条目的格式是

{"href":handles[1].value}

其中handle [1]是在onload上的performSetup中加载的txtLinkAddress的HTML元素句柄。）

测试似乎表现得很好，但是当我按下“添加链接”按钮时，会短暂添加链接，但随后会消失。

我已经做了一个测试，看看JSON对象的大小是否发生变化，因为我通过在每个performAdd调用结束时显示jsonLinks.links.length的警告来添加更多条目，但此测试始终显示JSON对象具有正好是1个元素。

有人可以帮助我理解为什么会发生这种情况以及如何解决这个问题？

来源：

        <html>
        <head>
          <style>
th.custom-th-1 {
    text-align: left;
    font-size: 10pt;
}
          </style>
          <script>
var handles = null;          

var jsonLinks = {
    links: []
};          

function performSetup()
{
    handles = [];
    handles[0] = document.getElementById('LinkViewSection');
    handles[1] = document.getElementById('txtLinkAddress');
    updateLinks();
}        

function performAdd()
{
    var _reqLinkAddr = handles[1].value;
    jsonLinks.links.push({"href": _reqLinkAddr});
    updateLinks();
}

function updateLinks()
{
    handles[0].innerHTML = '';

    for (var i = 0; i < jsonLinks.links.length; ++i)
    {
        var _hrefValue;
        var _linkItem;

        _hrefValue = jsonLinks.links[i].href;
        _linkItem = document.createElement('a');         

        _linkItem.innerHTML = _hrefValue;
        _linkItem.setAttribute('href', _hrefValue);
        handles[0].appendChild(_linkItem); 


        handles[0].appendChild(document.createElement('br'));
    }
}  
          </script>
        </head>
        <body onload="performSetup()">
<div id="LinkViewSection"></div>
        <hr />        
<div id="AddALinkSection">
        <form>
          <table>
            <th colspan="2" class="custom-th-1">Add a link:</th>
            <tr>
              <td>Link address</td>
              <td><input id="txtLinkAddress"></input></td>
            </tr>      
            <tr>
              <td></td>
              <td><button onclick="performAdd()">Add the link</button></td>
            </tr>
          </table>
        </form>
</div>
        </body>
        </html>

替代格式（传统，如果上述情况难以阅读）

<html>
  <head>
    <style type="text/css">
th.custom-th-1 {
    text-align: left;
    font-size: 10pt;
}
    </style>
    <script type="text/javascript">
var handles = null;          

var jsonLinks = {
    links: []
};          

function performSetup()
{
    handles = [];
    handles[0] = document.getElementById('LinkViewSection');
    handles[1] = document.getElementById('txtLinkAddress');
    updateLinks();
}        

function performAdd()
{
    var _reqLinkAddr = handles[1].value;
    jsonLinks.links.push({"href": _reqLinkAddr});
    updateLinks();
}

function updateLinks()
{
    handles[0].innerHTML = '';

    for (var i = 0; i < jsonLinks.links.length; ++i)
    {
        var _hrefValue;
        var _linkItem;

        _hrefValue = jsonLinks.links[i].href;
        _linkItem = document.createElement('a');         

        _linkItem.innerHTML = _hrefValue;
        _linkItem.setAttribute('href', _hrefValue);
        handles[0].appendChild(_linkItem); 

        handles[0].appendChild(document.createElement('br'));
    }
}  
    </script>
  </head>
  <body onload="performSetup()">
    <div id="LinkViewSection"></div>
    <hr />        
    <div id="AddALinkSection">
      <form>
        <table>
          <th colspan="2" class="custom-th-1">Add a link:</th>
          <tr>
            <td>Link address</td>
            <td><input id="txtLinkAddress"></input></td>
          </tr>      
          <tr>
            <td></td>
            <td><button onclick="performAdd()">Add the link</button></td>
          </tr>
        </table>
      </form>
    </div>
  </body>
</html>

Answer 1

这是因为您按下按钮提交表单，这会触发页面重新加载。然后一切又消失了。

因此，您应该停止提交表单。你可以通过返回false来做到这一点：

<button onclick="performAdd(); return false">

如果您不需要提交表单，也可以删除form代码。

需要帮助弄清楚为什么我的JSON测试行为不端

1 个答案: