I'm a self-taught beginner.
What I aim to do is better explained in animated gif as seen high-speed below:
Here are some additional guidelines:
<body>
<h1>Activity</h1>
<div id="alert"></div>
<div id="jax">
<button id="addLink" onclick="sendTheAJAX()" class="button">Add link</button>
</div>
<div id="content"></div>
<script src="../js/weblinks.js"></script>
</body>
var linkList = [
{
title: "Kottke",
url: "http://kottke.org",
author: "brett.suggs"
},
{
title: "National Geographic",
url: "http://www.nationalgeographic.com",
author: "jessica"
},
{
title: "American Museum of Natural History",
url: "http://www.amnh.org",
author: "aurora.nicole"
}
];
function createLinkElement(link) {
var linktitle = document.createElement("a");
linktitle.href = link.url;
linktitle.style.color = "#428bca";
linktitle.style.textDecoration = "none";
linktitle.style.marginRight = "5px";
linktitle.appendChild(document.createTextNode(link.title));
var linkUrl = document.createElement("span");
linkUrl.appendChild(document.createTextNode(link.url));
var titleLine = document.createElement("h4");
titleLine.style.margin = "0px";
titleLine.appendChild(linktitle);
titleLine.appendChild(linkUrl);
var detailsLine = document.createElement("span");
detailsLine.appendChild(document.createTextNode("Added by " + link.author));
var linkDiv = document.createElement("div");
linkDiv.classList.add("link");
linkDiv.appendChild(titleLine);
linkDiv.appendChild(detailsLine);
return linkDiv;
}
var content = document.getElementById("content");
linkList.forEach(function (link) {
var linkElement = createLinkElement(link);
content.appendChild(linkElement);
});
var request = new XMLHttpRequest();
request.open('GET', 'addLink.html');
request.onreadystatechange = function () {
if (request.readyState === 4) {
document.getElementById('jax').innerHTML = request.responseText;
}
};
function sendTheAJAX() {
request.send();
document.getElementById('addLink').style.display = 'none';
}
function checkURL (abc) {
var string = abc.value;
if (!~string.indexOf("http://")) {
string = "http://" + string;
}
abc.value = string;
return abc
}
function onSubmit() {
var title = document.getElementById("linkTitle").value;
linkList.push({
"title": title,
"url": document.getElementById("xLink").value,
"author": document.getElementById("name").value
});
linkList.forEach(function (link) {
var linkElement = createLinkElement(link);
content.appendChild(linkElement);
});
var alert = document.getElementById("alert");
alert.innerHTML = "<p>The link to \"" + title + "\"was succesfully added</p>";
setTimeout(function () {
alert.innerHTML = "";
}, 2000);
}
<form>
<input type="text" name="name" id="name" placeholder="Your Name">
<input type="text" name="linkTitle" id="linkTitle" placeholder="Link Title">
<input type="url" name="xLink" id="xLink" onblur="checkURL(this)" placeholder="Link URL">
<button type="submit" id="add" onclick="onSubmit()" class="button">Add</button>
</form>
if (!~string.indexOf("http://"|"https://")) {
string = "http://" + string;
}
"http://"|"https://"
evaluates in JS to 0
. Maybe you misunderstood logical OR (||
) with bitwise OR (|
)? Nevertheless, indexOf
seems a bit cumberstone here, I would suggest using regex instead and rewrite checkURL
as :function checkURL (str) {
if (str.value && !/^https?\:\/\//i.test(str.value)) {
str.value = "http://" + str.value;
}
}
type="submit"
, you are submitting form on every click and causing page reload. Instead use type="button"
in your addLink.html:<form>
<input type="text" name="name" id="name" placeholder="Your Name" />
<input type="text" name="linkTitle" id="linkTitle" placeholder="Link Title" />
<input type="url" name="xLink" id="xLink" onblur="checkURL(this)" placeholder="Link URL" />
<button type="button" id="add" onclick="onSubmit()" class="button">Add</button>
</form>
or return false
in onSubmit
function or use preventDefault
at the top of it.
content
element and 'rerender' the whole list:function onSubmit() {
var title = document.getElementById("linkTitle").value;
linkList.push({
"title": title,
"url": document.getElementById("xLink").value,
"author": document.getElementById("name").value
});
content.innerHTML = ""; // clearing the content div
linkList.forEach(function (link) {
content.appendChild(createLinkElement(link));
});
var alert = document.getElementById("alert"); // can be taken outside the function, as it is engough to get it once
alert.innerHTML = "<p>The link to \"" + title + "\"was succesfully added</p>";
setTimeout(function () {
alert.innerHTML = "";
}, 2000);
}