Нужна помощь в выяснении, почему мой JSON-тест плохо работает

-4

Я пишу тестовую страницу с объектом JSON, в которой хранятся строки ссылок, и позволяет пользователю добавлять новые строки к объекту JSON.

Страница создана с помощью глобального объекта JSON jsonLinks,

var jsonLinks = {
links: []
};

И имеет текстовое поле (txtLinkAddress), в которое пользователь может ввести URL-адрес, а также кнопку, которая вызывает функцию executeAdd(), которая отвечает за добавление значения этого текстового поля в объект JSON, который хранится в переменной jsonLinks.

Формат записей JSON - это

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

где handle [1] является дескриптором элемента HTML для txtLinkAddress, загруженного в performSetup на странице onload).

Тест, похоже, ведет себя так, как хотелось бы, но когда я нажимаю кнопку "Добавить ссылку", ссылка коротко добавляется, но затем исчезает.

Я проверил, изменился ли размер объекта JSON, когда я добавляю больше записей, показывая оповещение jsonLinks.links.length в конце каждого вызова executeAdd, но этот тест всегда показывал, что объект 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>

спросил(а) 2021-01-19T17:07:22+03:00 2 месяца, 3 недели назад
1
Решение
61

Это происходит потому, что вы отправляете форму, нажимая кнопку, которая вызывает перезагрузку страницы. И тогда все ушло снова.

Поэтому вы должны прекратить подачу формы. Это можно сделать, возвращая false:

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

Или вы можете удалить тег form, если вам не нужна форма отправки.

ответил(а) 2021-01-19T17:07:22+03:00 2 месяца, 3 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема